✍🏻 캐스케이딩의 의미와 역할
CSS는 '캐스케이딩 스타일 시트(cascading style sheets)'의 약자로
흔히 말하는 스타일시트와 CSS는 조금 차이가 있다.
📖 캐스케이딩의 의미
캐스케이딩은 스타일 시트에서 우선순위가 계단식으로 적용된다는 의미로 사용된다.
따라서 CSS는 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이다.스타일이 충돌하지 않도록 하는 방법 2가지
- 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위 결정(위에서 아래로 결정)
- 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 결정(위에서 아래로 전달)
📌 스타일 우선순위
❓ 얼마나 중요한가?
스타일에는 (사용자 스타일, 제작자 스타일, 웹브라우저 스타일) 3가지 스타일을 사용한다.
- 적용 순서 : 사용자 스타일 -> 제작자 스타일 -> 웹 브라우저 스타일
예를 들어 브라우저의 배경이 흰색(웹 브라우저 스타일) 으로 지정되어 있다.
하지만 제작자가 배경을 파란색으로 지정(제작자 스타일) 하면 브라우저에서 파란색으로 표시된다.
그런데 어떤 사용자가 윈도우의 고대비 모드를 설정하여 배경을 검은색으로 지정(사용자 스타일) 하면 검은색으로 표시된다.
❓ 적용 범위는 어디까지인가?
중요도가 같은 스타일이라면 적용 범위에 따라 우선순위를 정할 수 있다.
1. !important : 속성값을 지정할 때 같이 지정하여 사용h1 { color: red !important; }
- 인라인 스타일 : 태그 안에 style 속성을 사용
<h1 style="color: blue;">제목</h1>
- id 스타일 : id 속성을 사용하여 스타일 지정
#container { color: black; }
- 클래스 스타일 : class 속성을 사용하여 스타일 지정
.title { color: aqua; }
- 타입 스타일 : 특정 태그에 스타일을 지정
h1 { color: green; }
❓ 소스 코드의 작성 순서는 어떠한가?
중요도와 적용 범위가 같다면 다음은 스타일을 정의한 소스 코드의 순서로 우선순위가 결정된다.
따라서 먼저 작성한 스타일이 있어도 나중에 작성한 스타일이 이를 덮어 나중에 작성한 스타일이 적용된다.p { color: red; } h1 { color: black; } p { color: blue; } /* 나중에 작성된 p 타입 스타일이 적용된다.*/
📌 스타일 상속
웹 문서에서 사용하는 여러 태그는 포함 관계가 있다.
이 때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다.
스타일 시트에서 자식 요소에 별도로 스타일을 지정하지 않으면 부모 요소의 스타일이 자식 요소로 전달된다.<body style="color: blue;"> <h1>제목</h1> <p>본문</p> </body>h1과 p 태그에 스타일을 따로 지정하지 않아도 부모 요소의 스타일을 상속받아 글자색이 파란색으로 표시된다.
