λ€μ΄κ°κΈ°
μ νμ μ€μλ λ¬Έμμ ꡬ쑰λ₯Ό μ΄μ©νμ¬ μμλ₯Ό μ ννλ μ νμλ μλ€.
- μ‘°ν©μ ( κ²°μ μ )
: λ¬Έλ§₯μ΄λ μμμ ꡬ쑰λ₯Ό κΈ°λ°μΌλ‘ νμ¬ μ νμλ₯Ό μ‘°ν©νλ κ²
μ΄ μ‘°ν©μλ₯Ό μ΄μ©νλ©΄ λ¬Έμ ꡬ쑰λ₯Ό μ΄μ©ν΄ μ’ λ μ μ°νκ² μμλ₯Ό μ ννκ³ μ€νμΌμ μ μ©ν μ μλ€.
π λ¬Έμ ꡬ쑰μ μ΄ν΄
μ νμμ λ¬Έμμ κ΄κ³λ₯Ό μ΄ν΄ν΄λ³΄μ
<html>
<body>
<div>
<h1><span>HTML</span>:Hyper Text Markup Language</h1>
</div>
<p>HTMLκ³Ό CSSμ JAVASCRIPTλ₯Ό μ΄μ©ν΄μ μΉ μ¬μ΄νΈλ₯Ό μ μν μ μλ€.</P>
</body>
</html>μ μ½λλ₯Ό λ°νμΌλ‘
1. λΆλͺ¨μ μμ, 2. μ‘°μκ³Ό μμ, 3. νμ μ κ΄κ³λ₯Ό μμλ³΄κ² λ€.
π€ λΆλͺ¨μ μμ
- λΆλͺ¨ μμ
: μ΄λ€ μμλ₯Ό ν¬ν¨νλ κ°μ₯ κ°κΉμ΄ μμ μμ, λΆλͺ¨ μμλ λ¨ νλλΏμ΄λ€.
μμ μμλ μ¬λ¬ κ°μΌ μ μλ€.
- <body>μ λΆλͺ¨ μμ : <html> ↔ <html>μ μμ μμ : <body>
- <div>μ λΆλͺ¨ μμ :
| <body>μ λΆλͺ¨ μμ : <html> ↔ <html>μ μμ μμ : <body> |
| <div>μ λΆλͺ¨ μμ : <body> ↔ <body>μ μμ μμ : <div> |
| <h1>μ λΆλͺ¨ μμ : <div> ↔ <div>μ μμ μμ : <h1>. |
| <span>μ λΆλͺ¨ μμ : <h1> ↔ <h1>μ μμ μμ : <span> |
| <p>μ λΆλͺ¨ μμ : <body> ↔ <body>μ μμ μμ : <div>, <p> |
π€ μ‘°μκ³Ό μμ
μ‘°μκ³Ό μμμ κ΄κ³λ λΆλͺ¨μ μμμ κ΄κ³μ λΉμ·νλ€.
λΆλͺ¨μ μμμ κ΄κ³λ₯Ό ν¬ν¨ν νμ₯λ κ΄κ³λΌκ³ μκ°νλ©΄ λλ€.
- μ‘°μ μμ
: μ΄λ€ μμλ₯Ό ν¬ν¨νλ λͺ¨λ μμλ‘, λΆλͺ¨ μμλ₯Ό ν¬ν¨νμ¬ μ¬λ¬ κ°μΌ μλ μλ€.
- μμ μμ
: μ΄λ€ μμκ° ν¬ν¨νκ³ μλ λͺ¨λ μμκ° μμ μμμ΄λ€.
| <body>μ μ‘°μ μμ : <html> ↔ <html>μ μμ μμ : <body>, <div>, <h1>, <span>, <p> |
| <div>μ μ‘°μ μμ : <html>, <body> ↔ <body>μ μμ μμ : <div>, <h1>, <span>, <p> |
| <h1>μ μ‘°μ μμ : <html>, <body>, <div> ↔ <div>μ μμ μμ : <h1>, <span> |
| <span>μ μ‘°μ μμ : <html>, <body>, <div>, <h1> ↔ <h1>μ μμ μμ : <span> |
| <p>μ μ‘°μ μμ : <html>, <body> ↔ <body>μ μμ μμ : <div>, <h1>, <span>, <p> |
λ³΄ν΅ λ¬Έμμ μμλ€μ μ΄μ²λΌ μ΄λ μμμ μμ ( μμ ) μμμ΄μ λΆλͺ¨ ( μ‘°μ ) μμκ° λλ κ²½μ°κ° λ§λ€.
π€ νμ
κ°μ λΆλͺ¨λ₯Ό κ°μ§κ³ μλ μμλ€μ μλ‘ νμ κ΄κ³μ΄λ€.
μ μ½λμμλ <div>,<p>κ° νμ μμμ΄λ€.
νμ κ΄κ³ μ€μμλ μΈμ ν κ΄κ³λ μλ€.
νμ κ΄κ³μ μλ μμ μ€ λ°λ‘ λ€μ μ΄μ΄ λμ€λ μμλ₯Ό μΈμ ν΄ μλ€κ³ νλ€.
μ μ½λμμλ <p>κ° <div>μ μΈμ ν νμ μμκ° λλ€.
π λ¬Έμ ꡬ쑰 κ΄λ ¨ μ νμ
λ¬Έμ ꡬ쑰λ₯Ό μ΄μ©ν μ νμλ μ΄ 3κ°μ§κ° μλ€.
1. μμ μ νμ ( νμ μ νμ )
2. μμ μ νμ
3. μΈμ μ νμ μ΄λ€.
π€ μμ μ νμ ( νμ μ νμ )
div span {color:red;}μμ μ νμλ μ νμ μ¬μ΄μ μ무 κΈ°νΈμμ΄ κ³΅λ°±μΌλ‘ ꡬλΆμ νλ€.
μ΄ μ νμλ <div>μ μμ μμμΈ <span>μ μ ννλ μ νμμ΄λ€.
π€ μμ μ νμ
div > h1 {color:red;}μμ μ νμλ μ νμ μ¬μ΄μ λ«λ κΊ½μ κΈ°νΈ ( > ) λ₯Ό λ£λλ€.
κΊ½μ κΈ°νΈμ μ νμ κΈ°νΈ μ¬μ΄μλ 곡백μ μκ±°λ μμ΄λ μκ΄μλ€.
μ΄ μ νμλ <div> μ μμ μμμΈ <h1>μ μ ννλ μ νμμ΄λ€.
π€ μΈμ νμ μ νμ
div + p {color:red;}μΈμ νμ μ νμλ μ νμ μ¬μ΄μ + κΈ°νΈλ₯Ό λ£λλ€.
+ κΈ°νΈμ μ νμ κΈ°νΈ μ¬μ΄μλ 곡백μ μκ±°λ μμ΄λ μκ΄μλ€.
μΈμ νμ μ νμλ νμ κ΄κ³μ΄λ©΄μ λ°λ‘ λ€μ μΈμ ν΄ μλ μμλ₯Ό μ ννλ μ νμμ΄λ€.
/* body μμμ μμμΈ div μμμ μμμΈ table μμ λ°λ‘ λ€μ μΈμ ν ul μμ μ ν */
body > div table + ul {...}μ μ½λμ²λΌ λ¬Έμ ꡬ쑰 κ΄λ ¨ μ νμλ λ 볡μ‘νκ² μ¬μ©ν μ μλ€.
μ μν μ μ μμλ€μ΄ λ§μ΄ λμ΄λμ΄ μλλΌλ μ μΌ μ°μΈ‘μ μλ μμκ° μ€μ μ νλλ μμλΌλ κ²μ΄λ€.
- μμ _λ¬Έμ ꡬ쑰 μ νμ νμ© -
<!DOCTYPE html>
<html>
<head>
<style>
ul li{
color:red;
}
#lecture>li{
border:1px solid violet;
}
ul,ol{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture">
<li>html</li>
<li>css
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
</body>
</html>
<style>
ul li{
color:red;
}
#lecture>li{
border:1px solid violet;
}
ul,ol{
background-color: blanchedalmond;
}
</style>- ul li : λΆλͺ¨μ μμμ κ΄κ³
- #lecture>li : λΆλͺ¨μ μμμ κ΄κ³
- ul,ol : μλ‘ λλ±ν κ΄κ³
