728x90
반응형
CSS 적용 우선순위는 웹 페이지의 스타일을 결정하는데 중요한 역할을 합니다. 이 글에서는 CSS 적용 우선순위를 설명하겠습니다.
1순위. Importance(중요도) :
!important 키워드가 적용된 스타일은 다른 모든 스타일보다 우선시됩니다.
2순위. 명시도(Specificity) :
선택자의 특정성에 따라 우선순위가 결정됩니다. 선택자가 더 구체적일수록 우선시됩니다. 예를 들어, 아이디 선택자(#example)가 클래스 선택자(.example)보다 더 구체적입니다.
3순위. 순서(Origin) :
스타일 규칙이 선언된 순서에 따라서도 우선순위가 결정됩니다. 나중에 선언된 스타일이 이전에 선언된 스타일을 덮어씁니다.
따라서, 뒤에 나오는 css가 우선순위가 높습니다.
4순위. 상속(Inheritance) :
마지막으로 상위 객체에 의해 상속된 속성이 적용됩니다
하위 요소가 상위 요소로부터 스타일을 상속받을 수 있지만,
직접 스타일이 지정된 속성은 상속된 속성보다 우선시됩니다.
요약하자면 CSS 적용 우선순위는 다음과 같은 순서로 결정됩니다:,
1. 속성 값 뒤에 !important 를 붙인 속성
2. HTML에서 style을 직접 지정한 속성(inline방식)
3. 아이디(#id)로 지정한 속성
4. 클래스(.class), 가상선택자(:pseudo) 로 지정한 속성
5. HTML 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성
이렇게 CSS 적용 우선순위를 이해하고 적절하게 활용하면, 웹 페이지의 스타일을 효과적으로 제어할 수 있습니다.
728x90
반응형
'코딩일기' 카테고리의 다른 글
| 이미지 스프라이트(Image Sprite), 쉽게 스프라이트 이미지 만들기 (0) | 2024.02.02 |
|---|---|
| 반응형 페이지 만들기 - 뷰포트(Viewport)와 미디어쿼리(Media Query) (0) | 2024.02.01 |
| 웹/앱 디자인 시 알아야 할 단위 : px,dp,pt (0) | 2024.01.17 |
| 렌더링(Rendering)방식 이해하기 : CSR, SSR, SSG, ISR (0) | 2024.01.15 |
| 웹표준, 웹접근성, 웹호환성 비교 : 공통점과 차이점 (0) | 2024.01.12 |