Dev/HTML, CSS
[css] 여러 개의 css 파일을 링크했을 때 우선순위
bskyvision.com
2024. 7. 11. 05:21
오늘은 여러 개의 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 적용에는 취소선이 있는 것을 우측 개발자 도구에서 확인할 수 있습니다. 가장 마지막에 정의된 스타일이 반영되는 것입니다.