CSS 이미지와 그라데이션 효과로 배경을 꾸며보자

 

 안녕하세요. 진득 코딩입니다.

 

 웹 문서에서는 내용 전체뿐만 아니라 특정 부분이나 글자 등 여러 요소에 배경을 넣을 수 있습니다.

 

 배경에는 단순한 색상이나 이미지를 사용할 수 있습니다.

 

 또한 그라데이션을 넣거나 색의 투명도를 조절하여 다양한 스타일을 적용할 수 있습니다.

 

 이번 시간에는 웹의 바탕을 꾸며주는 배경 스타일에 대해 살펴보도록 하겠습니다.

 

background-color 속성

 

•  background-color 속성으로 배경을 넣고 싶은 요소의 스타일 규칙을 만들어 배경색을 지정할 수 있습니다.
  
  
• background-color는 16진수나 rgb값 또는 색상 이름을 사용하여 지정합니다.
  
  
• 색상을 세밀히 조절하고 싶다면 16진숫값을 사용하고, 투명도도 함께 조절하고 싶다면 rgba 표기법을 사용합니다.
  
  

 *** 배경색 지정하기

 background-color: #008000;

 background-color: rgb(0, 128, 0);

 background-color: green;

 

• 다른 스타일들과 달리 background-color 값은 상속되지 않습니다.
  
  
• 기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐 웹 요소에 배경색이 상속된 것은 아닙니다.
  
  

background-clip 속성

 

• background-clip 속성을 이용하여 박스 모델 관점에서 배경의 적용 범위를 조절할 수 있습니다.

종류	설명
border-box	박스 모델의 가장 외곽인 테두리까지 적용합니다. 기본값입니다.
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용합니다.
content-box	박스 모델에서 내용(컨텐츠) 부분에만 적용합니다.

 

배경 이미지 지정하기

 

• 배경 이미지는 웹 요소에 이미지를 넣거나 목록의 불릿 이미지를 대신하여 아이콘과 같은 이미지를 넣을 때도 사용합니다.
  
  

background-image 속성

 

• background-image 속성은 웹 요소에 배경 이미지를 넣을 때 가장 기본으로 알아 둘 속성입니다.
  
  

 background-image: url( ' 이미지 파일 경로 ' )

 

• 이미지 파일은 *.jpg, *.gif, *png 형식을 사용하며 파일 경로에는 작은따옴표(' ')나 큰따옴표(" ")를 붙입니다.
  
  
• 파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있습니다.
  
  
• 배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채웁니다.
  
  

background-repeat 속성

 

• background-repeat 속성은 배경 이미지의 반복 방법을 지정하는 속성입니다.
  
  
• background-repeat 속성을 사용하면 배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있습니다.
  
  

종류	설명
repeat	브라우저 화면에 가득 찰 때까지 가로와 세로로 반복합니다. 기본값입니다.
repeat-x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복합니다.
repeat-y	브라우저 화면 높이에 가득 찰 때까지 세로로 반복합니다.
no-repeat	한 번만 표시하고 반복하지 않습니다.

 

background-position 속성

 

• background-position 속성을 이용하면 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있습니다.
  
  

 background-position: <수평 위치> <수직 위치>;
 수평 위치: left ¦ center ¦ right ¦ <백분율> ¦ <길이 값>
 수평 위치: top ¦ center ¦ bottom ¦ <백분율> ¦ <길이 값>

 

• 속성값을 2개로 지정한다면 첫 번째 값은 수평 위치의 값이 되고 두 번째 값은 수직 위치의 값입니다.
  
  
• 속성값을 하나만 지정한다면 웹 브라우저에서는 지정한 값을 수평 위칫값으로 간주하고, 수직 위칫값은 50%나 center로 간주합니다.
  
  
• 배경 이미지의 위치를 지정하는 방법에는 3가지가 있습니다.
  
  

1. 키워드
   
   - 키워드는 배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성값입니다.
   
   - 수평 위치는 left, center, right 중에서 선택할 수 있고, 수직 위치는 top, bottom, center 중에서 선택합니다.
   
   - 배경 이미지의 수직, 수평 위치를 모두 가운데로 지정한다면 background-position: center;라고 줄여 쓸 수 있습니다.
   
   
2. 백분율(%)
   
   - 위치 속성값을 백분율로 표시한다는 것은 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 의미입니다.
   
   
3. 크기
   
   - 배경 이미지의 위치를 길이로 직접 지정할 수도 있습니다.
   
   - ex) background-position: 30px 20px;
   
   

background-origin 속성

 

• background-origin 속성을 이용하여 박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있습니다.
  
  

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

 

background-attachment 속성

 

• background-attachment 속성을 사용하여 배경 이미지를 고정할 수 있습니다.
  
  

종류	설명
scroll	화면을 스크롤하면 배경 이미지도 스크롤됩니다. 기본값입니다.
fixed	화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤됩니다.

 

background 속성

 

