스타일의 우선순위는 다음과 같이 먼저 사용자와 제작자 그리고 중요 스타일인지 일반 스타일인지에 따라서 결정됩니다. (1이 가장 중요한 순서, 5가 가장 낮음)
1. 사용자 스타일 시트, 중요
2. 제작자 스타일 시트, 중요
3. 제작자 스타일 시트, 일반
4. 사용자 스타일 시트 일반
5. 브라우저 스타일 시트
css 우선 순위가 점수를 통해 정해진다는 사실을 알게됨.
https://engkimbs.tistory.com/913
1. 속성 값 뒤에 !import 를 붙인 속성
2.HTML 에서 style을 직접 지정한 속성
3. #id 로 지정한 속성
4. .class , :추상클래스로 지정한 속성
5. 태그이름을 지정한 속성
6. 상위 객체에 의해 상속된 속성
ex)
!import
우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 됩니다.
!important 는 우선순위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알리는 뜻을 나타내기도 합니다.
css 파일
.compulsion{ color: black !important }
html 파일
<html>
<head>
<style>
#my-box .text{ color: black }
.black{ color: red }
.important-black{ color: red !important }
</style>
</head>
<body>
<div id="my-box">
<div class="text">My text 1</div>
<div class="text black">My text 2</div>
<div class="text important-black">My text 3</div>
</div>
</body>
</html>
| 참고자료 (References)
'IT 공부 > html,css' 카테고리의 다른 글
| G.R.I.D 정리 (css grid) (0) | 2023.01.13 |
|---|---|
| F.L.E.X 정리 (css flex) (0) | 2023.01.11 |
| 성배(Holy grail) 레이아웃 (0) | 2023.01.11 |
댓글