이번 시간에는 CSS 우선순위에 대해 알아보겠습니다.
웹사이트 제작하다보면 하나의 태그에 여러 가지의 CSS가 적용될 때가 있습니다. 이 때 특정한 규칙에 따라 CSS에 우선 순위가 부여되어 적용됩니다. 이 규칙을 CSS 우선 순위라고 합니다.
외울 규칙은 다음과 같습니다.
- 기본적으로 뒤에 나오는 css가 우선순위가 높습니다.
- !important > inline style attribute > id > class, 다른 attribute, 수도클래스(:first-child같은 것) > tag element, 수도엘레먼트(::before같은 것) 순으로 우선순위가 높습니다.
- 우선순위가 같다면 개수가 많은 css가 우선순위가 높습니다.
!important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많습니다. !important는 css 값 뒤에 붙여진 키워드를 의미하고, 인라인 스타일 속성은 태그에 주어진 style 속성 내용을 가리킵니다. 이 두 가지는 최후의 수단이라고 생각하시면 좋습니다. 따라서 나머지 id, class, tag만 살펴보도록 하겠습니다.
순위 산출 방식은 올림픽의 금은동 메달이라고 생각하시면 됩니다. id가 금메달, class같은 기타 속성이 은메달, 태그 이름이 동메달입니다. 올림픽에서는 금메달 1개가 은메달 100개보다 우선순위가 높습니다. (한국식 순위 산출 방법입니다.) id 선택자에 css가 붙어있으면 class 여러 개에 css가 붙어있어도 id 선택자가 먼저 적용됩니다.
우선순위가 같다면 개수로 순위가 정해집니다(메달 개수라고 생각하시면 됩니다). class 하나에 달린 css보다 class 두 개에 달린 css 우선 순위가 더 높습니다.
개수마저 같다면 뒤에 나오는 것이 순위가 높습니다. CSS 이름 자체가 Cascading Style Sheet입니다. 이름대로 뒤에 나오는 CSS가 앞에 나오는 CSS를 덮어씌웁니다.
예제를 하나 살펴보겠습니다.
1번째 규칙대로라면 가장 마지막에 나오는 div 태그가 적용됩니다. 하지만 div는 동메달이기 때문에 더 우선순위가 높은 것들이 있는지 찾아보아야 합니다.
이제 2번 규칙을 살펴봅니다. !important와 인라인css가 있는지 찾아봅니다. text-decoration: line-through !important; 규칙이 !important로 되어 있고, background: yellow;가 인라인 css로 되어 있습니다. 이 둘은 다른 무엇보다 먼저 적용됩니다.
이제 id를 찾아봅니다. #i에 붙은 css가 적용되는데요. display 속성이 두 개가 있습니다. 이럴 때는 나중에 나온 display: inline-block;이 우선 순위를 가집니다. background 속성은 인라인 css가 우선 순위를 가지기 때문에 적용되지 않습니다.
그 다음은 class 등의 속성입니다. 보면 class뿐만 아니라 name 속성도 css가 적용되어 있습니다. 이때는 뒤에 나온 [name=d]가 우선순위를 가지지만, 주의하셔야 할 점이 .a.b가 은메달이 두 개입니다. 따라서 얘네의 color: blue;가 우선순위를 가집니다. 이제 남은 것은 [name=d]의 font-style: italic;입니다.
css 우선 순위를 파악하여 기존의 css를 덮어씌울 수 있습니다. css간 충돌이 발생한다면 우선순위를 조정하면 되겠죠? 저 규칙만 외우면 됩니다.
다음 시간에는 z-index에 대해서 알아보겠습니다!
익명
