Lesson #7 CSS 사용시 반드시 알아야 할것, 명시도

Lesson #7  CSS 사용시 반드시 알아야 할것, 명시도

---

CSS 명시도란 ?

오늘은 명시도에 대해 얘기를 해드리고 싶어요. 

 

CSS 선택자를 내 맘대로 후다닥 가지고 놀면서 작업하려면 명시도에 대한 이해가 필수입니다.  일상 생활에서 사용하는 명시도는 “얼마나 확실하게 잘 보이는가”죠. CSS의 명시도도 비슷합니다. ‘얼마나 확실(구체적)한가”로 이해하시면 되고, 구체적일수록 CSS 중복선언 중에서 ‘우선순위’가 높다고 이해하시면 좋을 것같아요.

 

---

 

명시도를 숫자로 표현하여 알아볼게요.

쉼표로 구분된 4자리가 필요합니다.
0, 0, 0, 0

 

명시도 규칙 4가지

• 요소를 나타내는 자리는 네번째 자리이며 0,0,0,1 입니다.
• 클래스, 가상클래스, 속성을 나타내는 자리는 세번쨰 자리이며 0,0,1,0 입니다.
• Id를 나타내는 것은 두번째 자리이며 0,1,0,0 입니다.
• 인라인 요소 일 때는 첫번째 자리이며 1,0,0,0 입니다.

몇가지 예제를 들어볼게요.

• div ul li : 요소가 3개이므로 0,0,0,3
• div.abcEFG ul li : 클래스 1개와 요소3개. 0,0,1,3
• a:hover : 가상클래스 1개, 요소1개. 0,0,1,1
• div.navb a:hover : 클래스 1개, 가상클래스 1개, 요소 2개. 0,0,2,2
• #navbar em : id 1개, 요소 1개. 0,1,0,1
• h2#navi em : id 1개, 요소 2개. 0,1,0,2

---

명시도의 레벨 이해

명시도 값이 어떻게 만들어 지는지 이해가 좀 되셨을까요? 그런데 숫자 사이에 쉼표는 왜 있을까요? 명시도의 ‘레벨’은 독립적이기 때문에 구분해주는 것이예요.

 

예를들어 클래스 1개와 요소 13개가 있다고 한다면 클래스 1개가 있는 것이 더 우선순위가 높아요. 즉, 명시도가 높다고 표현 할 수 있겠죠.

 

예를 들어 볼게요. A와 B가 있습니다.

A : .classDaeyun : 0,0,1,0 B : Div table tbody tr td div ul li ol li ul li pre : 0,0,0,13

3번째 자리를 비교해면 각 1과 0이죠. 4번째 자리는 각 0, 13 이구요.

B의 13이라는 숫자 때문에 B가 A보다 명시도가 더 높다고 착각 할 수 있지만, 각 자리수의 ‘레벨’은 독립적이기 때문에 4번째 자리의 숫자가 아무리 높아도 3번째 자리의 우선순위가 더 높아요.

그래서 A가 B보다 명시도가 높다고 이해하는 것이 맞습니다.

---

Override, 나중에 선언된것이 적용된다.

오해 할 수 있을만한 예제를 하나 더 들어볼게요.

A : ul li {color:#ff0000;} B : html li {color:#00ff00;}

A와 B가 선언되어있고, 둘다 요소가 2개뿐입니다. 
명시도는 0,0,0,2로 동일하겠죠?

 

그렇다면 폰트 컬러는 레드일까요? 그린일까요? 

흔한 오해 중 하나가 구조상 가깝게 있는 것이 명시도(우선순위)가 더 높다고 착각하실 수가 있습니다. 그렇지만 ‘구조, 위치상 가깝다’는 명시도와 아무런 상관이 없습니다.

명시도는 더도 덜도 아닌 그저 숫자일 뿐이고 문서 구조를 평가하지는 않습니다. 명시도가 똑같을 때는 뒤에 쓴 규칙이 앞의 규칙을 덮어(override)버립니다. 그래서 폰트는 그린색이 되죠.

---

inline Style 인라인 선언이 우선적용

명시도에서 맨 앞, 첫번째 자리는 인라인을 나타낸다고 했습니다.

A : div#header {color:#ff0000;} B : <div id=”header” style=”color:#00ff00;” >

A는 0,1,0,1 이고, B는 1,0,0,0 입니다.

이렇게 같은 id값을 가지고 있더라도 요소에 인라인 스타일이 추가되어있다면, 외부 스타일시트에서 선언된 스타일을 덮어쓰게되어(override) 폰트 컬러는 그린 컬러가 됩니다.

---

!important

이 모든 규칙들을 무시하는 조커가 있습니다. 
바로 !important 입니다.

자, !important는 무조건 1번입니다. 가장 우선순위가 높아요. 열쇠로 치면 슈퍼키, 레벨로 치면 만렙이고. 조커, 슈퍼패스 같은. 무조건 되는 놈. important입니다. 앞에 느낌표(!)가 붙어있다고해서 부정을 뜻하는 연산자의 의미는 절대 아닙니다. 개발자분들 오해하지 마시길 당부드립니다요.

A : ul li {color:#ff0000 !important; B : html li {color:#00ff00;}

아까 사용 했던 예제에 A에 !important를 넣었습니다. 

위에서 폰트 컬러는 그린 컬러가 되었지만, 지금은 레드컬러가 되죠. !important라는 조커가 명시도가 동일하고 가장 나중에 선언된 그린컬러의 속성을 덮어씌어버렸으니까요.(override) 그렇지만 !important는 조심해서 사용해야 합니다. 남용한다면 나쁜습관일 될 수 있습니다.  !important 선언을 또 다른 !important로 덮어쓰고 있을 지도 몰라요. 이렇게 되면 거의 모든 선언에 !important를 써버리면 정말 필요한 순간에 !important쓰는 의미가 없어져버리겠죠.

 

---

정리하지면,
!importnat > Inline Style > id > class > tag

왼쪽이 가장 명시도(우선순위)가 높고

오른쪽이  가장 명시도(우선순위)가 낮습니다.

 

CSS에서 Cascading은 중요한 개념이기 때문에 선택자를 적절하게 사용해서 우선순위를 부여해주는것이 바람직하겠습니다.

 

 

[참고 서적] 에릭마이어의 CSS 노하우 p43 ~ p46

[참고 사이트] developer.mozilla.org/ko/docs/Web/CSS/Specificity

명시도

[참고 사이트] https://www.w3schools.com/css/css_specificity.asp

CSS Specificity