κ΄κ³ μ νμ
μ νμ μ’
λ₯ | μ μ | κΈ°νΈ | μμ μ½λ |
μ’
μ μ νμ | κΈ°λ³Έ μ νμμ μΆκ°νμ¬ νΉμ λ²μ λ΄μμ νΉμ ν΄λμ€λ μμ΄λ λ±μΌλ‘ μ ννλ μ νμ | νκ·Έ.ν΄λμ€λͺ
λλ νκ·Έ#μμ΄λ | div.title { color: blue; } |
νμ μ νμ | λΆλͺ¨ μμ λ΄μ μ‘΄μ¬νλ λͺ¨λ νμ μμλ₯Ό μ ν | μ νμ μ νμ | div p { color: gray; } |
μμ μ νμ | λΆλͺ¨ μμμ μ§κ³ μμλ§μ μ ν | λΆλͺ¨ μ νμ > μμ μ νμ | ul > li { color: blue; } |
μΈμ μ νμ | νΉμ μμ λ°λ‘ λ€μμ μμΉν νμ μμλ₯Ό μ ν | μ νμ1 + μ νμ2 | h1 + p { margin-top: 10px; } |
νμ μ νμ | νΉμ μμ μ΄νμ λμ€λ λͺ¨λ νμ μμλ₯Ό μ ν | μ νμ1 ~ μ νμ2 | h1 ~ p { color: orange; } |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>κ΄κ³ μ νμ</title>
<style>
article { border: 3px solid orange; }
aside { border: 3px solid hotpink; margin: 10px; }
/* νμ μ νμ */
/* - ν΄λΉ μμ λ΄λΆμ μλ μμλ₯Ό μ ν */
/* * (μμ) (μμ) : λμ΄μ°κΈ°λ‘ ν κ³μΈ΅μ κ΅¬λΆ */
article section ul {
color: red;
}
/* μμ μ νμ */
/* - λ°λ‘ λ°μ νμ μμλ§μ μ ν */
/* (κΈ°νΈ : > ) */
article > section > ul {
color: blue;
}
/* μΈμ μ νμ */
/* A + B : Aμ μΈμ ν μμ Bλ₯Ό μ ν */
/* - A μμ λ€μ(λ€)μ λμ€λ μμλ§ μΈμ */
h1 + h3 {
color: cornflowerblue;
font-size: 30px;
}
/* νμ μ νμ */
/* A ~ B : κ°μ λΆλͺ¨λ₯Ό κ°λ Aμ νμ μμμΈ Bλ₯Ό μ ν */
article ~ article h2 {
color: white;
background-color: rebeccapurple;
padding: 5px;
}
/* νμ μμμΈ μ νμ~μ€νμΌμ μ©ν μ νμ */
p ~ span {
color: hotpink;
}
</style>
</head>
<body>
<h1>κ΄κ³ μ νμ</h1>
<header>
<!-- .logo{λ‘κ³ } -->
<div class="logo">λ‘κ³ </div>
<!-- ul(li{λ©λ΄$}*2) -->
<ul>
<li>λ©λ΄1</li>
<li>λ©λ΄2</li>
</ul>
</header>
<article>
<h1>μ λͺ©</h1>
<h3>μ€λͺ
</h3>
<section>
<h2>λΆμ λͺ©</h2>
<!-- ul>(li{리μ€νΈ $})*3 -->
<ul>
<li>리μ€νΈ 1</li>
<li>리μ€νΈ 2</li>
<li>리μ€νΈ 3</li>
</ul>
</section>
<!-- aside>(h2{μ¬μ΄λλ° μ λͺ©}+h3{μ€λͺ
}+section>(ul>(li{μ¬μ΄λ λ©λ΄ $})*3)) -->
<aside>
<h2>μ¬μ΄λλ° μ λͺ©</h2>
<h3>μ€λͺ
</h3>
<section>
<ul>
<li>μ¬μ΄λ λ©λ΄ 1</li>
<li>μ¬μ΄λ λ©λ΄ 2</li>
<li>μ¬μ΄λ λ©λ΄ 3</li>
</ul>
</section>
</aside>
</article>
<article>
<h1>μ λͺ©1</h1>
<h2>μμ λͺ©1</h2>
<section>λ΄μ©1</section>
<h2>μμ λͺ©2</h2>
<section>λ΄μ©2</section>
<h2>μμ λͺ©3</h2>
<section>λ΄μ©3</section>
<p>p - νμ μ맀 μμ</p>
<span>span - νμ¬ μ맀 μμ</span>
<p>p - νμ μ맀 μμ</p>
<span>span - νμ¬ μ맀 μμ</span>
<p>p - νμ μ맀 μμ</p>
<span>span - νμ¬ μ맀 μμ</span>
</article>
<article>
<h2>article ~ article(λ€μλ§ μ μ©)</h2>
</article>
<div style="height: 500px;"></div>
</body>
</html>
HTML
볡μ¬