• background 속성을 통해 배경 이미지 관련 속성을 하나의 속성으로 줄여 사용할 수 있습니다.
  
  

 body {
     background-image: url ( 'images/bg4.png' );
     background-repeat: no-repeat;
     background-position: center bottom;
     background-attachment: fixed;
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 background: url( 'images/bg4.png' ) no-repeat center bottom fixed;

 

• 속성값이 다르므로 입력 순서는 상관없습니다.
  
  

background-size 속성

 

• background-size 속성을 사용하여 배경 이미지의 크기를 조절할 수 있습니다.
  
  
• 이 속성은 특히 화면에 배경 이미지를 가득 채워야 할 경우에도 유용합니다.
  
  
• 속성값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산합니다.
  
  

종류	설명
auto	원래 배경 이미지 크기만큼 표시합니다. 기본값입니다.
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소합니다.
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소합니다.
<크기>	이미지의 너비와 높이를 지정합니다. 값이 하나만 주어질 경우 너빗값으로 인식하며, 이미지의 너비와 너빗값에 맞춘 높잇값도 자동 계산합니다.
<백분율>	배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대/축소합니다.

 

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

 

•  웹 문서의 배경을 꾸밀 때는 그라데이션 효과로 색 다른 느낌을 줄 수도 있습니다.
  
  
• 그라데이션 효과는 여러모로 편리하게 사용할 수 있는 기능입니다.
  
  

선형 그라데이션

 

• 선형 그라데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말합니다.
  
  
• linear-gradient라는 함수로 이를 만들 수 있습니다.
  
  
• 색상이 어느 방향으로 바뀌는지 그리고 어떤 색상으로 바뀌는지 알려 주어야 합니다.
  
  

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

 

1. 방향
   
   - 그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용합니다.
   
   - to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있습니다.
   
   - 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용합니다.
   
   - 예를 들어 색상이 왼쪽 아래에서 오른쪽 위로 변하는 그라데이션이라면 to right top 또는 to top right로 사용합니다.
   
   
2. 각도
   
   - 각도는 선형 그라데이션에서 색상이 바뀌는 방향을 알려주는 방법입니다.
   
   - 이때 각도는 그라데이션이 끝나는 부분이고 값은 deg로 표기합니다.
   
   
3. 색상 중지점
   
   - 2가지 색 이상의 선형 그라데이션을 만들려면 색상이 바뀌는 부분을 지정해주어야 합니다.
   
   - 색상 중지점(color-stop)은 그라데이션에서 바뀌는 색을 의미합니다.
   
   - 색상 중지점을 지정할 때 쉼표(.)로 색상을 구분하는데, 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 함께 지정할 수 있습니다.
   
   - 투명도를 함께 사용한 색상도 rgba 표기법을 이용해서 색상 중지점을 지정할 수 있습니다.

원형 그라데이션

 

• 원형 그라데이션은 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다.
  
  
• 원형 그라데이션은 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 선택합니다.
  
  

 radial-gradient (<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ...]);

 

1. 모양
   
   - 원형 그라데이션에서 만들어지는 모양은 원형(circle)과 타원형(ellipse)입니다.
   
   - 모양을 따로 지정하지 않으면 타원형으로 인식합니다.
   
   
2. 크기
   
   - 원형 그라데이션을 지정할 때 원의 크기도 정할 수 있습니다.
   
   - 원의 모양(circle 또는 ellopse)과 크기를 나타내는 키워드 값을 함께 쓰면 됩니다.
   
   

속성값	설명
closest-side	- 원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그립니다. 타원형이라면 그라데이션 중심에서 가장 가까운 요소의 가로 측면이나 세로 측면에 닿을 때까지 그립니다.  - 결과 화면은 그라데이션을 적용하는 요소가 변이 4개인 사각형입니다. 여기에서는 오른쪽 측면에 그라데이션의 가장자리가 닿을 때까지 그라데이션을 그립니다.
closest-corner	- 그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그립니다.  - 결과 화면은 그라데이션이 적용되는 사각형 요소에 꼭짓점(corner)이 4개 있는데, 그라데이션의 중심에서 가장 가까운 꼭짓점에 닿을 때까지 그라데이션을 그립니다.
farthest-side	- 원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 측면에 닿을 때까지 그립니다.  - 타원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 가로 또는 세로 측면과 만나도록 합니다.
farthest-corner	- 그라데이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 합니다.  - 기본값입니다.

 

   3. 위치

 

        - at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있습니다.

        - 사용할 수 있는 위치 속성값은 키워드 (left, center, right 중 하나 또는 top, center, bottom 중 하나) 또는 30%, 20% 같은 백분율입니다.

         - 속성값을 생략하면 가로와 세로 모두 중앙인 center로 인식합니다.

    4. 색상 중지점

 

         - 색상 중지점은 색상이 바뀌는 부분을 의미합니다.

 

         - 그라데이션의 색상과 어느 부분에서 색상을 바꿀지 위치도 함께 지정할 수 있습니다.

 

그라데이션을 사용한 패턴 만들기

 

• 선형 그라데이션과 원형 그라데이션은 반복해서 패턴을 만들 수 있습니다.
  
  
• 선형 그라데이션을 반복할 때는 repeating-linear-gradient를 사용하고, 원형 그라데이션을 반복할 때는 repeating-radial-gradient를 사용합니다.
  
  
• 이렇게 선형 그라데이션을 반복하면 그라데이션끼리 만나는 부분이 자연스럽지 않습니다.
  
  
• 그래서 그라데이션을 반복해서 패턴을 만들 때는 각 색상 중지점의 위치를 적절하게 조절해야 합니다.
  
  
• 그라데이션을 반복할 때는 시작 생상과 끝 생상을 명확히 구분해 줘야 중간에 섞이지 않습니다.
  
  

 ex1) background: repeating-linear-gradient (yellow, yellow 20px, red 20px, red 40px);

 ex2) background: repeating-radial-gradient (circle, white, white 10%, #ccc 10%, #ccc 20%);

 

---

 

이번 시간에는 이미지와 그라데이션 효과를 이용하여 배경을 꾸미는 방법에 대해서 살펴보았습니다.

 

 웹 페이지는 시각적인 요소가 중요하기 때문에 이번 시간에 살펴본 스킬들을 이용하여 자유롭게 화면을 꾸며서 좋은 화면을 만들길 바랍니다.

 

 이번 포스팅은 여기까지입니다.

 

궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