JS를 중심으로 프론트엔드 개발을 시작했다보니 CSS는 수시로 구글링하기 바빴다. 휴학 기념으로 Udemy를 수강하며 CSS 한번 톺아보자.

CSS와 우선순위

CSS는 Cascading Style Sheets의 약자로서 웹 페이지의 뼈대가 되는 html의 스타일링 규칙이다. 규칙은 스타일을 주려는 대상과 스타일들을 묶어 표현한다.

대상 {
	스타일 1: 값1;
	스타일 2: 값2;
}

여기서 Cascading이란 다양한 규칙(스타일)들이 하나의 element에 적용될 수 있다는 것을 의미한다. 규칙들 간의 충돌을 방지하기 위해 위해 CSS 내의 스타일링 코드들은 다음과 같은 우선순위를 가진다.

CSS 우선순위 (높은순)

• Inline Styles
• #ID 선택자
• .class 혹은 :pseudo-class 와 [attribute] 선택자
• 일반 태그와 ::pseudo-element 선택자
• 브라우저 기본값
• 부모로부터 상속된 스타일

  font와 같은 일부 속성들은 부모 요소의 속성을 기본적으로 상속받음

++ 같은 우선순위에서는, 더 나중에 명시된 스타일이 더 높은 우선순위를 갖는다.

이외에도 *(전체 선택자)를 사용하기도 하는데, 이는 CSS 파싱하는데에 비효율적이라고 한다. 실제로 나는 폰트 설정 등을 할 때는 이를 많이 사용했는데...앞으로는 콘텐츠가 들어있는 body 태그를 활용하도록 하자..!
 

Combinators(결합자 or 선택자)

인접 선택자 +

동일한 수준에 있는 형제 요소 중 바로 뒤에 오는 요소만 선택한다.

h2 + p {
	color: red;
}

<div>
   <h2>Not applied</h2>
   <p>CSS applied</p>			<!-- 적용 -->
   <h2>Not applied</h2>
   <h3>Not applied</h3>
   <p>Not applied</p>			<!-- h2와 인접해있지 않아 적용 안됨 -->
   <h2>Not applied</h2>
   <p>CSS applied</p>			<!-- 적용 -->
</div>

 

형제 선택자 ~

뒤에 있되, 동일한 수준에 있는 형제 요소 모두 선택한다.

h2 ~ p {
	color: red;
}

<div> 
    <p>Not applied</p>
    <h2>Not applied</h2>
    <p>CSS applied</p>		<!-- 적용 1-->
    <h2>Not applied</h2>
    <h3>Not applied</h3>
    <p>CSS applied</p>		<!-- 적용 2-->
</div>

• 적용 2 와 같은 경우 인접 결합자(+)를 사용했을 경우에는 h2 태그와 p 태그 사이에 h3 태그가 있으므로 글씨가 빨간색으로 바뀌지 않았을 것이다.

   

자식 선택자 >

• 하위의 직계 자식 요소만을 선택할 때 사용한다.

  div > p {
  	color: red;
  }

  <div>
      <div>Not applied</div>
      <p>CSS applied</p>			<!-- 적용 -->
      <div>Not applied</div>
      <article>
  	      <p>Not applied</p>		<!-- 직계 자식 요소가 아니라 적용 안됨 -->
      </article>
      <p>CSS applied</p>			<!-- 적용 -->
  </div>

   

  후손 선택자 (공백)

• 가장 많이 사용하는 형태로 하위의 모든 자식 요소들 중에서 선택한다.

  div p {
    	color: red;
  }

  <div>
      <div>Not applied</div>
      <p>CSS applied</p>			<!-- 적용 -->
      <div>Not applied</div>
      <article>
        <p>CSS applied</p>		<!-- 적용 -->
      </article>
      <p>CSS applied</p>			<!-- 적용 -->
  </div>

 

결합자를 활용할 구체적으로 요소를 명시할 경우 우선순위가 높아진다.

---

스타일이 제대로 적용되지 않는다고 우선순위가 높은 inline styling 방식만을 고집하는 개발자는 되지 말자...꼭 덮어쓰는 방식을 서로 고려하여 코드 작성하기