https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks
Test your skills: The Cascade - Learn web development | MDN
The aim of this skill test is to assess whether you understand universal property values for controlling inheritance in CSS.
developer.mozilla.org
Task 1
CSS의 우선 순위 문제이다. mozilia에서는 우선순위를 점수를 매겨서 사용한다. 점수가 높으면 높을수록 상속의 우선순위가 높아지고 (그러니까 점수가 높은 애가 채택된다는 의미이다.) 스타일이 적용될 가능성이 높아진다.
또한 상속과 관련해서 inherit, initial, unset 값을 가질 수 있다.
말이 너무 어렵다.
첫 번째로 CSS는 같은 태그에 여러 개의 스타일을 적용할 수 있다.
가령 class가 my-h1이고 id가 me인 h1 태그가 있다고 하자. 그렇다면 우리는 class, id, h1, body, html, *등 여러 선택자를 이용하여 그 태그를 꾸밀 수 있다. 이처럼 여러 스타일이 중복될 때 무엇을 선택해서 꾸밀지가 우선 선택 문제이다.
두 번째로 같은 위치에 중복된 스타일이 있는 경우 중요한 순서대로 적용된다.
이 때 점수로 우선 순위를 판단한다. (위에서 말한 내용)
쉽게 설명하자면 "인라인(html 태그 안) > id > class, 속성 > 태그(wrapper)"이다.
각각 1000, 100, 10, 1점을 준다.
a { color : red; } 와 a[href="https://www.aster-code.tistory.com"] { color : blue;}를 비교해보자.
앞은 태그이므로 1점 뒤는 속성 태그이므로 10 + 1 = 11점이다. 무조건 뒤의 코드가 실행된다.
마지막으로 상속은 여러 종류가 있다.
예를 들어 <html><body></body></html> 이런 코드가 있다면 body는 당연히 html의 스타일 요소를 상속 받는다. (width, height, margin 등 상식적으로 상속받으면 안되는 요소 제외.) 이 때 상속의 대상을 브라우저의 기본 값인지, 그리고 웹 개발자가 만든 사이트의 값인지 혹은 자동인지 선택할 수 있다. 이를 각각 initial, inherit, unset이다.
따라서 나는 initial을 사용해서 이 문제를 해결했다.
cascade-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Cascade Task</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
#outer div ul .nav a {
background-color: yellow;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
div div li a {
color: rebeccapurple;
}
/* 우선순위 + 상속 */
#outer #inner ul :first-child {
background-color: initial;
}
</style>
</head>
<body>
<div id="outer" class="container">
<div id="inner" class="container">
<ul>
<li class="nav">
<a href="#">One</a>
</li>
<li class="nav">
<a href="#">Two</a>
</li>
</ul>
</div>
</div>
</body>
</html>
이전과
이후의 결과다
Task 2
@layer문제이다.
사이트에서는
충돌 선언은 다음 순서로 적용되며, 이후 선언은 이전 선언보다 우선합니다.
- 사용자 에이전트 스타일 시트의 선언 (예: 다른 스타일이 설정되지 않은 경우 사용되는 브라우저의 기본 스타일).
- 사용자 스타일 시트의 일반 선언 (사용자가 설정한 사용자 정의 스타일).
- 작성자 스타일 시트의 일반적인 선언 (웹 개발자가 설정한 스타일).
- 작성자 스타일 목록에서 중요한 선언
- 사용자 스타일 시트의 중요한 선언
이렇게 나와있다. 매우 어렵다.
간단하게 설명하면 좀 더 구체적일수록 중요도가 높다. 그렇지만 !important는 정확히 반대다.
흠 그래도 어렵다.
개념을 이해하려면 그냥 기본 테마 < 내가 사용한 테마 이렇게 외우고 중요한 선언 그러니까 !important가 붙은 코드는 반대이다. 이렇게 외우는 게 낫겠다.
이 문제에서는 layer를 yellow, purple, green으로 선언해 버렸다. 그러니까 중요도는 yellow < purple < green이다.
그렇다면 중요한 선언 기준으로 중요도는 반대다. yellow !important > purple !important < greeen !important
이를 이용해서 그저 내가 바꾸고자 하는 구문에 !important를 추가해줬다.
코드는 다음과 같다.
cascadelayer-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Cascade Layer Task</title>
<style>
@layer yellow, purple, green;
@layer yellow {
#outer div ul .nav a {
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
}
@layer purple {
div div li a {
color: rebeccapurple !important; /* 이 부분을 바꿨다. */
}
}
@layer green {
a {
color: lightgreen;
}
}
</style>
</head>
<body>
<div id="outer" class="container">
<div id="inner" class="container">
<ul>
<li class="nav">
<a href="#">One</a>
</li>
<li class="nav">
<a href="#">Two</a>
</li>
</ul>
</div>
</div>
</body>
</html>
이전
이후
오류 있으면 댓글로 남겨주세요! 감사합니다!
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS] 과제: 기초적인 CSS 이해 (0) | 2024.10.18 |
|---|---|
| [CSS] 과제: 값과 단위 (4) | 2024.10.18 |
| [CSS]과제: 선택자 (3) | 2024.10.16 |
| [CSS]과제: 새로운 지식을 사용하기 (8) | 2024.10.15 |
| [HTML] 과제: 행성 데이터 구조화 (2) | 2024.10.15 |
