개발자 노트 - 강경훈 story

HTML CSS/CSS · 2024. 4. 9. fullscreen 넓게보기

색상과 배경을 위한 스타일

색상과 배경을 위한 스타일

1. 웹에서 색상 표현하기

16진수 표기법

#ffffff 처럼 #과 함께 6자리의 16진수로 표시
앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양.
하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시
000000(검은색) 〜 ffffff(흰색)
두자리씩 중복될 경우 줄여 사용할 수 있음.
예) #ffff00 → #ff0 #cccccc → #ccc

hsl/hsla 표기법

color : hsl(240, 100%, 50%) 처럼 세 자리의 숫자로 표시.
앞의 숫자부터 색상(hue), 채도(saturation), 밝기(light)의 양.
투명도를 조절할 때는 hsla(240,100%,50%,0.3)처럼 마지막에 알파값 추가
알파값은 불투명도를 나타내는 값으로 0니 값 중에서 사용(1은 불투명, 0은 완전 투명)

rgb/rgba 표기법

color : rgb(255,0,0)처럼 세 자리의 숫자로 표시
앞의 숫자부터 빨강, 초록, 파랑의 양.
하나도 섞이지 않았을 때는 0, 가득 섞였을 때는 255
투명도를 조절할 때는 color : rgba(255,0,0,.3) 처럼 마지막에 알파값 추가
알파값은 불투명도를 나타내는 값으로 0〜1 값 중에서 사용(1은 불투명, 0은 완전 투명)

색상 이름표기법

잘 알려진 색상 이름으로 표시
기본 색상 16가지
모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(web-safe color)라고 하는데
기본 16가지 색상을 포함해 모두 216가지.

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      body{background: #222;}
      .text1{color: rgb(255,255,255)}
      /* 투명도 0.8 */
      /* 0 : 완전 투명, 1 : 불투명 */
      .text2{color: rgb(255,255,255,0.8)}
      .text3{color: rgb(255,255,255,0.5)}
      /* .text4{color: rgb(255,255,255,0.2)} */
      /* 소수점 앞의 0을 생략 가능 */
      .text4{color: rgb(255,255,255,.2)}
   </style>
</head>
<body>
   <h1 class="text1">HTML+CSS3</h1>
   <h1 class="text2">HTML+CSS3</h1>
   <h1 class="text3">HTML+CSS3</h1>
   <h1 class="text4">HTML+CSS3</h1>
</body>

2. 배경색과 배경 이미지

background-color 속성

웹 문서의 요소에 배경색 지정
16진수나 rgb 값, rgba 값 또는 색상 이름 사용

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      body{
         /* background-color: #0099ff; */
         /* 중복 생략 */
         background-color: #09f;
      }
      div{
         background-color: white;
         width: 90%;
         padding: 15px;
         border: 1px solid black;
      }
      p{line-height: 30px;}
   </style>
</head>
<body>
   <div>
      <h1>초콜릿(Chocholate)</h1>
      <p>
         초콜릿은 카카오 콩을 재료로 가공한 식품이다.
         초콜릿은 카카오 콩을 재료로 가공한 식품이다.
         초콜릿은 카카오 콩을 재료로 가공한 식품이다.
         초콜릿은 카카오 콩을 재료로 가공한 식품이다.
         초콜릿은 카카오 콩을 재료로 가공한 식품이다.
      </p>
   </div>
</body>

background-clip 속성

배경을 어디까지 적용할지 지정

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>bg-clip</title>
   <style>
      div{
         width: 300px;
         /* dotted : 점선 */
         border: 5px dotted #222;
         background: skyblue;
         padding: 35px;
         /* 테두리 아래 여백 : 20px */
         margin-bottom: 20px;
      }
      .bg1{
         /* 배경색이 테두리까지 */
         background-clip: border-box;
      }
      .bg2{
         /* 배경색이 테두리 전, 패딩까지 */
         background-clip: padding-box;
      }
      .bg3{
         /* 배경색이 패딩전, 내용까지 */
         background-clip: content-box;
      }
   </style>
</head>
<body>
   <div class="bg1">
      <p>
         <strong>토마토:</strong>
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
      </p>
   </div>
   <div class="bg2">
      <p>
         <strong>토마토:</strong>
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
      </p>
   </div>
   <div class="bg3">
      <p>
         <strong>토마토:</strong>
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
         토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분이 비타민 H와 P까지 포함된 과일이다.
      </p>
   </div>
</body>

background-image 속성

배경 이미지 파일 경로 지정

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>bg-img</title>
   <style>
      body{
         background-image: url(images/bg1.png);
      }
   </style>
</head>
<body>
   
</body>

background-repeat 속성

배경 이미지 반복 여부 및 반복 방향 지정

background-size 속성

배경 이미지 크기 조절

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         width: 500px;
         height: 500px;
         margin-bottom: 20px;
         border: 2px double black;
      }
      .bg1{
         background: url(images/bg4.jpg);
         /* auto : 기본값 */
         background-size: auto;
      }
      .bg2{
         /* 기본은 이미지 반복 */
         /* background: url(images/bg4.jpg); */
         /* no-repeat : 반복 안함 */
         background: url(images/bg4.jpg) no-repeat;
         background-size: 200px 150px;
      }
      .bg3{
         background: url(images/bg4.jpg) no-repeat;
         background-size: 60% 40%;
      }
      .bg4{
         background: url(images/bg4.jpg) no-repeat;
         /* 원본 이미지가 가로가 길어서 아래 여백이 생김 */
         background-size: contain;
      }
      .bg5{
         background: url(images/bg4.jpg) no-repeat;
         /* 여백을 늘리면서 채워서 오른쪽이 짤림 */
         background-size: cover;
      }
      .bg6{
         background: url(images/bg4.jpg) no-repeat;
         /* 억지로 비율을 맞추면서 세로로 홀쭉해짐 */
         background-size: 100% 100%;
      }
   </style>
