Naver BoostCourse Full-Stack Developer Course
Part 01 웹 프로그래밍 기초
13. 상속과 우선순위 결정
※ Intro
- CSS 의 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재함
- 상속은 대표적인 CSS 적용 규칙. 중복된 속성을 매번 적용해야 하는 일을 줄일 수 있음
※ 학습 목표
1. CSS 상속의 특징. 상속이 되지 않는 상황 이해
※ 핵심 개념
- CSS 상속
- 선택자 우선순위 (CSS Specificity)
※ 상속과 우선순위 결정 1
- 상위에서 적용한 스타일은 하위에도 반영됨 => 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됨
- 하지만 모든 CSS 속성이 이런 특징을 갖게 되면 몇 가지 문제가 생김
- 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있음.
- 그래서 box-model 이라고 불리는 속성들 (width, height, margin, padding, border) 과 같이 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않음
- 이렇게 CSS 는 꽤 똑똑한 방식으로 동작함
※ 상속과 우선순위 결정 2
- inline > internal > external 의 우선순위를 가짐. 일반적인 CSS 위치는 css 파일(external)을 두고 그 아래 style 태그를 사용해서(internal 방식) 표현하기 때문에 그런 경우 위에 나온 우선 순위가 맞음.
- 하지만 internal 과 external은 같은 우선순위를 가짐
<head> <style> div {color:red;} </style> <link rel="stylesheet" href="css.css"> </head> |
- 만약 css.css 에서 div color를 blue로 주었다면 뒤에 선언된 external 방식의 css 내용이 반영됨 => blue 색깔이 나옴
- 즉 internal 과 external은 같은 우선순위로 결정됨
- CSS 는 여러가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영됨
<div id="a" class="b"> text..... </div> |
#a { color : red; } .b { color : blue; } div { color : green; } |
- 위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가짐
- id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선됨. 즉 위 코드에서는 id인 a의 색상이 적용됨
- CSS의 이런 성질을 캐스캐이딩이라고 함
※ 선언 방식에 따른 차이
1. 같은 선택자 (selector)라면 나중에 선언한 것이 반영됨
2. 선택자의 표현이 구체적인 것이 있다면 먼저 적용됨
body > span (O)
span (X)
3. ID > CLASS > ELEMENT 순으로 반영
'Etc > Naver Boost Course Web' 카테고리의 다른 글
| Part 01_웹 프로그램 언어의 기초_16 (0) | 2018.10.10 |
|---|---|
| Part 01 웹 프로그램 언어의 기초_15 (0) | 2018.09.04 |
| Part 01 웹 프로그램 언어의 기초_13 (0) | 2018.08.26 |
| Part 01 웹 프로그램 언어의 기초_12 (0) | 2018.08.22 |
| Part01 웹 프로그램 언어의 기초_11 (0) | 2018.08.17 |
댓글