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; }
위와 같이 스타일링 했을때 요소는 아래와 같이 표현 됩니다.
