TIL 15 | CSS_box-shadow

오늘은 반응형 웹사이트 수업을 들으며 나왔던 CSS box-shadow에 대해 기록하고자 한다.

1.box-shadow란?

box-shadow란 무엇인가?
박스 요소의 그림자를 설정 하는것으로, 그림자의 위치나 그림자의 퍼짐 정도 및 크기와 흐림의 정도를 정할 수 있다.

2. box-shadow 문법

box-shadow : h-shadow v-shadow blur spread color inset;

• h-shadow 그림자의 수직(X축:상하) 거리
• v-shadow 그림자의 수직(Y축:좌우) 거리
• blur 그림자의 흐림정도
• spread 그림자의 거리
• color 그림자의 색
• inset 그림자를 내부에 적용 ( 맨 앞에 적어도 됨)
• inherit 그림자의 속성 값을 상위요소한테 상속

/* h-shadow | v-shadow | color를 설정한 경우 */
box-shadow: 10px 20px #ccc;

/* h-shadow | v-shadow | blur | color를 설정한 경우 */
box-shadow: 10px 20px 10px #ccc;

/* h-shadow | v-shadow | blur | spread | color를 설정한 경우 */
box-shadow: 10px 20px 10px 10px rgba(0, 0, 0, 0.2);

/* inset | h-shadow | v-shadow | blur | spread | color를 설정한 경우 */
box-shadow: inset 10px 20px 10px 10px rgba(0, 0, 0, 0.2);

/* 두 가지 속성을 설정한 경우 */
box-shadow: 10px 20px #ccc, 10px 10px red;

오늘 이러한 속성을 이용하여 웹사이트 헤더 부분에 그림자 효과를 줄 수 있었다.
또한 단순히 정적인 그림자 뿐 아니라, 그림자가 퍼져서 색이 자연스럽게 변하는 것 까지 가능했는데 아쉽게도 벨로그는 동영상 첨부가 되지 않아서 추후 깃허브에 올려놓고 주소를 첨부하도록 하겠다.

출처: http://triki.net/prgm/3227
https://webzz.tistory.com/420
https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow