오늘은 여러 개의 css 파일을 링크했을 때 우선순위에 대해 알아보도록 하겠습니다.
여러 개의 css 파일을 링크했을 때 우선순위
일단 테스트를 위해서 3개의 다음과 같은 간단한 css 파일을 만들었습니다. 각각 동일한 클래스에 대해서 background-color의 스타일을 다르게 지정해주고 있습니다. 어떤 것이 적용되는지 함께 확인해보시죠.
style1.css
.bg-color {
background-color: yellow;
height: 100px;
width: 300px;
padding: 20px;
}
style2.css
.bg-color {
background-color: blue;
color: white;
}
style3.css
.bg-color {
background-color: red;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style1.css">
<link rel="stylesheet" href="./css/style2.css">
<link rel="stylesheet" href="./css/style3.css">
</head>
<body>
<div class="bg-color">
안녕하세요. 반갑습니다.
</div>
</body>
</html>
보시는 것처럼 가장 아래 링크된 style3.css의 빨간 배경색이 적용되었습니다. 그리고 style2.css, style1.css의 background-color 적용에는 취소선이 있는 것을 우측 개발자 도구에서 확인할 수 있습니다. 가장 마지막에 정의된 스타일이 반영되는 것입니다.
'Dev > HTML, CSS' 카테고리의 다른 글
| [css] @font-face로 폰트를 등록할 때 굵기별로 지정하는 방법 (0) | 2024.07.04 |
|---|---|
| [css] font-family 속성에 여러 폰트 등록하여 사용하는 경우 (+언어별로 폰트 설정하는 방법) (0) | 2024.07.02 |
| [bootstrap] 콘텐츠 간의 gap을 다루는 gx-*, gy-*, g-* 클래스 (0) | 2024.06.23 |
| [css] input의 글자색, 배경색 바꾸기 (placeholder 포함) (0) | 2023.03.03 |
| [css] html 요소 포스트잇 느낌으로 디자인하기 (2) | 2022.10.30 |
| Local Storage 활용하여 다크모드 지원하는 사이트 만들기 (0) | 2022.09.23 |
| [html] 웹페이지에 이모지 넣는 방법 (0) | 2022.09.02 |
| [css] html 요소 깜빡거리게 만들기 (2) | 2022.09.01 |