[CSS] box-shadow 속성 사용법 총정리

CSS 에서 box-shadow 는 사용 빈도가 낮아 잘 사용하지 않지만, 그러다 보니 실제 사용할 때는 사용법이 잘 기억나지 않아 기록으로 남겨둡니다.

box-shadow

CSS 에서 box-shadow 의 기본 개념은 그 이름에서도 알 수 있듯이 HTML 요소에 그림자를 추가해 주는 스타일입니다. 그림자의 위치를 조정 할 수 있고 그림자의 퍼짐 정도(크기)와 흐림의 정도(blur) 역시 설정 할 수 있습니다.

기본 사용법

box-shadow 의 기본 사용법은 아래와 같습니다.

box-shadow: [h-offset] [v-offset] [blur] [spread] [color] (inset);

• h-offset: 그림자의 좌우 위치 설정
• v-offset: 그림자의 상하 위치 설정
• blur: 그림자의 흐려짐 정도의 범위
• spread: 그림자의 크기
• color: 그림자 색상
• inset: (optional) 요소 내부에 그림자 표현, 기본적으로 그림자는 요소 외부에 위치
  

예제

실제 사용 예제는 아래와 같습니다.

div.box { box-shadow: 10px 10px 5px 10px #444; }

위와 같이 스타일링 했을때 요소는 아래와 같이 표현 됩니다.

위 스타일링을 그대로 해석 하자면, box 라는 클래스로 지정된 div 요소에 그림자를 추가 하는데, 오른쪽으로 10px, 아래로 10px 이동해 위치하며 5px 블러처리 하고 크기는 요소보다 10px 더 크게 #444 색상으로 표현하라는 것입니다.

워낙 인수가 많이 쓰여서 순서가 헷갈려 조금 복잡해 보일 수 있으니 주의 하도록 합시다.