11-1. CSS selector
이번 수업은 selector 표현과 우선순위에 대해 조금 더 깊게 배워보는 시간입니다.
아래는 익숙한 css입니다.
p {
font-size: 20px;
}
.pTag {
color:gray;}
#thirdLine {
text-decoration: underline;
}그리고 selector는 class나 id를 태그와 결합하여 작성할 수 있습니다.
p.pTag {
color:gray;}
p#thirdLine {
text-decoration: underline;
}첫 번째는 p 태그이면서 pTag 클래스이다.
두 번째는 p 태그이면서 thirdLine 아이디이다.
라는 뜻입니다.
p#third-line.p-tag 이런 조합도 가능하긴 하지만,
앱 통틀어 third-line라는 아이디는 오직 한 개이므로 위와 같이 tag+id+class의 조합은 과한 표현입니다.
또한 다음과 같이 여러 selector를 함께 사용할 수도 있습니다.
아래 css에서 최종적으로 적용되는 selector는 span입니다.
selector가 서로 붙어있지 않고 스페이스로 띄워있다는 것을 주목해주세요!
.pre span {
background-color:yellow;}그런데 모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻입니다.
아래의 html에서 어떤 span 태그만 위의 css가 적용되는지 아시겠죠?
<div class="pre">
<span>이건 노란색 배경이고</span>
</div>
<div class="main">
<span>이건 아님!</span>
</div>
<span class="pre">이것도 아님</span>
<div>
<p class="pre">
<span>이건 적용됩니다! 노란색배경!</span>
</p>
</div>잘 이해되지 않는다면, index.html에 직접 작성해서 확인해보세요.
엄청 길게도 작성할 수 있습니다.
.a div .b .pre span {
background-color:yellow;}span 태그에 적용되는 css입니다.
그런데 a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그에 적용이 됩니다.
<div class="a">
<div>
<header class="b">
<h1 class="pre">
<span>제목! 노란색 배경 나옴!</span>
<span class="title">이것도 나옴!</span>
</h1>
<span>이건 적용안 됨</span>
</header>
</div>
<span>이건 적용안 됨</span>
</div>
아래의 예제도 한 번 해석해볼까요?
div .container li.firstList
<li>태그인데 "firstList" 클래스인 요소에 css를 적용한다.
그런데 <div>태그 내부의, "container"클래스 내부에 있는 요소에만 적용한다.
라는 뜻입니다.
11-2. CSS Specificity
이제는 selector의 우선순위에 대해 배워보려고 합니다.
style.css에 보면 p 태그와 .pTag 클래스에 모두 font-size 프로퍼티가 있습니다.
p {
font-size: 30px;
}
.pTag {
font-size: 15px;
}index.html에서 보면 .pTag 클래스를 적용한 요소가 p태그이기 때문에 font-size가 중복 적용될 것입니다.
브라우저에서는 30px과 15px 중에서 어떤 값을 적용할까요?
selector 표현마다 우선순위가 있습니다.
이 우선순위는 점수 계산으로 이루어집니다.
- inline styling: 1000점
- id: 100점
- class: 10점
- tag: 1점
인라인 선언 방식은 html 문서 내부에서 style 속성에 직접 스타일을 작성하는 방식입니다.
<p class="pTag">나는 p태그, class가 있다</p>p태그에 적용된 30px은 1점
pTag클래스에 적용된 15px는 10점이므로 15px이 적용된 것입니다.
만약 css에 아래가 추가된다면?
p.pTag {
font-size: 100px;
}1점(p) + 10점(.pTag) = 11점 이기 때문에 해당 요소는 100px이 적용될 것입니다.
css를 작성할 때 이렇게 점수를 계산해가면서 해야될 필요는 없습니다.
거의 대부분의 요소에 class를 부여해주고,
class를 selector로 styling해주기 때문에,
최대한 중복을 피할 수 있도록 작성합니다.
그리고 점수의 gap이 워낙 크기 때문에 아래의 개념정도만 알면 됩니다.
tag <<<<< class <<<< id <<<<<< inline css
11-2-1. !important
!important 를 속성 값 옆에 작성하시면 우선순위가 가장 높게 부여됩니다.
- inline styling: : 1000점
div {
color: red; !important; }인라인 방식으로 작성하게되면 우선순위가 너무 높기 때문에 css에서 !important를 써주지 않는 이상 다른 스타일을 덮을 수 없게 됩니다.
출처 : wecode
