[HTML&CSS] 캐스케이딩

캐스케이딩 생각보다 중요한듯 생각보다 더 중요한 작업
아직도 우선순위에 대한 이야기이다.

Cascading이란 '위에서 아래로 흐르는', '상속 또는 종속하는'의 의미를 갖고 있습니다. 따라서 Cascading은 선택자에 적용된 많은 스타일 중에 어떤 스타일로 브라우저에 표현할지 결정해주는 원리를 의미하게 됩니다.

1. 나중에 작성한 코드가 우선 순위를 갖는다.

p { color: skyblue; }
p { color: blue; }
/* blue */

이렇게 되면 blue가 출력된다.

2. 더 구체적으로 작성한 코드가 우선 순위를 갖는다.

header h3 { color: blue; }
h3 { color: red; }
/* blue */

무슨 말이냐하면 나중에 작성되었어도 header라는 선순위까지 불러준 그대에게 선택권을 준다.

3. 스타일, 아이디, 클래스, 타입 순으로 우선 순위를 갖는다.

h3 { color: green; }
#color { color: blue; }
/* green */

앞에서 배운 선택자(selector)에 관한 이야기인데 위 예시처럼 h3(type)과 #color(id) 이렇게 되면 id가 우선순위를 가진다.

다시 복습하자면, 스타일의 우선순위는 style > id > class > type 이다. 약육강식🥓

엘리스 AI트랙 1일차 / 실습복습 / 210914