λ€μ΄κ°κΈ°
μ νμ 1,2 μμ νλμ μ νμλ§μ μ¬μ©ν΄μ μμλ₯Ό μ ννλ λ²μ λ°°μ λ€.
μ νμλ μ’ λ₯μ μκ΄μμ΄ μ¬λ¬ κ°μ§ μ νμλ€μ μ‘°ν©νμ¬ μ¬μ©ν μ μλ€.
μ νμλ₯Ό μ‘°ν©νλ λ°©μμ λν΄ μμ보μ
π μ νμμ μ‘°ν©
/* μμμ classμ μ‘°ν© */
p.bar{ ... }
/* λ€μ€ class */
.foot.bar{ ... }
/* idμ classμ μ‘°ν© */
#foo.bar{ ... }1. μμμ classλ₯Ό μ‘°ν©ν κ²½μ°.
: <p> μ΄λ©΄μ class μμ±μ barκ° μμ΄μΌ μ μ© λλ€.
2. λ€μ€ ν΄λμ€μ κ²½μ°.
: class μμ±μ fooμ barκ° λͺ¨λ μμ΄μΌ μ μ©λλ€.
3. idμ classλ₯Ό μ‘°ν©ν κ²½μ°
: idκ° fooμ΄λ©° classκ° barμΈ μμμ μ μ©λλ€.
π μμ± μ νμ
π€ λ¨μ μμ±μΌλ‘ μ ν
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
p[class] {
color: violet;
}
p[class][id] {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<P class="baz" id="title">HTML</P>
</body>
</html>
μμ± μ νμλ λκ΄νΈλ₯Ό μ΄μ©ν΄μ μ μΈνμ¬ λκ΄νΈ μμ μμ± μ΄λ¦μ΄ λ€μ΄κ°λ€.
μμμ ν΄λΉ μ΄λ¦μ μμ±μ΄ μλ€λ©΄ ν΄λΉ μ¬νμ΄ μ μ©λλ€.
μ μ½λλ μμ μ νμμμ μ‘°ν©μΌλ‘ μ΄λ£¨μ΄μ§ μ½λμ΄λ€.
1. <p>μ΄λ©΄μ class μμ±μ΄ μλ μμμ΄λ©΄?
: color:pink κ·μΉμ΄ μ μ©λλ€.
2. <p>μ΄λ©΄μ class μμ±κ³Ό id μμ±μ΄ ν¨κ» μμΌλ©΄?
: text-decoration : underline κ·μΉμ΄ μ μ©λλ€.
π€ μ νν μμ±κ°μΌλ‘ μ ν
μ νν μμ±κ°μΌλ‘ μμλ₯Ό μ ννλ€.
μ νμλ λκ΄νΈμμ μμ± μ΄λ¦κ³Ό μμ±κ°μ μ μΌλ©΄ λλ€.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
p[class="foo"] {
color: violet;
}
p[class][id="title"] {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<P class="baz" id="title">HTML</P>
</body>
</html>
p[ class="foo" ]λ <p>μ΄λ©΄μ class μμ±μ κ°μ΄ fooμ΄λ©΄ μ μ©λκ³ ,
p[ id="title" ]λ <p>μ΄λ©΄μ id μμ±μ κ°μ΄ titleμ΄λ©΄ μ μ©λλ€.
π€ λΆλΆ μμ±κ°μΌλ‘ μ ν
λΆλΆ μμ±κ°μΌλ‘ μ νμ μμ± μ΄λ¦κ³Ό μμ±κ° μ¬μ΄μ μ¬μ©λλ κΈ°νΈμ λ°λΌ λμμ΄ λ¬λΌμ§λ€.
| [class~="color"] | class μμ±μ κ°μ΄ 곡백μΌλ‘ ꡬλΆν "color" λ¨μ΄κ° ν¬ν¨λλ μμ μ ν. |
| [class^="color"] | class μμ±μ κ°μ΄ "color" λ‘ μμνλ μμ μ ν. |
| [class$="color"] | class μμ±μ κ°μ΄ "color" λ‘ λλλ μμ μ ν. |
| [class*="color"] | class μμ±μ κ°μ΄ "color" λ¬Έμκ° ν¬ν¨λλ μμ μ ν. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
img {
align-items: left;
/*float:leftλ‘ νλ©΄ ν
μ€νΈκ° μ΄λ―Έμ§ λ°λ‘ μμ λΆκ²λμ align-items μ¬μ©*/
height: 300px;
object-fit: cover;
/*μ μ©ν λΉμ¨μ μ μ§ν μ±λ‘ μ¬μ΄μ¦κ° μ‘°μ λμ§λ§
λΉμ¨μ΄ λ§μ§ μλ κ²½μ° μλ¦¬κ° λ¨κ² λλ€.*/
}
div[class] {
float: left; /*ν
μ€νΈ μΌμͺ½μΌλ‘ λΆμ¬μ μ λ ¬*/
padding-left: 50px;
padding-right: 50px;
/*μ 체 ν¨λ©μΌλ‘ νλ©΄ ν
μ€νΈ μμλ μ¬λ°±μ΄ μ겨μ μ’μ°ν¨λ© μ€μ */
font-size: 40px;
}
div[class~="color"] {
font-style: italic;
}
div[class^="color"] {
font-style: italic;
}
div[class$="color"] {
font-style: italic;
}
div[class*="color"] {
font-style: italic;
}
</style>
</head>
<body>
<h1>Red Velvet</h1>
<p>
<img src="red.jpg">
<img src="blue.jpg">
<img src="colorful.jpg">
</p>
<div class="color hot">Bad Boy</div>
<div class="cool color">Russian Roulette</div>
<div class="colorful nature">Psycho</div>
</body>
</html>
/*
μ¬μ§μ class μμ± κ°
class="color hot" => Bad Boy ( 1 μμ )
class="cool color" => Russian Roulette ( 2 μμ )
class="colorful nature" => Psycho (3 μμ )
*/
div[class~="color"] {font-style: italic;}
/* 1,2 μμμ ν΄λΉ*/
div[class^="color"] {font-style: italic;}
/* 1,3 μμμ ν΄λΉ*/
div[class$="color"] {font-style: italic;}
/* 2 μμμ ν΄λΉ*/
div[class*="color"] {font-style: italic;}
/* 1,2,3 μμμ ν΄λΉ*/01. https://www.boostcourse.org/μ νμμ μ‘°ν© & μμ± μ νμ μ€λͺ
λΉμ 곡μλ₯Ό μν HTML/CSS
λΆμ€νΈμ½μ€ λ¬΄λ£ κ°μ
www.boostcourse.org
02. https://nykim.work/λΆλΆ μμ±κ° μμ μ½λ μ€ μ΄λ―Έμ§ μ‘°μ μ κ΄ν μ€λͺ
[CSS] μ΄λ―Έμ§ μ¬μ΄μ¦ λ§μΆκΈ° (object-fit, absolute, background)
νλ‘€λ‘κ·Έ 컨ν μ΄λμ ν¬κΈ°λ κ³ μ λμ΄ μλλ°, ν΄λΉ 컨ν μ΄λ μμ λ€μ΄κ° μ΄λ―Έμ§μ ν¬κΈ°λ λ€μν κ²½μ°κ° μμ΅λλ€. μ¬μ©μκ° μ΄λ―Έμ§λ₯Ό λ±λ‘νλ κ²½μ° λλ λ§μΌν νμ΄ μ무 μ΄λ―Έμ§λ λ£λ
nykim.work
03. https://velog.io/λΆλΆ μμ±κ° μμ μ½λ μ€ μ΄λ―Έμ§ λ° κΈμ μ λ ¬μ κ΄ν μ€λͺ
[CSS]μ΄λ―Έμ§ λ°μ κΈμ΄ μ€λ λ°©λ²
μ°Έμ‘° https://lcw126.tistory.com/141
velog.io
04. https://aboooks.tistory.com/λΆλΆ μμ±κ° μμ μ½λ μ€ ν μ€νΈ ν¨λ©μ κ΄ν μ€λͺ
[html/css] padding μμ± μ¬μ©λ²(padding-right, padding-left, padding-top, padding-bottom)
[html/css] padding μμ± μ¬μ©λ²(padding-right, padding-left, padding-top, padding-bottom) μ§λ μκ°μλ margin μμ±μ μ΄μ©νμ¬ λ μ΄μμμ μ¬λ°±μ λ£μμ΅λλ€. margin μμ± μμΈν μμ 보기 μ΄λ²μ paddin..
aboooks.tistory.com
μ½λ©κ΅μ‘ ν°μ¨νΌμ€μΏ¨
4μ°¨μ°μ νλͺ , μ½λ©κ΅μ‘, μννΈμ¨μ΄κ΅μ‘, μ½λ©κΈ°μ΄, SWμ½λ©, κΈ°μ΄μ½λ©λΆν° μλ° νμ΄μ¬ λ±
tcpschool.com
