css - !important, box-shadow 에 대해 알아보자

이번의 목표

01. !importnat에 대해 알아보자

02. box-shadow에 대해 알아보자

---

01. !important에 대해 알아보자

!important 는 해당 요소의 스타일을 지정할때 사용하며 !important가 붙은 스타일은 다른 스타일보다 우선적으로 적용이 되기 때문에 이후에 다른 스타일이 적용된다 하더라도 내가 원하는 스타일로 고정시킬 수 있습니다.

코드 예시는 아래와 같습니다.

*{
  color:blue !important;
}

See the Pen Untitled by MeowMeowPuppy (@MeowMeowPuppy) on CodePen.

02. box-shadow에 대해 알아보자

box-shadow는 이름처럼 요소에 그림자를 넣어줄 수 있습니다.

boxShadow = x축 - y축 - 불투명도 - 그림자크기 - 옵션(inset, initial, inherit)

여기서 옵션에 해당하는 값에 대해 알아보겠습니다.

inset : 그림자가 요소의 안쪽으로 생깁니다.
initial : 그림자가 요소의 바깥으로 생깁니다. (디폴트)
inherit : 부모 객체를 상속

 

See the Pen Untitled by MeowMeowPuppy (@MeowMeowPuppy) on CodePen.