CSS의 Cascading

이진우·2023년 12월 31일
0

코드잇 프론트엔드

목록 보기
1/11
post-thumbnail

Cascading이란 사전적인 의미로 종속, 작은 폭포를 의미합니다.
CSS에서 Cascading이 왜 중요한지 알아봅시다.


CSS와 Cascading

CSSCascading Style Sheet의 약어입니다.
그만큼 CSS와 Cascading은 떼어놓을 수 없는 관계라는 것을 알 수 있습니다.

CSS를 작성하다보면 상속되거나 중첩되는 상황이 많이 나오게 되는데 이때 2가지 원칙에 따라서 어떤 스타일을 적용할지 결정됩니다.

  1. 스타일 우선순위
  2. 스타일 상속

스타일 우선순위

스타일 우선순위는 크게 3가지로 분류됩니다.
1. 중요도
2. 명시도
3. 코드 순서

중요도

스타일을 선언한 사람에 따라 우선순위를 높이는것을 말합니다.

1순위: 사용자가 만든 스타일 시트
2순위: 제작사가 만든 !important 스타일
3순위: 제작자가 만든 일반 스타일
4순위: 브라우저 기본 스타일시트 (User Agent StyleSheet)

명시도

셀렉터가 가리키는것이 명확할수록 우선순위를 높이는것을 말합니다.

1순위: 인라인 스타일
2순위: ID스타일
3순위: Class 스타일
4순위: Tag 스타일
CSS 명시도 계산기

코드순서

맨 마지막에 선언한 CSS일 수록 우선순위를 더 높게 주는것을 말합니다.


스타일 상속

<div id="부모">
	<div id ="자식"></div>
</div>

스타일 상속은 부모태그의 스타일이 자식태그에도 적용되는 현상을 말합니다.
부모태그와 자식태그는 위의 코드를 참고하면 됩니다.

profile
츄라이츄라이

0개의 댓글