[π±λͺ©μ°¨π±]
- μ νμ (Selector)λ?
- λ¨μΌ μ νμ
- + μ€μ΅. κΈ°λ³Έμ νμ μ°μ΅νκΈ°
- λ³΅ν© μ νμ
- +μ€μ΅. 볡ν©μ νμ μ°μ΅νκΈ°
- μμμ νμ vs νμ (νμ μ νμ)
- λ¨μΌ μ νμ
01. μ νμ(Selector)λ?
μ νμ/νλ‘νΌν°/κ°CSSλ HTMLμμμ styleμ μ μνμ¬μΌ νλ―λ‘ μ€νμΌμ μ μ©νκ³ μ νλ html μμλ₯Ό μ νν μ μμ΄μΌ ν©λλ€. μ νμλ μ€νμΌμ μ μ©νκ³ μ νλ htmlμμλ₯Ό μ ννκΈ° μν΄ css μμ μ 곡νλ μλ¨μ
λλ€. μ νμλ‘ html μμλ₯Ό μ ννκ³ {}λ΄μ μμ± κ°μ μ§μ νμ¬ λ€μν styleμ μ μν©λλ€. μ¬λ¬κ°μ νλ‘νΌν°(μμ±)μ μ°μν΄μ μ§μ ν μ μμΌλ©° μΈλ―Έμ½λ‘ (;)μΌλ‘ ꡬλΆν©λλ€. νλ‘νΌν°λ νμ€ μ€νμΌλ‘ μ΄λ―Έ μ§μ λμ΄ μλ κ²μ μ¬μ©νκ³ , μ¬μ©μκ° μμλ‘ μ μν μ μμ΅λλ€. κ°(value)λ ν΄λΉ μμ±μ μ¬μ©ν μ μλ κ°μ ν€μλλ ν¬κΈ° λ¨μ λλ μμ λ¨μ λ±μ νΉμ λ¨μλ‘ μ§μ ν©λλ€.
01-1 λ¨μΌ μ νμ (μ 체/νκ·Έ/class/ID μ νμ)
- μ 체μ νμ (Universal Selector)
λͺ¨λ μμλ₯Ό μ ννλ μ νμλ‘ *μ μ¬μ©ν©λλ€.
*{
color : red;
}μμ μ½λλ λͺ¨λ μμλ€μ color νλ‘νΌν°λ₯Ό red κ°μΌλ‘ λ°κΎΈκ² λ€. λΌλ μ리μ
λλ€
- νκ·Έμ νμ (Type Selector)
λ§μ½ <li>νκ·Έλ₯Ό μ ννλ €λ©΄
li{
color : red;
}<li>νκ·Έλ€μ color νλ‘νΌν° κ°μ΄ red λ‘ λ³ν©λλ€.
- Class μ νμ
html class μμ±μ κ°μ΄ ABC(μμλ‘ μ§μ ) μΈ μμλ₯Ό μ ννλ μ νμλ‘ .ABCλ₯Ό μ¬μ©ν©λλ€.
μλ₯Όλ€μ΄ html νμΌμ΄
<div>
<ul>
<li>μ¬κ³Ό</li>
<li>λΈκΈ°</li>
<li class="orange">μ€λ μ§</li>
</ul>μ΄κ³ CSSνμΌμ class μ νμλ₯Ό μ΄μ©νλ€λ©΄
.orange{
color : red;
}class μμ±μ κ°μ΄ orangeμΈ μμλ§ colorλ₯Ό redλ‘ λ°κΏμ€λλ€.
- ID μ νμ
html id μμ±μ κ°μ΄ ABC(μμλ‘ μ§μ ) μΈ μμλ₯Ό μ νν©λλ€.
<div>
<ul>
<li>μ¬κ³Ό</li>
<li>λΈκΈ°</li>
<li id="orange">μ€λ μ§</li>
</ul>μμ idμμ±μ΄ orangeμΈ μμλ₯Ό μ ννμ¬ μ€νμΌμ μ
νκ³ μ νλ€λ©΄
#orange{
color : red;
}ID μμ±μ κ°μ΄ orangeμΈ μμλ€λ§ colorλ₯Ό red λ‘ λ°κΏμ€λλ€.
+μ€μ΅. κΈ°λ³Έμ νμ μ°μ΅νκΈ°
- λͺ¨λ κΈμ¨μ μμ white
- λΈλΌμ°μ μ λ°°κ²½μμ gray
- span νκ·Έμ λ°°κ²½μ red
- first λΌλ μμ΄λλ₯Ό κ°μ§ νκ·Έμ λ°°κ²½μ Blue
- secondλΌλ ν΄λμ€λ₯Ό κ°μ§ νκ·Έμ λ°°κ²½μ green
κΈ°λ³Έ html μ½λ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS μ νμ</title>
</head>
<body>
<h1>κΈ°λ³Έ μ νμ μ°μ΅ν΄λ³΄κΈ°</h1>
<p>κΈ°λ³Έμ νμ μ°μ΅μ ν΄λ³΄μμ!</p>
<span>μλ
νμΈμ</span>
<ol>
<li id="first">1</li>
<li class="second">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</body>
</html>solution) css νμΌμ μ νμλ₯Ό μ΄μ©νμ¬ λ°μ μ½λ μ²λΌ λνλΌ μ μμ΅λλ€.
*{
color: white;
}
body{
background-color: gray;
}
span{
background-color: red;
}
#first{
background-color: blue;
}
.second{
background-color: green;
}
01-2 λ³΅ν© μ νμ
λ³΅ν© μ νμλ νΉμν μμλ₯Ό νΈμΆνκ³ μΆμ λ, κΈ°λ³Έ μ νμ λ§μΌλ‘λ μ νμ΄ λΆκ°λ₯ν κ²½μ°μ μ¬μ©ν©λλ€.
- νμ μ νμ (Descendant Combinator)
μ νμ ABC(μμλ‘μ§μ )μ νμ μμμΈ XYZ μ ν. 'λμ΄μ°κΈ°'κ° μ νμμ κΈ°νΈκ° λ©λλ€.
μλ₯Ό λ€μ΄ html μ½λκ°
<div>
<ul>
<li>μ¬κ³Ό</li>
<li>λΈκΈ°</li>
<li class="orange">μ€λ μ§</li>
</ul>
<div>λΉκ·Ό</div>
<p> ν λ§ν </p>
<span class="orange">μ€λ μ§</span>
</div>
<span class="orange">μ€λ μ§</span>divμ νμ μμ μ€ orange classλ₯Ό μ ννκ³ μΆλ€.
div .orange{
color : red;
}μ μ½λμκ°μ΄ css νμΌμ μμ±ν μ μμ΅λλ€.
μ€ν κ²°κ³Όλ divμ νμμμμ€ class ="orange"μΈ μμλ€λ§ μ μ©μ΄ λκ² μ΅λλ€.
- μμ μ νμ (>) : child combinator
μμ μ νμλ μ νμ ABCμ μμ μμ XYZλ₯Ό μ νν©λλ€
μ html μ½λμμ μ νμ ulμ μμ μμμΈ class="orange"λ₯Ό μ ννλ €λ©΄ css νμΌμμ
ul > .orange{
color : red;
}
- μΈμ νμ μ νμ (+)
κ°μ λΆλͺ¨λ₯Ό κ°μ§κ³ , μ νμ ABC λ°λ‘ λ€μ μ€λ XYZμλ§ μ μ©ν©λλ€. (λ°λ‘ λ€)
- μΌλ° νμ μ νμ
κ°μ λΆλͺ¨λ₯Ό κ°μ§κ³ , μ νμ ABC λ€μ μ€λ λͺ¨λ XYZμ μ μ©λ©λλ€. (λ°λ‘ λ€κ° μλμ΄λ λ¨)
+μ€μ΅. 볡ν©μ νμ μ°μ΅νκΈ°
κΈ°λ³Έμ½λ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>볡ν©μ νμ μ¬μ© μ°μ΅</h1>
<p>λλ¬Όμμ μμ΄μ</p>
<div class="zoo">
<ul>
<span>μ¬κΈ΄ μ¬ν리!</span>
<li>κ³°</li>
<li id="tiger">νΈλμ΄</li>
<li>ν¬λ</li>
<span class="lion">μ¬μ1</span>
<li class="lion">μ¬μ2</li>
<li>μ¬μ‘μ¬ allie</li>
<li>μ¬μ‘μ¬ μ§ν</li>
</ul>
<span class="lion"> μ¬ν리 λ°μ μ¬μ</span>
</div>
<p class="lion">μΌμμ μ¬μ</p>
</body>
</html>- μΌμμ μ¬μλ§ μ ν, λ°°κ²½μ λΉ¨κ°μ
- μ¬ν리 μμ μ¬μλ§ μ ν - λ°°κ²½μ greenyellow
- νΈλμ΄λ§ μ ν, λ°°κ²½μ λ Έλμ
- μ¬μλ₯Ό μ λΆ μ ν, κΈμλ₯Ό sienna μ
- λλ¬Όμ μμ μ¬μλ§ μ ν, ν°νΈλ₯Ό λκ»κ²
- νΈλμ΄ λ€μ μλ ν¬λλ₯Ό μ ν, λ°°κ²½μ νλμ(skyblue)
- μ¬ν리 μ¬μ λ€μ μλ μ¬μ‘μ¬λ₯Ό λͺ¨λ μ ν, λ°°κ²½μ μ€λ μ§μ
solution) css μ½λ
p.lion {
background-color: red;
}
/* μ¬ν리 μμ μ¬μλ§ μ ν */
.zoo ul .lion {
background-color: greenyellow;
}
/* νΈλμ΄ μ ν */
#tiger {
background-color: yellow;
}
/* λͺ¨λ μ¬μ μ ν */
.lion {
color: sienna;
}
/* λλ¬Όμ μμ μ¬μ μ ν */
.zoo .lion {
font-weight: bold;
}
/* νΈλμ΄ λ€μ μλ ν¬λ */
.zoo #tiger +li{
background-color: skyblue;
}
/* μ¬ν리 μ¬μ λ€μ μλ μ¬μ‘μ¬λ₯Ό λͺ¨λ μ ν */
.zoo li.lion ~ li {
background-color: orange;
}κ²°κ³Ό νλ©΄μ
볡ν©μ νμ μ¬μ© μ°μ΅
λλ¬Όμμ μμ΄μ
-
μ¬κΈ΄ μ¬ν리!
- κ³°
- νΈλμ΄
- ν¬λ μ¬μ1
- μ¬μ2
- μ¬μ‘μ¬ allie
- μ¬μ‘μ¬ μ§ν
μΌμμ μ¬μ
μ΄λ κ² λ©λλ€.
μ€μ΅μ μ§ννλ©΄μ μμμ νμμ νμμ νμκ° λ¬΄μκ² ~ ν·κ°λ¦° μ λ μμ μ νμμ νμ μ νμμ μ°¨μ΄λ₯Ό μ 리ν΄λ΄€μ΅λλ€.
+ μμ μ νμ vs νμ(νμ μ νμ)
μ°μ , κ²°λ‘ μ μΌλ‘λ νμ (νμ) μ νμλ μμ μ νμ(>)μ λΉν΄ λ λμ λ²μλ₯Ό ν¬ν¨ν©λλ€. μλ₯Όλ€μ΄
<div>
<ul>
<li>Hello 1</li>
<li>Hello 2</li>
<ol>
<li>Bye</li>
</ol>
</ul>
</div>ul li{
background-color: red;
}cssλ <ul>νκ·Έμ μμ μμμ€μ λͺ¨λ <li>νκ·Έμ background-colorλ₯Ό redλ‘ μ€μ
ul >li{
background-color:red;
}λ‘ μμμ νμ(>)λ₯Ό μ΄μ©νμλλ μ§μ μ μΈ λΆλͺ¨λ‘ <ul>νκ·Έκ° μλ μμλ€μ λ°λκ² λ©λλΉ
νμμ νμκ° μμμ νμλ³΄λ€ ν¨μ¬ ν° μμμ΄λΌκ³ μκ°νλ©΄ λ©λλΉ μμμ νμλ μ§μ μ μΈ λΆλͺ¨(?)λ§ μ·¨κΈνκ³ νμμ νμ μ΄λμ λΆλͺ¨κ° λ§λ€κ³ μκ°νκΈ°λ‘ νλ΅λλΉ. νν νννν³νννγ
νν!!!!νλΌννννννν
