[CSS] 이미지 & 그라데이션으로 배경 꾸미기

배경색과 배경 범위 지정

• 전체 배경 뿐 아니라 텍스트나 목록 등 특정한 요소에도 배경을 지정할 수 있다.

1. 배경색 지정하는 background-color

• 배경을 넣고싶은 요소의 스타일 규칙을 만드는 ㅅ고성
• 16진수나 rgb, 색상 이름을 사용하여 배경색 지정

//배경색 지정하기
background-color: #000;
background-color: rgb(0, 125, 16);
background-color: blue;

• background-color는 스타일 상속이 적용되지 않음!!

2. 배경색의 적용 범위를 조절하는 background-clip

• 박스 모델의 테두리 까지 적용할지, 패딩 범위까지 적용할지, 내용 부분에만 적용할지 고르는 속성

종류	설명
border-box	박스 모델의 가장 외곽 테두리까지 적용,기본 값
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용
content-box	내용 부분에만 적용

      .clip {
        width: 200px;
        height: 100px;
        background-color: blanchedalmond;
        background-clip: border-box;
        padding: 20px;
      }

      .clip1 {
        width: 200px;
        height: 100px;
        background-color: blanchedalmond;
        background-clip: padding-box;
        padding: 20px;
      }

      .clip2 {
        width: 200px;
        height: 100px;
        background-color: blanchedalmond;
        background-clip: content-box;
        padding: 20px;
      }

배경 이미지 지정하기

• 불릿이나 아이콘 같은 이미지를 넣을 때 사용

1. 웹 요소에 배경 이미지를 넣는 background-image

• url에 이미지 파일 경로를 넣어서 사용

background-image: url("이미지 경로");

• 형식은 jpg, gif, png 형식을 사용
• 경로는 상대 경로(현 위치 기준), 절대 경로 중 선택해서 적용

      body {
        background-image: url('./dog.jpg');
      }

• 사진은 한 장을 넣었으나, 이미지가 반복되는 것을 볼 수 있는데 이를 해결하기 위해선 다음과 같은 속성이 필요하다.

2. 배경 이미지 반복 결정 background-repeat

• 배경을 가로, 세로 중 어느 방면으로 반복할 것인지 지정할 수 있는 속성

종류	설명
repeat	가로, 세로로 브라우저에 가득 찰 때까지 반복, 기본 값
repeat-x	가로로 브라우저에 가득찰 때 까지 반복
repeat-y	세로로 브라우저에 가득찰 때 까지 반복
no-repeat	한 번만 표시

      body {
        background-image: url('./dog.jpg');
        background-repeat: repeat-x;
      }

• 아까와 다르게 x 방향으로만 반복되는 것을 볼 수 있음

3. 배경 이미지의 위치조절, background-position

• 배경 이미지의 수평, 수직 위치 값 지정

background-position: <수평 위치> <수직 위치>;
수평 위치 --> left | center | right | <백분율> | <길이 값>
수직 위치 --> top | center | bottom | <백분율> | <길이 값>
//하나만 지정할 경우, 수평위치로만 인식하고 수직 위치는 50%(center)로 고정한다.

4. 배경 이미지의 적용 범위 조절, background-origin 

• 박스 모델의 패딩, 테두리 부분에도 배경 이미지를 표시할 것인지 결정

종류	설명
content-box	배경 이미지를 박스 모델의 내용 부분에만 표시,기본 값
padding-box	패딩 까지 배경 이미지 표시
border-box	테두리까지 배경 이미지 표시

      .clip {
        width: 200px;
        height: 100px;
        background-clip: border-box;
        padding: 20px;
        background-image: url('./dog.jpg');
        background-origin: border-box;
      }

      .clip1 {
        width: 200px;
        height: 100px;
        background-clip: padding-box;
        padding: 20px;
        background-image: url('./dog.jpg');
        background-origin: padding-box;
      }

      .clip2 {
        width: 200px;
        height: 100px;
        background-clip: content-box;
        padding: 20px;
        background-image: url('./dog.jpg');
      }

5. 배경 이미지 고정하기, background-attachment

• 기본적으로 스크롤 시 배경이미지가 함께 이동 되는데, 이 속성을 통해 배경 이미지 고정 가능

종류	설명
scroll	스크롤하면 배경이미지도 스크롤, 기본 값
fixed	스크롤하면 배경 이미지는 고정, 내용만 스크롤

6. 모든 속성을 하나로 제어하기 background

• 기존까지 썼던 속성은 background 하나로 엮어서 사용할 수 있으나, 보기에 불편할 수도 있음

background: url('.../aa.jpg') no-repeat center bottom fixed;

7. 배경 이미지 크기 조절, background-size

• 배경의 요소가 너무 작은경우, background-size 속성을 이용하여 배경 이미지 크기 조절 가능
• 배경 이미지를 화면에 가득 채울 경우 유용함

