* CSS 우선순위 - 상속 (<a> 태그에는 color 속성이 상속 X , <a> 태그가 억지로 상속을 받아오기 위해서는 해당 속성에 inherit )
<!--html-->
<div class="div1">
Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>
<div class="div2">
Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>
<!--css-->
.div1 {
color: green;
}
.div2 {
color: orange;
}
.div2 a {
color: inherit;
}
*CSS 우선순위 - 명시도
<!--html-->
<ul>
<li><a id="link" href="#">Link 1</a></li>
<li><a id="link" href="#">Link 1</a></li>
<li><a id="link" href="#">Link 1</a></li>
<li><a id="link" href="#">Link 1</a></li>
</ul>
<!--css-->
ul li:first-child #link {
color: green;
}
ul li:first-child a {
color: orange;
}
* CSS 최적화
↓html
<html>
<head>
<title>프로그래밍 커리큘럼</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="box-one">
<h2>HTML</h2>
</div>
<div class="box-two">
<h2>CSS</h2>
</div>
<div class="box-one">
<h2>JAVASCRIPT</h2>
</div>
<div class="box-two">
<h2>PYTHON</h2>
</div>
<div class="box-one">
<h2>JAVA</h2>
</div>
</div>
</body>
</html>
↓CSS
h2 {
padding: 20px;
font-size: 30px;
}
.box-one h2 {
background: #FA987D;
}
.box-two h2 {
background: #72CCA7;
}
↓실행 결과
* CSS 단위
- px
- rem
- em
- %
+) %가 margin이나 padding의 단위로 사용될 경우, 상위 요소의 width를 기준으로 계산됨
++ ) margin-top이나 padding-bottom 등 세로(상하) 속성를 조절할 때에도 상위 요소의 height가 아닌 width를 기준으로 계산됨