Coding Diary.

(CSS코딩일기) 캐스케이드, 명시도, 상속 본문

Coding/HTML&CSS

(CSS코딩일기) 캐스케이드, 명시도, 상속

life-of-nomad 2023. 3. 21. 05:49
728x90
반응형

1. 캐스케이드(Cascade)

최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는걸 말합니다. 한국어로는 "종속"이라고 번역하기도 합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.

 

2. 스타일 시트의 종류

브라우저에서 기본적으로 제공하는 스타일시트(Use Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다. 예를 들어서 브라우저 기본 CSS에서 아래처럼 쓰고 있다고 가정해 봅시다.

h2 {
 display: block;
 font-size : 1.5em;
...
 font-weight : bold;
}

이때, 우리가 style.css 파일에서 아래처럼 쓰면, 우리가 작성한 스타일시트(Author Stylesheet)의 우선순위가 더 높기 때문에 글자 크기는 2em 이 됩니다.

h2 {
  font-size: 2em;
}

 

3. 코드 상의 순서

코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높습니다. 예를 들어서 아래 코드에서 글자 크기는 2em이 됩니다.

<span class="address">강원특별자치도 춘천시 중앙로 1</span>
 .address {
  font-size: 1em;
}

.address {
  font-size: 2em;
}

 

4. 명시도

선택자마다 명시도 점수가 있습니다. 간단히 말해서 아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교합니다. 예를 들어서 아래 코드에서 a.order는 0 1 1 이지만 a#info는 1 0 1 이기 때문에 명시도는 a#info가 더 높습니다.

a.order { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
...
}
a#info{ /* 아이디 1, 클래스 0, 태그 1 = 명시도 1 0 1 */
...
}

5. 상속

부모 태그에 적용된 CSS 규칙은 자손에게도 상속이 됩니다. 모든 속성이 상속이 되는건 아니고 상속되는 속성들이 정해져 있습니다.

1) 상속된 속성의 우선순위

조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따집니다. 가까운 조상에게 물려받은 속성일수록 우선순위가 높습니다. 예를 들어서 아래 코드에서 a.order 태그 ( .order 클래스가 있는 <a> 태그)에 적용되는 글자색은 #cccccc 입니다.

<body>
  <div id="info">
    <p class="description">
      ... <a class="order" ...>주문</a>
    </p>
  </div>
</body>
 body {
  color: #000000;
}
#info {
  color: #aaaaaa;
}
.description {
  color: #bbbbbb;
}
.order {
color: #cccccc;
}

2) 상속되는 속성들

대표적으로 color, font-family, font-size, font-weight, line-height, text-align이 상속됩니다. 

728x90
반응형
저작자표시

'Coding > HTML&CSS' 카테고리의 다른 글

(HTML코딩일기) 링크의 상대 주소, URI 프래그먼트, target 속성  (0) 2023.08.24
(HTML코딩일기) 다양한 링크 동작 넣기  (0) 2023.08.24
(CSS코딩일기) 선택자, 자식 결합자, 자손 결합자, 가상 클래스  (0) 2023.03.16
(CSS코딩일기) 블록과 인라인, 인라인 블록, float 속성  (1) 2023.03.09
(CSS코딩일기) 박스모델 Box model  (0) 2023.03.07
'Coding/HTML&CSS' Related Articles more