CSS란?
- Cascading Style Sheets
- 서로 다른 원점에서 가져온 속성 여럿을 조합하여 최종 결과를 도출해내는 알고리즘
- 종속되는 것이 가장 큰 핵심
- 우선순위에 따라 스타일이 결정됨
- 캐스캐이딩이 많이 발생되면 성능이 저하된다는 단점이 있음
종류 Style Origin
- User-agent Style Sheet: 브라우저에서 기본 제공하는 스타일 시트로, 각 브라우저마다 제공되는 스타일이 다를 수 있음
- Author Style Sheet: 웹페이지를 만든 개발자가 정의하는 스타일 시트
- User Style Sheet: 사용자가 브라우저의 설정을 사용하여 변경하는 스타일 시트
우선순위
- 소스의 순서가 계단식으로 적용되기 때문에, 스타일이 적용되는 우선순위가 존재함
- 범용 선택자 (
*), 결합자 (+,>,~, ' ') 및 부정 pseudo-class (:not) 는 우선 순위에 영향을 미치지 않음
중요도
- CSS가 어디에 선언되었는지 위치에 따라 우선순위가 달라짐
- 우선순위
1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의@import문
3.<link>로 연결된 CSS 파일
4.<link>로 연결된 CSS 파일 내의@import문
5. User-agent Style Sheet
명시도
- 대상을 명확하게 특정할수록 명시도가 높아짐
- 우선순위
1. !important
2. 인라인 스타일
3. 아이디 선택자
4. 클래스/어트리뷰트/가상 선택자
5. 태그 선택자
6. 전체 선택자
7. 상위 요소에 의해 상속된 속성
선언 순서
- CSS 선언 순서에 따라 우선순위가 달라짐
- 상단에서 하단으로 내려갈수록 우선순위가 높아짐 = 나중에 선언된 것의 우선순위가 더 높음
상속
- 상위(부모, 조상) 요소의 속성을 물려받는 것을 말함
- CSS는 상속되지 않는 속성과 상속되는 속성들이 있음
분류
| 상속 되는 속성 | 상속 되지 않는 속성 |
|---|---|
| fonline-height, white-space, color, text-align, visibility, opacity | position, top/right/bottom/left, z-index, display, width/height, float, padding, margin, text-decoration, vertical-align, background, border, box-sizing, overflow |
상속 제어하기
inherit: 선택한 요소에 적용된 속성값을 부모 요소와 동일하게 적용 = 상위 요소에 상속 받겠다initial: 브라우저의 기본 스타일을 적용unset- 선택한 요소의 기본 상속 속성으로 되돌림
- 상속되는 속성이면 inherit로 적용되고, 그게 아니면 initial로 적용
revert- 선택된 요소의 스타일 속성을 revert가 작성된 위치를 기준으로 다음 우선순위에 작성된 스타일 속성으로 적용
- Style Origin을 따름
- 해당 요소의 스타일이 하나만 정의되었다면 User-agent Style Sheet가, 다음 우선순위로 정의된 스타일이 있다면 그 스타일로 적용
- 적용 순서: Author Style Sheet → User Style Sheet → User-agent Style Sheet
참고
박선우