CSS

# Cascading

: 여러 CSS 규칙이 같은 요소에 적용되어 충돌할 때 우선순위를 결정하는 방식

- 어떤 스타일이 최종적으로 적용될지를 결정하는 과정

 

1. !important: 규칙에 !important를 추가하면, 다른 모든 규칙보다 우선적으로 적용된다.

2. 우선 순위 : ID, 클래스, 태그 선택자의 우선순위 점수(Specificity)에 따라 결정된다.

3. 선언 순서: 스타일 시트의 동일한 선택자에서 나중에 작성된 규칙이 우선 적용된다.

 

[ CSS 선택자의 우선순위 ]

1️⃣ 인라인 스타일 (style="") → 1000점
2️⃣ ID 선택자 (#id) → 100점
3️⃣ 클래스, 속성, 가상 클래스 선택자 (.class, [attr=value], a[target="_blank"], a:hover, :pseudo-class) → 10점
4️⃣ 태그 선택자 (div, h1, p) & 가상 요소 (::before, ::after) → 1점
5️⃣ 전체 선택자 (*) 또는 상속된 스타일 → 0점 (우선순위 없음)

 

# 반응형 브레이크 포인트

: 웹 페이지의 레이아웃이나 디자인을 다양한 화면 크기와 디바이스에 맞게 조정하기 위한 기준점을 말합니다. 즉, 화면의 크기나 해상도에 따라 레이아웃이나 스타일을 변경하는 지점을 지정하는 것

 

화면 크기에 따라 다르지만 보통은

모바일 : 0~ 767px

태블릿: 768~ 1023px

데스크탑: 1024px 이상

 

Q. 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?

A. padding을 활용해 가변적인 높이를 설정한다.