#3. box-shadow 속성, html 박스에 그림자 속성 넣기

안녕하세용~ 오늘은 box-shadow 속성에 대해서 글을 써보려고 해요.

box-shadow 속성이 무엇이냐!

 

말 그대로 원하는 클래스에 그림자를 넣어줘서

코딩에 입체감을 줄 수 있는 css효과에요!

 

 

box-shadow속성을 준 클래스

이런식으로 공중에 붕~ 떠있는 것 같은 효과를 주는 속성이에요.

자칫 밋밋해보일 수 있는 박스에 살짝 준 효과로 훨씬 보기에 좋아졌어요!

 

box-shadow속성에는 기본적인 문법틀이 있어요.

 

 { box-shadow : x-position   |   y-position   |    blur    |    spread    |    color    }

이게 기본 속성입니다!

 

 

풀어서 설명을 하면?

 

x-position : 가로로 몇 px을 넓힐것인가?

y-position : 세로로 몇 px을 넓힐것인가?

blur : 얼마나 부드럽게 만들것인가?

spread : 얼마나 퍼지게 할 것인가?

color : 그림자 색상

 

이라고 생각하시면 됩니다! 이렇게 글로 설명하는 것 보단 실제 코드를 보는게 훨씬 편하겠죠?

그 전에 그림자에 대한 몇 가지 옵션이 있는데 그 옵션들도 설명을 하자면

 

 

inset : 그림자를 요소의 안 쪽에 넣어주는 속성 [내부그림자]

initial : 기본값으로 설정

inherit : 부모값을 상속받음

 

정도가 있습니다! 자 이제 코드를 살펴볼까용~

See the Pen Untitled by 김윤희 (@rcjfgpmg-the-reactor) on CodePen.

 

 

이렇게 박스들을 살펴보면 위에서 말했던 순서대로 적용이되어있는걸 볼 수 있어요.
inset은 내부그림자 속성으로 이 속성은 문법 맨 앞이나 맨 뒤에 아무데나 넣어주시면 됩니다!

 

이렇게 사소한 꾸미기로 포인트를 넣어주면 홈페이지가 전보다

과하지 않게 꾸며지는걸 볼 수 있어요.

 

 

 

우리 모두 예쁜 홈페이지 만들어요 화이팅!

다음번엔 더 유익하고 쏠쏠한 꿀팁(?)으로 만나요 안녕~~