종류	설명
auto	원래 배경 이미지 크기만큼 표시, 기본 값
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 또는 축소
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대 또는 축소
<크기>	이미지의 너비, 높이를 지정. 값이 하나인경우 너비값만 지정, 높이는 자동 계산
<백분율>	이미지가 들어갈 요소의 크기를 기준으로 백분율 지정, 크기에 맞도록 이미지 확대 또는 축소

      .clip {
        width: 200px;
        height: 100px;
        background-clip: border-box;
        padding: 20px;
        background-image: url("./dog.jpg");
        background-origin: border-box;
        background-size: auto;
        background-repeat: no-repeat;
      }

      .clip1 {
        width: 200px;
        height: 100px;
        background-clip: padding-box;
        padding: 20px;
        background-image: url("./dog.jpg");
        background-origin: padding-box;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .clip2 {
        width: 200px;
        height: 100px;
        background-clip: content-box;
        padding: 20px;
        background-image: url("./dog.jpg");
        background-size: cover;
        background-repeat: no-repeat;
      }
  
      .clip3 {
        width: 200px;
        height: 100px;
        background-clip: content-box;
        padding: 20px;
        background-image: url("./dog.jpg");
        background-size: 150px;
        background-repeat: no-repeat;
      }

• 다 같은 크기로 설정하여도, size 조절 정도에 따라 이미지가 다르게 보인다.

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

• 배경색 이미지 사용 외에 그라데이션 효과를 주어 다른 느낌을 줄 수도 있다.

linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ......]);

방향

• 방향 지시시에 끝 지점을 기준으로 to 예약어와 함께 사용, 최대 2개 가능
• 예약어는 수평 방향 (left, right), 수직 방향 (top, bottom)을 사용한다.
  • 왼쪽 -> 오른쪽으로 변할 시 to right / 왼쪽 아래에서 오른쪽 위로 갈 시 to right top
• 위치나 각도를 생략시 to bottom으로 기본값 지정

      .grad {
        width: 200px;
        height: 50px;
        background: linear-gradient(to right bottom, rgb(19, 5, 5), white)
      }

 

각도

• 색상이 바뀌는 방향을 알려주는 옵션
• 값은 deg로 표시 맨위가 0이고, 시계 방향으로 90도씩 증가함

      .grad {
        width: 200px;
        height: 50px;
        background: linear-gradient(45deg, brown, yellow);
      }

• 위 이미지와 같이 45도 방향으로 색상이 변하는것을 볼 수 있음

색상 중지점

• 색상이 바뀌는 부분을 지정하는 옵션
• 바뀔색상과 위치를 지정할 수 있음

.grad {
        width: 200px;
        height: 50px;
        background: linear-gradient(to right, #06f, white 30%, #06f);
      }

원형 그라데이션, radial-gradient

• linear-gradient가 선형 그라데이션, 원형 그라데이션은 radial-gradient로 설정할 수 있음
• 모양을 따로 지정하지 않을 경우 타원으로 기본 값 설정

      .grad {
        width: 200px;
        height: 15vh;
        background: radial-gradient(white, yellow, red);
      }

      .grad1{
        width: 200px;
        height: 15vh;
        background: radial-gradient(circle, white, yellow, red);
      }

원형 그라데이션 크기

• 원의 모양과 크기를 나타내는 키워드를 함께 사용하여 조절

종류	설명
closest-side	원형일 때 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소가 측면에 닿을 때 까지 그림, 타원형인 경우 가장 가까운 측면의 가로나 세로면에 닿을 때 까지 그림
closest-corner	그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그리는 옵션
farthest-side	원형일 때 그라데이션 가장자리가 중심에서 가장 멀리 떨어진 측면에 닿을때 까지 그림, 타원일 때는 중심에서 가장 멀리 떨어진 가로 또는 세로면에 닿을 때 까지 그림
farthest-corner	그라데이션의 가장자리가 중심에서 가장 멀리 떨어진 코너에 닿도록 그림

      .grad {
        width: 200px;
        height: 15vh;
        background: radial-gradient(closest-side at 35% 35%, white, yellow, red);
      }

 

위치 키워드

• 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있으며, at 키워드와 함께 사용
• left, center, right 중 하나 또는 top, center, bottom, 혹은 백분율 사용 가능(생략시 center)

      .grad1{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle at 20% 20%, white, blue);
      }

색상 중지점

• 선형 그라데이션과 같이 색상이 바뀌는 부분을 정하는 곳, 아까와 같이 시작 색과 끝 색 사이에 값을 적으면 적용

그라데이션을 사용한 패턴 제작하기

• 선형, 원형 그라데이션을 반복하여 패턴을 만들 수 있음
• repeating-linear-gradient를 사용하거나, repeating-radial-gradient를 사용

      .repeat-grad {
        width: 200px;
        height: 15vh;
        background: repeating-radial-gradient(circle, white, gray 10%);
      }

• 이 때 선형, 원형 반복 그라데이션 사용시 만나는 부분이 색이 자연스럽지 않은데, 이럴 때 색상 중지점을 활용하여 부자연 스러움을 제거할 수 있음

      //사용 x
      .repeat-grad {
        width: 200px;
        height: 15vh;
        background: repeating-linear-gradient(yellow, red 10%);
      }
      //사용 o
      .repeat-grad1 {
        width: 200px;
        height: 15vh;
        background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
      }