CSS 배경, 그림자, 그라디언트 요약 정리

 

CSS 배경, 그림자, 그라디언트 요약 정리를 해보겠습니다.

 

위의 속성들은 CSS에서 요소에 그래픽 효과를 넣는 대표적인 속성들입니다.

 

웹이 점점 플랫하고 단순화되지만, 그럴 수록 계층 간의 깊이 표현이 더욱 절실해집니다.

 

이에 대해서는 iOS 디자인 가이드와 구글 머테리얼 디자인 가이드를 참고해보시면 이해가 쉬우실 겁니다.

 

iOS 디자인과 안드로이드 머티리얼 디자인 가이드의 특징

 

그래픽 효과를 적절하게 사용하면 더욱 고급스럽고 명확하게 계층을 구분할 수 있습니다.

 

그럼 지금부터 그림자, 배경, 그라디언트 효과를 사용하는 방법에 대해 알아보겠습니다.

 

 

 

 

1. 배경 속성들

 

한번에 쓰기

 

CSS에서 특정 요소에 background 속성을 쓰면 다음과 같이 한번에 원하는 여러가지 속성을 정의할 수 있습니다.

 

body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }

 

 

단, 특정 속성은 연관된 백그라운드 속성을 써주지 않으면 각 속성들의 디폴트값이 자동으로 설정되므로 주의가 필요합니다.

 

예를 들면 url로 배경 이미지를 삽입하면, 기본 위치는 0 0 으로 셋팅되며 기본적으로 이미지가 반복됩니다.

 

따라서 반복되는 것을 원하지 않는다면 background-repeat: no-repeat;를 해줘야합니다.

 

 

크기

 

배경의 크기를 설정하는 background-size의 속성값은 다음과 같습니다.

 

• contain : 이미지 비율은 유지하면서, 요소 안에서 가능한 배경의 크기를 키웁니다. 비율을 유지하기 때문에 한 쪽에 여백이 생길 수 있습니다. 
• cover : 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리는 크기로 설정합니다. 영역을 모두 덮기 때문에 이미지가 일부분 잘릴 수 있습니다.

 

 

위치

 

다음과 같이 background-position의 속성 값으로 배경의 위치를 설정할 수 있습니다.

 

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

 

또는 퍼센트(%)나 픽셀(px)을 사용하여, 요소의 왼쪽 위를 기준으로 상대적인 위치 설정도 가능합니다. 

 

 

영역 설정

 

• background-origin : 테두리 시작점, 테두리 내부, 안쪽 여백 내부 등 배경 이미지의 위치 기준을 설정합니다. 
• background-clip : 위와 비슷하지만 박스 영역 단위로 배경을 어디까지 설정할지를 결정하는 속성입니다.

 

 

이미지 삽입

 

background-image를 사용하면 배경에 이미지를 삽입할 수 있습니다.

 

