💾구분자(Selector)

CSS에서 태그 또는 class,id 등에 스타일을 적용하고자 할 때, 구분자를 사용해야함!

p{
	font-size: 30px;
}

이렇게 작성하면 p 태그 요소의 글씨 크기를 30px로 적용하겠다는 뜻!

그런데 p 태그가 html 문서 내에 하나만 쓰진 않을건데 따로 주고 싶으면 어떻게 해?

이런 경우 class 또는 id를 활용해서 같이 쓸 수 있음

<p class=fir-p> 안돼요 끝나버린 노래를 다시 부를순 없어요 </p>
<p id=sec-p> 모두가 그렇게 바라고 있다 해도 </p>

p.fir-p {
	font-size = 10px;
}
p#sec-p {
	font-size = 20px;
}

*복습) class는 구분자 앞에 dot(.) / id는 구분자 앞에 sharp(#)을 쓴다.

<div class="pre">
  <span>이건 노란색 배경이고</span>
</div>
<div class="main">
  <span>이건 아님!</span>
</div>
<span class="pre">이것도 아님</span>
<div>
  <p class="pre">
    <span>이건 적용됩니다! 노란색배경!</span>
  </p>
</div>

.pre span {
	background-color: yellow;
}

⬆ 스타일을 적용하려는 태그 위에 상위 클래스가 있다면 이렇게 적용시키면 됨.

<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

.a div .b .pre span {
	background-color : yellow;
}

⬆이렇게 사용할 수도 있음.

div .container li.first

⬆인간어로 해석 : div 태그 내부의 container 클래스 내부의 li 태그 중 class가 first인 요소가 적용대상.

*tag .class vs tag.class 차이점 이해하기

💾구분자 우선순위

<p>나는 p태그</p>
<p class="pTag">나는 p태그, class가 있다</p>

p {
	font-size: 15px;
{
pTag {
	font-size: 30px;
}
p.pTag {
	font-size: 45px;
}

🤔 p 태그와 pTag 클래스 간의 font-size가 다르다면 p 태그의 pTag 클래스 요소는 어떻게 적용될까?

우선순위는 점수 계산식에 따라 적용된다.

• inline styling(13줄에 style 요소로 직접): 1000점
• id: 100점
• class: 10점
• tag: 1점

따라서 p 구분자는 1점, pTag 구분자는 10점, p.pTag 구분자는 11점으로 계산되어 45px로 적용된다.

보통은 계산할 필요 없이 중복을 피할 수 있게 styling 하기 때문에
tag < class < id < inline 순으로 우선순위가 크다는 것만 기억하자.