Cascading Style Sheet.
이름에서 볼 수 있듯이 CSS에서는 Cascading 원리가 가장 중요하게 적용된다.
화면에 보여지는 html 요소는 여러 css 속성이 겹쳐져 만들어지는데 이 겹쳐지는 규칙에 대해 Cascading 원리가 적용된다.
즉 Cascading이란 폭포처럼 위에서 아래로 떨어지는 의미를 가지고 있는데 이는 html 요소가 css style이 어떻게 적용되는지를 보여준다.
합쳐지는 순서에 대해 좀 더 알아보자.
기준과 기본 순서
inline style > 코드 상 순서, 명시성 > user agent (브라우저 기본 스타일)
속성값 뒤에 !important 키워드 사용시 최우선 순위가 된다.
-
코드 상 순서
똑같은 선택자에 대해서 코드 상 아래에 있을수록 우선 순위가 높다. -
명시도
선택자의 id의 개수, 클래스의 개수, 태그의 개수를 반영하여 점수를 매긴다.
적은 범위를 명확하게 가리킬수록 명시도가 높다.
개발자 도구에서 Styles 탭을 확인하여 어떤 우선 순위로 스타일이 적용되고 있는지 확인할 수 있다.
위쪽에 위치할수록 더 우선 순위가 높아 아래 속성을 덮어씌운다.
예상한대로 스타일이 적용이 안된다면 우선 순위가 의도한대로 되지 않아 다른 속성이 덮어 씌우고 있지는 않은지 개발자 도구를 이용해 확인해보자.
Newbie