Search

관계 μ„ νƒμž

관계 μ„ νƒμž

μ„ νƒμž μ’…λ₯˜
μ •μ˜
기호
μ˜ˆμ‹œ μ½”λ“œ
쒅속 μ„ νƒμž
κΈ°λ³Έ μ„ νƒμžμ— μΆ”κ°€ν•˜μ—¬ νŠΉμ • λ²”μœ„ λ‚΄μ—μ„œ νŠΉμ • ν΄λž˜μŠ€λ‚˜ 아이디 λ“±μœΌλ‘œ μ œν•œν•˜λŠ” μ„ νƒμž
νƒœκ·Έ.클래슀λͺ… λ˜λŠ” νƒœκ·Έ#아이디
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
볡사