Search

μ„ νƒμž

μ„ νƒμž (Selector)

HTML λ¬Έμ„œμ˜ νŠΉμ • μ˜μ—­μ΄λ‚˜ μš”μ†Œ 등을 선택해쀄 수 μžˆλŠ” ν‚€μ›Œλ“œ
κΈ°λ³Έ μ„ νƒμž
관계 μ„ νƒμž
기타 μ„ νƒμž
전체 μ„ νƒμž
쒅속 μ„ νƒμž
가상 μ„ νƒμž
νƒœκ·Έ μ„ νƒμž
ν•˜μœ„ μ„ νƒμž
속성 μ„ νƒμž
클래슀 μ„ νƒμž
μžμ‹ μ„ νƒμž
아이디 μ„ νƒμž
인접 μ„ νƒμž
κ·Έλ£Ή μ„ νƒμž
ν˜•μ œ μ„ νƒμž

κΈ°λ³Έ μ„ νƒμž

μ„ νƒμž μ’…λ₯˜
μ •μ˜
기호
μ˜ˆμ‹œ μ½”λ“œ
전체 μ„ νƒμž
λͺ¨λ“  μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” μ„ νƒμž
*
* { margin: 0; padding: 0; }
νƒœκ·Έ μ„ νƒμž
νŠΉμ • HTML νƒœκ·Έλ₯Ό μ„ νƒν•˜λŠ” μ„ νƒμž
νƒœκ·Έλͺ…
p { color: red; }
클래슀 μ„ νƒμž
νŠΉμ • 클래슀 이름을 가진 μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” μ„ νƒμž
.클래슀λͺ…
.button { background-color: blue; }
아이디 μ„ νƒμž
νŠΉμ • 아이디λ₯Ό 가진 μš”μ†Œλ₯Ό μ„ νƒν•˜λŠ” μ„ νƒμž
#아이디λͺ…
#header { background-color: green; }
κ·Έλ£Ή μ„ νƒμž
μ—¬λŸ¬ μ„ νƒμžλ₯Ό λ¬Άμ–΄ λ™μΌν•œ μŠ€νƒ€μΌμ„ 적용
μ„ νƒμž1, μ„ νƒμž2
h1, h2, h3 { color: purple; }

관계 μ„ νƒμž

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

기타 μ„ νƒμž

μ„ νƒμž μ’…λ₯˜
μ •μ˜
기호
μ˜ˆμ‹œ μ½”λ“œ
가상 μ„ νƒμž
νŠΉμ • μƒνƒœμ— μžˆλŠ” μš”μ†Œλ‚˜ νŠΉμ • μš”μ†Œμ˜ 일뢀뢄을 선택
:: λ˜λŠ” :
a:hover { color: red; }
속성 μ„ νƒμž
νŠΉμ • 속성을 가진 μš”μ†Œλ₯Ό 선택
[속성λͺ…]
[type="text"] { border: 1px solid gray; }