div{background: url(img/btnFooter.gif) 95% center no-repeat #000;}


.multi-bg{

  width: 100%; height: 400px;

  background-image: url(/image.png), url(/image2.png);

  background-repeat: no-repeat, no-repeat;

  background-position: bottom right, left;}

 

또한 한 요소에 여러 이미지를 쓸 수도 있으며 이럴 때는 콤마로 구분해서 써줍니다.

 

위의 예시처럼 이미지 2개를 삽입한다고 할 때는

 

각 이미지에 해당하는 background-repeat이나 포지션을 차례대로 콤마로 구분해서 써주는 것 입니다.

 

참고로 가장 처음에 쓴 이미지가 제일 위에 놓이며, 아래로 레이어가 쌓이는 식입니다.  

 

 

투명도

 

배경 색상의 투명도는 rgba()를 사용하면 됩니다.

div{backgroung: rgba(0,255,0,1);}

 

배경 이미지의 투명도는 opacity를 사용하면 됩니다.

 

opacity에 대한 설명은 이전 글에서 간단하게 적어두었습니다.

 

 

이미지 고정

 

background-attachment라는 속성을 이용하면, 설정한 위치에 배경 이미지를 고정할 수 있습니다.

 

페이지를 스크롤해도 화면의 위치에서 이동하지 않아서 이러한 효과를 원할 때 아래와 같이 사용할 수 있습니다.

 

div{background-attachment: fixed;}

 

 

이 밖에 더욱 자세한 배경 속성에 대해서는 MDN 배경 속성 페이지를 참고하시면 되겠습니다.

 

 

2. 그림자 효과

 

• text-shadow : 텍스트 요소에 그림자 효과를 설정할 수 있습니다.
• box-shadow : div와 같은 box 요소에 그림자 효과를 설정할 수 있습니다.

사용법은 기본적으로 그림자의 x축값, 그림자의 y축값, blur값, 색상 값 순서로 기입하면 됩니다.

 

꼭 이 순서를 지키지 않아도 아래와 같이 색상, x값, y값, 블러 값 순서로 쓴다든지 블러값이나 색상값 생략이 가능합니다.

 

text-shadow: 1px 1px 2px black;
text-shadow: #fc0 1px 0 10px;
text-shadow: 5px 5px #558abb;
text-shadow: white 2px 5px;
text-shadow: 5px 10px;

 

하지만 기본적인 작성 순서를 써보고 나서 자주 쓰는 방식을 찾는 것이 덜 헷갈리실 것 입니다.

 

box-shadow도 text-shadow와 사용법이 동일합니다.

 

 

3. 그라디언트

 

그라디언트. 그라데이션이라고도 부르며 선형, 원형으로 나뉩니다.

 

• 선형 그라디언트 : 왼쪽에서 오른쪽 등의 한 방향으로 색변화를 설정할 수 있습니다.
• 원형 그라디언트 : 중심점에서 바깥 방향으로 동그랗게 색변화를 설정할 수 있습니다.

 

/* linear-gradient(진행 방향, 색상 지정점1, 색상 지정점2, 색상1, 색상2); */

div{background: linear-gradient(to right top, 40%, 10%, green, #dedede);}

linear-gradient는 사방, 대각선, 각도로도 방향을 지정할 수 있습니다.

 

div{linear-gradient(to left top, black, pink);}

div{linear-gradient(45deg, blue, #ffffff);}

 

투명도

 

그라디언트의 투명도를 설정하여 딤을 깔거나, 페이드 효과를 줄 수 있습니다.

 

div{background: linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));}

 

반복

배경 이미지 삽입과 마찬가지로, 그라디언트도 반복에 대한 설정이 있습니다.

 

div{background: repeating-linear-gradient(150deg, red, white 10%, blue 20%);}

 

 

원형 그라디언트

원형 그래디언트는 선형 그라디언트 사용법이 조금 다릅니다.

/* background: radial-gradient(모양 크기 at 중심점, 색상 지정점1, 색상 지정점2, 색상1, 색상2); */

div{radial-gradient(circle at center, red 0, blue, green 100%);}

/* 기본 둥근 그라디언트 */

div{background: radial-gradient(#e66465, #9198e5);}


/* %로 색상의 영역 조절 */

div{
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);}

원형 그래디언트는 기본적으로 모양은 ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정됩니다.

또한 포토샵처럼 특정 위치를 기준으로 색상이 퍼지는 정도와 간격을 조절할 수 있으며 반복도 가능합니다.

개인적으로 자세한 속성값을 전부 외우기 보다는, 그라디언트가 대강 어떤 속성이 있구나 알아둔 뒤 필요할 때 검색해서 사용하시는 것을 추천합니다.

 

자세한 그라디언트 사용법은 MDN 그라디언트 페이지를 참고하시면 되겠습니다.

 

 

여기까지 CSS 배경, 그림자, 그라디언트 요약 정리를 마치겠습니다. 읽어주셔서 감사합니다.