CSS의 경우 사용자가 지정한 레이어의 순서에 따라 스타일이 정해진다. 이러한 우선순위 때문에 원하는 스타일이 적용되지 않는 경우가 있는데, @layer를 사용하면 스타일의 순서를 결정할 수 있다.
- @layer 레이어이름, 레이어이름, ....;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
}
@layer font, bg, bgfont;
@layer bgfont{
#div1{
background-color: lightgreen;
font-size: 4rem;
}
}
@layer bg{
#div1{
background-color: lightblue;
}
}
@layer font{
#div1{
font-size: 1rem;
}
}
</style>
</head>
<body>
<div id="div1">
<p> 반갑습니다. </p>
</div>
</body>
</html>
왼쪽의 경우 @layer을 설정해서 bgfont가 제일 마지막으로 설정되게 했고, 오른쪽의 경우 @layer을 설정하지 않았을 때의 상태(CSS는 위에서 아래로 적용되기 때문에, 배경색은 bg로 설정되고 글씨크기는 font로 설정됨)이다.
'Frontend > CSS' 카테고리의 다른 글
| CSS에서 계산을 해보자 (calc()) (0) | 2024.07.13 |
|---|---|
| CSS의 사용자 지정 속성(CSS Custom properties) 설정하기 (0) | 2024.07.13 |
| CSS의 grid를 함께 공부해보자 - 2. 이름을 사용한 그리드 배치 (0) | 2024.07.13 |
| CSS의 grid를 함께 공부해보자 - 1. 그리드의 기본 (0) | 2024.07.13 |
| CSS에서 수직 위치를 정해보자(z-index) (0) | 2024.07.13 |
| CSS의 flex를 함께 공부해보자 - 2. flex-items (0) | 2024.07.10 |
| CSS의 flex를 함께 공부해보자 - 1. flex-container (0) | 2024.07.10 |
| CSS의 반응형 웹을 위한 미디어쿼리(Media Query) 사용법 (0) | 2024.07.10 |