[HTML/CSS] CSS Cascading

📝 CSS(Cascading Style Sheet)

CSS는 HTML, XHTML, XML 등의 문서를 꾸밀 때 사용하는 스타일 시트이다.

HTML 파일로 문서를 만들면 CSS는 HTML 파일 요소에 위치, 크기, 글꼴 등을 꾸미는 역할을 한다.

🌊 CSS Cascading

Cascading이란 위에서 아래로 떨어지는 것을 의미하며 이는 상속 또는 종속을 의미한다.

이는 어떤 스타일이 어떻게 적용되는지를 스타일 우선순위와 스타일 상속이 결정한다.

스타일 우선순위는 총 3가지 단계로 결정되며 중요도, 명시도, 코드 작성 순서가 있다.

❗ 중요도(Importance)

1) 브라우저 기본 스타일

각 브라우저는 기본 스타일을 가지고 있다. 각기 다른 브라우저는 같은 스타일로 다른 웹 페이지를 일관성 있는 스타일로 보여준다.

2) 작성자 스타일 시트(CSS 파일)

웹 개발자 또는 작성자가 작성한 스타일 시트이다. 이는 웹 페이지의 디자인을 결정한다.

3) 사용자 스타일 시트(웹 테마)

사용자가 브라우저 설정에서 직접 설정하는 스타일 시트이다. 예를 들어 웹 브라우저에서 테마를 바꿔서 적용하는 것으로 사용자가 직접 스타일을 변경할 수 있다.

우선 순위
브라우저 기본 스타일 > 작성자 스타일 시트 > 사용자 스타일 시트

하지만 !important를 스타일 시트에서 선언하면 중요도를 높일 수 있다.

🔍 명시도(Specificity)

CSS는 선택자에 따라 우선 순위를 결정한다.

선택자의 명시도가 구체적일 수록 높은 우선 순위를 가진다.

👑 우선 순위 랭킹

1) !important(우선 순위 점수: ∞)

2) inline style(우선 순위 점수: 1000점)

• HTML 요소 내에서 선언된 스타일을 의미한다.

3) id(우선 순위 점수: 100점)

• HTML 요소의 property id를 의미한다.

4) class(우선 순위 점수: 10점)

• HTML 요소의 property class를 의미한다.

5) 요소 태그(우선 순위 점수: 1점)

• HTML 요소를 나타내는 태그는 광범위하기 때문에 점수가 낮다.

6) *(전체 선택자), :not(부정 선택자)(우선 순위 점수: 1점)

🎢 코드 작성 순서

CSS는 코드 작성 순서에 따라 우선 순위가 결정된다.

	h1 {
     	font-color: red; //h1 태그의 폰트 색상을 red로 설정
    }
	h1 {
     	font-color: blue; //h1 태그의 폰트 색상 red를 blue로 덮어쓴다.
    }

앞서 작성된 코드는 나중에 작성한 스타일이 덮어쓰는 형태로 적용된다.

🔗 스타일 상속

부모 요소의 스타일을 자식 요소가 스타일을 따라간다.

	.title {
     	font-color: red; //class 이름 title 폰트 색상을 red로 설정
    }
	.title a {
     	font-color: inherit; //부모 title 클래스 색상을 상속 받아 사용
    }