CSS λ±μ₯ μ΄μ μ μν© β
κ³Όκ±° font νκ·Έ
<font color"red">
CSSμ λ±μ₯ β
css μλ‘μ΄ λ¬Έλ²
1. νλ²μ μμ κ°λ₯
2. μ€λ³΅ μ½λμ μ κ±°
<style>
a{
color:red;
}
</style>
νλͺ
μ λ³ν β
css λ¬Έλ² κ΅¬λΆ
1. <style> </style> νκ·Έλ‘ (μ νμμκ² μ€ μμ±μ λΆμ¬)
2. style="color:red" μμ±μΌλ‘ (μ§μ μ¬μ©)
CSS μμ±μ μ€μ€λ‘ μμλ΄λ λ°©λ² β
CSS μ νμλ₯Ό μ€μ€λ‘ μμλ΄λ λ°©λ²β
μ νμ id(#@@) > μ νμ class(.@@) > νκ·Έ μ νμ
(λ§μ§λ§ λ±μ₯ μ νμκ° μ°μ μμκ° λλ€)
κ·Έλ£ΉμΌλ‘ λ¬Άμ΄μ μμ± μ£Όλ λ°©λ²
λ°μ€λͺ¨λΈβ
νκ·Έλ³ μ±κ²©μ μμμΌν¨
νλ©΄μ 체 μ¬μ© block level element
νλ©΄μΌλΆ μ¬μ© inline element
disply: block; κ°μΌλ‘ λ°κΏ μλ μμ.
h (νλ©΄μ 체 μ¬μ©)
a (μΌλΆλΆλ§ μ¬μ©, μ€λ°κΏ x)
content > border > padding > margin
그리λβ
λΆλͺ¨ νκ·Έ : νκ·Έλ€μ λ¬Άμ μ μμ
grid
display : grid;
grid-template-columns : 150px 1fr;
λ°μν λμμΈβ
μΉνμ΄μ§μ νλ©΄ ν¬κΈ°μ λ°μνμ¬ κ·Έμ λ§μΆ° 보μ¬μ£Όλ λμμΈ
@media λ―Έλμ΄ μΏΌλ¦¬
1. νλ©΄μ ν¬κΈ° μμλ΄κΈ°
/* screen width > 800px */
@media{min-width:800px} {
div {
display : none;
}
}
/* screen width < 800px */
@media{mox-width:800px} {
div {
display : none;
}
}
CSS μ½λμ μ¬μ¬μ©β
.css μ½λ
<link rel="stylesheet" href="style.css">
μ€λ³΅μ κ±°, μ μ§λ³΄μ
μλμΌλ‘ style.css λ₯Ό λ€μ΄λ°μμ λΆλ¬μ΄
μΊμ (μ μ₯νλ€)
νλ² μ μ₯νλ€λ©΄ css κ° λ°λκΈ° μ κΉμ§λ
μ μ₯λ css λ₯Ό λΆλ¬μ€κΈ°λλ¬Έμ νΈλν½, μ¬μ©λ£ μ κ°.
μμ
μ λ§μΉλ©°β