</head>
<body>
   <div class="bg1"></div>
   <div class="bg2"></div>
   <div class="bg3"></div>
   <div class="bg4"></div>
   <div class="bg5"></div>
   <div class="bg6"></div>
</body>

background-position 속성

배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정

백분율 백분율 : 배경 이미지의 가로 위치와 세로 위치를 %로 나타냄.
길이 길이 : 배경 이미지의 위치를 직접 길이로 지정
키워드 - left, center, right, top, middle, bottom
가로 배치는 left와 center, right 중에서 선택
세로 배치는 top과 bottom, center 중에서 선택

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         margin-bottom: 20px;
      }
      button{
         width: 140px;
         height: 50px;
         background-color: rgb(0,110,255);
         border: 1px solid rgb(0,110,255);
         color: #fff;
         font-weight: bold;
         /* 테두리 꼭지점 부분을 둥글게 처리 */
         border-radius: 8px;
      }
      #bg1{
         background-image: url(images/light.png);
         background-repeat: no-repeat;
         /* 가로 세로 px 만큼 배치 */
         background-position: 5px 7px;
      }
      #bg2{
         background-image: url(images/light.png);
         background-repeat: no-repeat;
         /* 수평은 오른쪽, 수직은 가운데 */
         background-position: right center;
      }
   </style>
</head>
<body>
   <div>
      <button id="bg1">
         IDEA
      </button>
   </div>
   <div>
      <button id="bg2">
         IDEA
      </button>
   </div>
</body>

background-origin 속성

배경 이미지를 배치하기 위한 기준 설정

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         border: 15px solid #ccc;
         width: 400px;
         height: 200px;
         margin-bottom: 20px;
         padding: 35px;
      }
      .bg1{
         background: url(images/bg3.jpg) no-repeat;
         /* padding-box는 기본값 */
         /* 패딩까지 적용 */
         background-origin: padding-box;
      }
      .bg2{
         background: url(images/bg3.jpg) no-repeat;
         /* 테두리까지 이미지가 표시되므로, 보이지 않는 부분이 발생 */
         background-origin: border-box;
      }
      .bg3{
         background: url(images/bg3.jpg) no-repeat;
         /* 패딩을 제외한 내용까지 적용 */
         background-origin: content-box;
      }
   </style>
</head>
<body>
   <div class="bg1"></div>
   <div class="bg2"></div>
   <div class="bg3"></div>
</body>

background-attachment 속성

배경 이미지를 고정하는 속성

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      body{
         background-image: url(images/bottom-bg.jpg);
         background-repeat: no-repeat;
         background-position: center bottom;
         background-attachment: fixed;
      }
      div{
         width: 300px;
         padding: 20px;
         /* top:20px right: auto bottom: 20px left: auto 시계 방향 */
         /* margin: 20px auto 20px auto; */
         /* 바라보는쪽 대비해서 생략 가능 */
         margin: 20px auto;
      }
      h1{
         background-color: #222;
         color: white;
         text-align: center;
         padding: 10px;
      }
   </style>
