우선순위
캐스케이딩 (Cascading)
하나의 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다.
이 때 충돌을 피하기 위해서 CSS 적용 우선순위가 필요하다.
CSS 우선순위 적용 요소
1. 중요도: CSS가 어디에 선언되어 있는지에 따라서 우선순위가 달라진다.
- 인라인 스타일(HTML 태그 내부에 style 속성으로 사용)
- 내부 스타일 시트(HTML 문서의 style 태그 안에 위치)
- 외부 스타일 시트(CSS 파일을 외부에 따로 만들어서 불러오는 방법)
- 웹 브라우저 기본 스타일
2. 명시도: 명확하게 특정할 수록 우선순위가 높아진다.
- !important
- 인라인 스타일
- 아이디 선택자
- 클래스 선택자
- 태그 선택자
- 전체 선택자
- 상속받은 속성
3. 선언 순서
- 나중에 선언된 스타일이 우선 적용된다.
예시
[HTML]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cascading.css">
<title>스타일 우선순위</title>
<style>
#banana {
font-size: 12px;
}
/*
가까운 곳에 위치한 .apple은
더 멀리있는 div.apple보다
우선순위가 높아보이지만,
div.apple이 더 구체적이기 때문에,
div.apple에 설정한 핑크색이 적용된다.
*/
.apple {
color: red !important;
font-size: 30px;
}
.banana {
color: green;
/* color: green !important; */
}
</style>
</head>
<body>
<p id="banana" class="apple banana" style="color: brown !important;">바나나</p>
<div class="apple">사과</div>
</body>
</html>
[CSS]
div.apple {
color: pink;
font-size: 12px;
}
우선 순위를 간단하게 정리하자면...
[ !important > 인라인 스타일 > 아이디 > 클래스 ] 순서 이므로, style="color: brown !important;" 부분이 1순위가 되며
html 문서 내에 color: red !important; 에서 !important가 없었으면 더 구체적인 CSS 파일내 있는 핑크색으로 됐겠지만
!imporatnt가 붙어있는 빨간색으로 바뀔 것이다.
'프론트엔드' 카테고리의 다른 글
| [CSS] 폰트 (0) | 2024.01.20 |
|---|---|
| [CSS] 상속 (0) | 2024.01.20 |
| HTML form 태그 (0) | 2024.01.19 |
| HTML 디스플레이 (Display) (0) | 2024.01.17 |
| HTML 이미지 태그 (0) | 2024.01.17 |
