HTML/CSS의 핵심내용정리 1

전역속성

선택자

선택자는 뒤에서 부터 읽는 습관을 들이는 것이 좋습니다. 뒤에서부터 해석을 해야하는 이유를 잘 알 수 있는 적합한 예시로는 :nth-child가 있습니다.

만약 div > div:nth-child(3)과 같은 선택자가 있는 경우 1. 세 번째 자식요소 중에서 2. 그 세번째 자식요소가 div태그이면서 3. 그 세번째 자식요소가 div태그가 div의 자식 요소인 녀석을 찾는 것입니다.

<div>
  <h1>1</h1>
  <span>2</span>
  <p>3</p>
  <div>4</div>
  <div>5</div>
  <div>6</deiv>
</div>

위 html의 구조에서는 세번째 자식 요소가 div이기 때문에 스타일이 적용될 수 있는 대상이 없는 것입니다.

상속자 우선순위(명시도)

  <div
    id="heropy"
    class="heropy"
    style="color:red;">
    123
  </div>

<style>
    #heropy {
      color: blue;
    }

    .heropy {
      color: green;
    }
</style>

위 코드를 적용한다면 123이라는 글자는 어떤 색으로 화면에 출력이 될까요? 이렇게 어떤 스타일이 적용될지를 구분지을 수 있는 것이 바로 상속자 우선순위(명시도) 입니다.

명시도는 아래와 같습니다.

상속자 우선순위