230312(μΌ)
π μ±μ₯μΌμ§ 3.1
μ±
ν볡ν μ΄κΈ°μ£Όμμ(μ¨μΈ λ€μ΄μ΄)
μ λ΄μ©μ μκ·Ήλ°μ μμνλ μλ°ν μ±μ₯κΈ°λ‘
μ΄μμλ κ½κ³Ό μ£½μ κ½μ μ΄λ»κ² ꡬλ³νλκ°?
μ±μ₯νκ³ μλ κ²μ΄ μ΄μ μλ κ²μ΄λ€.
μλͺ μ μ μΌν μ¦κ±°λ μ±μ₯μ΄λ€!
π³ ν€μλ (1.0)
μ΅λν κ°λ¨νκ² μ 리, μΆνμ 보면μ μ€μ€λ‘ μ€λͺ
π κ²½ν μμ£Όλ‘ (2.0)
λ¨μ μ 보λ₯Ό μ λ¬νκΈ°λ³΄λ€ λ¬΄μμ λ°°μ κ³ μ΄λ»κ² ν΄κ²°νλμ§ μ§§κ³ κ°λ¨νκ² μμ±
βοΈ μ ν΄μ§ ν νλ¦Ώμ λ§μΆ°μ (3.0)
ν€μλ, κ²½ν λͺ¨λ μ’λ€. λ€λ§ λ§€μΌ μμ±νκΈ°λ‘ λ§μ λ¨Ήμλ§νΌ ν΅μ¬λ§ κ°κ²°νκ² μ 리ν μ μκ² ν νλ¦Ώμ μμ± (3.1) 230102λΆν° μμλλ νμ΅μ κ΄ν λ΄μ© μΆκ°
π μ€λμ ν€μλ
position: relative
λ μ£Όλ‘ μΈμ νμ©ν κΉ?
- νμ μμλ€μ absoluteλ‘ μ£Όκ³ κ·Έ μμλ€μ κΈ°μ€μ μ‘μ λ, μμ μμμ μ¬μ©νλ€.
.test div
μ .test > div
μ μ°¨μ΄λ?
.test div
: test νκ·Έμ μλ μλ λͺ¨λ div νκ·Έλ€μ μ ν.test > div
: test νκ·Έμ λ°λ‘ μλ κΉμ΄μ μλ div νκ·Έλ€μ μ ν
head νκ·Έ μμ λ€μ΄κ°λ νκ·Έλ€?
- title: μ¬μ΄νΈμ μ΄λ¦μ κ²°μ
- link: μ£Όλ‘ stylesheetμ ν΅ν΄ μΈλΆμ cssλ₯Ό μ΄μ©ν λ μ¬μ©
- script: μΉνμ΄μ§μ λμ μΈ μμλ₯Ό μν΄ javascript νμΌμ μ°κ²°ν λ μ¬μ©
- meta: λ¬Έμλ₯Ό νννλ νκ·Έκ° μλ, λ¬Έμλ₯Ό μ€λͺ νκΈ° μν΄ μ‘΄μ¬μν΄ μ¬μ©
box modelκ³Ό κ΄λ ¨ν css μμ±μ΄ μμλμ§ μλ μ΄μ λ?
- κΈ°λ³Έμ μΌλ‘ cssμ μμμ μ€νμΌλ§μ νΈνκ² ν΄μ£Όλ κΈ°λ₯μ λλ€. νμ§λ§, μ μκ°ν΄λ³΄λ©΄ box modelμ 건λ리λ μμλ§μ λΆλͺ¨μμ μμμΌλ‘ μμμ΄ λλ κ² ν¬κ² μλ―Έκ° μκΈ° λλ¬Έμ μμλμ§ μμ΅λλ€.
classμ idλ₯Ό μ¬μ©νλ κΈ°μ€?
- class: μ¬λ¬ νκ·Έμ λμμ μ΄λ€ μ§λ¨μ μΈ μμ±μ λΆμ¬ν λ
- id: κ³ μ ν νλμ νκ·Έμλ§ μμ±μ λΆμ¬ν λ
- (μΆκ°)css BEM λͺ λͺ λ²μμλ classλ§ μ¬μ©νμ¬ νκ·Έλ€μ μ ν
μ°Έκ³
- μμ
π μμ½ λ° ν루 κ°λ¨ νκ³
μμ¦μ κ±°μ λ―Έμ ꡬν μμ£Όλ‘ ν루λ₯Ό 보λ΄λ€λ³΄λ μ±μ₯μΌμ§μ κ°λ μ 리ν λ΄μ©μ΄ μμλ€..!(νκ³β¦π€ͺ) μμΌλ‘ λ§€μΌ μ λ μ±μ₯μΌμ§μ λ무 κ°λ μ μΈ κ²λΏ μλλΌ κ·Έ λ μ κ²½νκ³Ό κ°μ , μ΄λ €μ λ±λ ν¨κ» μ μ΄μ μ 리ν΄λ³΄λ € νλ€..! μμ§λ§κ³ λλ§μ ν루λ₯Ό λλ§μ ννλ²μΌλ‘ μ 리ν μ μκ² νμ!
μ€λμ μν μ
- μ£Όλ§μ΄μ§λ§ μ€ν°λ μΉ΄ν κ°μ 곡λΆν μ
- μ§μ§ λͺλ λ§μ μ½λ Έ κ°μ μ€νΈλ μ€ νκ³ μ¨ μ
μ€λμ μμ¬μ΄ μ
- μ£Όλ§μ΄λΌ κ·Έλ°κ° λ΄κ° λͺ©νλ‘ ν κ²λ³΄λ€λ 곡λΆλ₯Ό νμ§ μμ μ