</head>
<body>
   <div>
      <h1>HTML</h1>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
      </p>
   </div>
   <div>
      <h1>CSS3</h1>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
      </p>
   </div>
   <div>
      <h1>Javascript</h1>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis laudantium minus ut! Eaque tenetur commodi cumque consectetur, dignissimos odio exercitationem excepturi nobis sit quod. Nihil molestiae quidem esse harum in?
      </p>
   </div>
</body>

background 속성

배경 관련 속성을 줄여서 표기
각 속성 값이 다르므로 표기 순서는 상관없음

3. 그라데이션 효과로 배경 꾸미기

선형 그라데이션

방향
- [표준 구문] 끝 지점을 기준으로 ‘to’ 키워드와 함께 사용
각도
- 그라데이션이 끝나는 각도
- 단위는 deg
색상 중지점
- 색상이 바뀌는 지점
- 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있음.

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         width: 500px;
         height: 300px;
      }
      .grad{
         /* 그라데이션: 오른쪽 아래로, 파란색에서 흰색으로 */
         background: linear-gradient(to right bottom, blue, white);
      }
   </style>
</head>
<body>
   <div class="grad"></div>
</body>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         width: 500px;
         height: 300px;
         border-radius: 10px;
      }
      .grad{
         /* 그라데이션: 45도로 빨간색에서 흰색으로 */
         background: linear-gradient(45deg, #ff0000, #ffffff);
      }
   </style>
</head>
<body>
   <div class="grad"></div>
</body>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         width: 500px;
         height: 300px;
         border-radius: 10px;
      }
      .grad{
         /* 그라데이션 : 30% 지점에서 흰색으로 중지점 */
         background: linear-gradient(to bottom, #06f, white 30%, #06f);
      }
   </style>
</head>
<body>
   <div class="grad"></div>
</body>

원형 그라데이션

원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀌는 그러데이션
색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 함.

모양
- 원형 그러데이션에서 만들어지는 모양은 circle(원형)과 ellipse(타원형)
- 따로 지정하지 않으면 ellipse로 인식
위치
- 그러데이션이 시작하는 원의 중심 지정
- [표준 구문] ‘모양’과 ‘크기’ 속성 다음에 at 키워드와 함께 위치 값 지정
- [접두사 구문] at 키워드 없이 구문의 맨 앞에 위치 값 지정
- 사용할 수 있는 값 : 키워드(left, center, right 중 하나, top, center, bottom 중 하나)나 백분율
색상 중지점
- 색상이 바뀌는 지점
- 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있음

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         width: 500px;
         height: 300px;
         border-radius: 10px;
         margin: 10px;
      }
      .grad1{
         /* 그라데이션 : 타원형으로 중심점이 흰색에서 노란색으로 */
         background: radial-gradient(white, yellow, red);
      }
      .grad2{
         /* 그라데이션 : 원형으로 중심점이 흰색에서 파란색으로 */
         background: radial-gradient(circle, white, yellow, red, blue);
      }
   </style>
</head>
<body>
   <div class="grad1"></div>
   <div class="grad2"></div>
</body>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         width: 500px;
         height: 300px;
         border-radius: 10px;
         margin: 10px;
      }
      .grad1{
         /* 그라데이션: 원형으로 중심점이 가로 세로 10% 10% 지점에서 시작해서 흰색에서 파란색으로 */
         background: radial-gradient(circle at 10% 10%, white, blue);
      }
   </style>
</head>
<body>
   <div class="grad1"></div>
</body>

그라데이션 반복

단순히 그러데이션을 반복하는 것이 아니라 ‘패턴’을 만들어 반복시킴

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         width: 500px;
         height: 300px;
         border-radius: 10px;
         margin: 10px;
      }
      .grad1{
         /* 노란색으로 시작해서 20px까지, 그 지점에서
         빨갠색으로 시작해서 40px 까지 */
         background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px)
      }
      .grad2{
         /* 노란색으로 시작해서 20px까지, 그 지점에서
         빨갠색으로 시작해서 40px 까지 */
         background: repeating-linear-gradient(to right, yellow, yellow 20px, red 20px, red 40px)
      }
   </style>
</head>
<body>
   <div class="grad1"></div>
   <div class="grad2"></div>
</body>

목차로 돌아가기

'HTML CSS > CSS' 카테고리의 다른 글

HTML5와 시맨틱 태그 (0)	2024.04.09
CSS 레이아웃 (0)	2024.04.09
CSS 박스 모델 (0)	2024.04.09
텍스트 관련 스타일 (0)	2024.04.09
CSS 기초 (0)	2024.04.09

HTML CSS/CSS 관련 글

더 보기

티스토리툴바