1. ν°νΈ μμ±μ κ°μ
ν°νΈ μμ±μ ν μ€νΈμ μ μ©λλ μ¬λ¬ κ°μ§ μ€νμΌ μμλ₯Ό μ§μ νλλ° μ¬μ©λ©λλ€. ν°νΈ μμ±μ μΉ νμ΄μ§, λ¬Έμ, ν리μ ν μ΄μ λ± λ€μν 컨ν μ€νΈμμ μ¬μ©λλ©°, ν μ€νΈλ₯Ό λμ± λ νΉνκ² λ§λ€μ΄ μ€λλ€. λ€μν ν°νΈ μμ±μ μ‘°ν©νμ¬ μνλ ν¨κ³Όλ₯Ό μ»μ μ μμ΅λλ€. μ΄ κΈμμλ λ€μν ν°νΈ μμ±μ νκΊΌλ²μ μ§μ νλ λ°©λ²μ λν΄ μμ보λλ‘ νκ² μ΅λλ€.
ν°νΈ μμ±μ CSS(Cascading Style Sheets)λ₯Ό ν΅ν΄ μ§μ ν μ μμ΅λλ€. CSSλ μΉ λ¬Έμμ μ€νμΌμ μ§μ νλ μΈμ΄λ‘, ν°νΈ μμ±λ CSSλ₯Ό ν΅ν΄ μ§μ ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μκ° μνλ ν°νΈλ₯Ό μΉ νμ΄μ§μ μ μ©ν μ μμ΅λλ€. ν°νΈ μμ±μ μ§μ ν λλ μ νμλ₯Ό μ΄μ©νμ¬ νΉμ μμμ΄λ HTML νκ·Έμλ§ μμ±μ μ μ©ν μλ μμ΅λλ€.
ν°νΈ μμ±μ ν°νΈ ν¬κΈ°, ν°νΈ κ΅΅κΈ°, ν°νΈ μ€νμΌ λ±μ λ€μν μμλ‘ κ΅¬μ±λ©λλ€. κ° μμ±μ λ€μκ³Ό κ°μ μν μ ν©λλ€.
- ν°νΈ ν¬κΈ°: ν μ€νΈμ ν¬κΈ°λ₯Ό μ§μ ν©λλ€. μΌλ°μ μΌλ‘ ν½μ (px), ν¬μΈνΈ(pt), λ°±λΆμ¨(%) λ±μ λ¨μλ₯Ό μ¬μ©νμ¬ μ§μ ν μ μμ΅λλ€.
- ν°νΈ κ΅΅κΈ°: ν μ€νΈμ κ΅΅κΈ°λ₯Ό μ§μ ν©λλ€. μ£Όλ‘ normal, bold, bolder, lighterμ κ°μ κ°μΌλ‘ μ§μ ν μ μμΌλ©°, μ«μ κ°μΌλ‘λ μ§μ ν μ μμ΅λλ€.
- ν°νΈ μ€νμΌ: ν μ€νΈμ μ€νμΌμ μ§μ ν©λλ€. μ΄ν€λ¦μ²΄, κΈ°μΈμ체, μλ¬Έμ λ§μΆ€, λλ¬Έμ λ§μΆ€ λ±μ μ€νμΌμ μ μ©ν μ μμ΅λλ€.
μ΄λ¬ν ν°νΈ μμ±λ€μ μ μ ν μ‘°ν©νμ¬ ν μ€νΈλ₯Ό λμμΈν μ μμΌλ©°, μΉ νμ΄μ§λ λ¬Έμμ μ λ°μ μΈ λΆμκΈ°μ λλμ κ²°μ νλ μμλ‘ νμ©λ©λλ€. ν°νΈ μμ±μ μ νμ©νμ¬ ν μ€νΈλ₯Ό μ½κΈ° μ½κ³ μ λ €νκ² λ§λ€μ΄ λ΄λ κ²μ μ€μν λμμΈ μμ μ€ νλμ λλ€. λ€μ μΉμ μμλ κ° ν°νΈ μμ±μ μ’ λ₯λ₯Ό μμΈν μ΄ν΄λ³΄κ² μ΅λλ€.
2. ν°νΈ μμ± μ’ λ₯
ν°νΈ μμ±μ ν μ€νΈμ μ μ©λλ μ¬λ¬ κ°μ§ μ€νμΌμ μ§μ νλλ° μ¬μ©λ©λλ€. λ€μν ν°νΈ μμ±μ μ¬μ©νμ¬ μνλ ν¨κ³Όλ₯Ό μ»μ μ μμ΅λλ€. μ΄λ² μΉμ μμλ μμ£Ό μ¬μ©λλ ν°νΈ μμ±μ μ’ λ₯λ₯Ό μμ보λλ‘ νκ² μ΅λλ€.
2.1 ν°νΈ ν¬κΈ°
ν°νΈ ν¬κΈ°λ ν
μ€νΈμ ν¬κΈ°λ₯Ό μ§μ νλ μμ±μ
λλ€. ν°νΈ ν¬κΈ°λ μΌλ°μ μΌλ‘ ν½μ
(px), ν¬μΈνΈ(pt), λ°±λΆμ¨(%) λ±μ λ¨μλ₯Ό μ¬μ©νμ¬ μ§μ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, font-size: 16px;
μ κ°μ΄ μ¬μ©νμ¬ ν
μ€νΈμ ν¬κΈ°λ₯Ό 16pxλ‘ μ§μ ν μ μμ΅λλ€.
2.2 ν°νΈ κ΅΅κΈ°
ν°νΈ κ΅΅κΈ°λ ν
μ€νΈμ κ΅΅κΈ°λ₯Ό μ§μ νλ μμ±μ
λλ€. ν°νΈ κ΅΅κΈ°λ normal, bold, bolder, lighterμ κ°μ κ°μΌλ‘ μ§μ ν μ μμΌλ©°, μ«μ κ°μΌλ‘λ μ§μ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, font-weight: bold;
μ κ°μ΄ μ¬μ©νμ¬ ν
μ€νΈλ₯Ό κ΅΅κ² νμν μ μμ΅λλ€.
2.3 ν°νΈ μ€νμΌ
ν°νΈ μ€νμΌμ ν
μ€νΈμ μ€νμΌμ μ§μ νλ μμ±μ
λλ€. ν°νΈ μ€νμΌμ μ΄ν€λ¦μ²΄, κΈ°μΈμ체, μλ¬Έμ λ§μΆ€, λλ¬Έμ λ§μΆ€ λ±μ μ€νμΌμ μ μ©ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, font-style: italic;
κ³Ό κ°μ΄ μ¬μ©νμ¬ ν
μ€νΈλ₯Ό μ΄ν€λ¦μ²΄λ‘ νμν μ μμ΅λλ€.
μ΄μΈμλ ν°νΈ μμ± μ€μμλ λ€μν μμ±λ€μ΄ μ‘΄μ¬ν©λλ€. μλ₯Ό λ€μ΄, ν°νΈμ μμμ μ§μ νλ color
μμ±μ΄λ ν°νΈμ μ€ κ°κ²©μ μ‘°μ νλ line-height
μμ± λ±μ΄ μμ΅λλ€. ν°νΈ μμ±μ μ΄λ¬ν λ€μν μμλ€μ μ μ ν μ‘°ν©νμ¬ ν
μ€νΈμ λμμΈμ κΎΈλ° μ μμ΅λλ€.
λ€μ μΉμ μμλ ν°νΈ ν¬κΈ°λ₯Ό μ§μ νλ λ°©λ²μ λν΄ μμΈν μμ보λλ‘ νκ² μ΅λλ€.
3. ν°νΈ ν¬κΈ° μ§μ
ν°νΈ ν¬κΈ°λ ν μ€νΈμ ν¬κΈ°λ₯Ό μ§μ νλλ° μ¬μ©λλ ν°νΈ μμ±μ λλ€. ν μ€νΈλ 보기 μ’κ³ μ½κΈ° μ¬μμΌ νλ―λ‘, ν°νΈ ν¬κΈ°λ₯Ό μ μ ν μ‘°μ νλ κ²μ΄ μ€μν©λλ€. ν°νΈ ν¬κΈ°λ μΌλ°μ μΌλ‘ ν½μ (px), ν¬μΈνΈ(pt), λ°±λΆμ¨(%) λ±μ λ¨μλ₯Ό μ¬μ©νμ¬ μ§μ ν μ μμ΅λλ€.
3.1 ν½μ (px) λ¨μ
ν½μ
λ¨μλ ν
μ€νΈμ ν¬κΈ°λ₯Ό ν½μ
λ‘ μ§μ νλ κ°μ₯ μΌλ°μ μΈ λ°©λ²μ
λλ€. ν½μ
ν¬κΈ°λ κ³ μ μ μ΄κΈ° λλ¬Έμ νλ©΄μμ ν
μ€νΈμ ν¬κΈ°κ° λ³νμ§ μμ΅λλ€. μλ₯Ό λ€μ΄, font-size: 16px;
μ κ°μ΄ μ¬μ©νμ¬ ν
μ€νΈμ ν¬κΈ°λ₯Ό 16pxλ‘ μ§μ ν μ μμ΅λλ€. μ΄λ κ² μ§μ λ ν½μ
ν¬κΈ°λ λͺ¨λ νλ©΄μμ λμΌνκ² μ μ§λ©λλ€.
3.2 ν¬μΈνΈ(pt) λ¨μ
ν¬μΈνΈ λ¨μλ ν
μ€νΈμ ν¬κΈ°λ₯Ό ν¬μΈνΈλ‘ μ§μ νλ λ°©λ²μ
λλ€. ν¬μΈνΈ λ¨μλ μ£Όλ‘ μΈμλ¬Όμ΄λ λ¬Έμμμ μ¬μ©λλ©°, λ³΄λ€ μ λ°ν ν¬κΈ° μ‘°μ μ΄ κ°λ₯ν©λλ€. μλ₯Ό λ€μ΄, font-size: 12pt;
μ κ°μ΄ μ¬μ©νμ¬ ν
μ€νΈμ ν¬κΈ°λ₯Ό 12ptλ‘ μ§μ ν μ μμ΅λλ€. ν¬μΈνΈ λ¨μλ ν½μ
κ³Ό λΉκ΅νμ¬ νλ©΄ ν¬κΈ°μ λ°λΌ ν
μ€νΈμ ν¬κΈ°λ₯Ό μ‘°μ ν μ μμΌλ©°, μΌλ°μ μΌλ‘ μΉ νμ΄μ§λ³΄λ€λ μΈμλ¬Όμ΄λ λ¬Έμμμ μ¬μ©λ©λλ€.
3.3 λ°±λΆμ¨(%) λ¨μ
λ°±λΆμ¨ λ¨μλ ν
μ€νΈμ ν¬κΈ°λ₯Ό κΈ°μ€ μμμ ν¬κΈ°μ λν λΉμ¨λ‘ μ§μ νλ λ°©λ²μ
λλ€. μλ₯Ό λ€μ΄, font-size: 110%;
μ κ°μ΄ μ¬μ©νμ¬ ν
μ€νΈμ ν¬κΈ°λ₯Ό κΈ°μ€ μμμ ν¬κΈ°μ 110%λ‘ μ§μ ν μ μμ΅λλ€. μ΄λ κ² μ§μ λ λ°±λΆμ¨ ν¬κΈ°λ ν
μ€νΈκ° ν¬ν¨λ μμμ ν¬κΈ°μ λ°λΌ μλμ μΌλ‘ μ‘°μ λλ―λ‘, λ°μν μΉ λμμΈμμ μ μ©νκ² μ¬μ©λ μ μμ΅λλ€.
μμ μΈ κ°μ§ ν¬κΈ° μ§μ λ¨μλ₯Ό μ μ ν νμ©νμ¬ ν
μ€νΈλ₯Ό μ½κΈ° μ½κ³ μ λ €νκ² λ§λ€μ΄μ£ΌμΈμ. ν°νΈ ν¬κΈ°λ₯Ό μ‘°μ νκΈ° μν΄μλ ν
μ€νΈλ₯Ό ν¬ν¨νλ μμμ font-size
μμ±μ μ μ©νκ±°λ, CSS μ νμλ₯Ό μ¬μ©νμ¬ νΉμ μμμλ§ μ μν μ μμ΅λλ€.
λ€μ μΉμ μμλ ν°νΈ κ΅΅κΈ°λ₯Ό μ§μ νλ λ°©λ²μ λν΄ μμ보λλ‘ νκ² μ΅λλ€.
4. ν°νΈ κ΅΅κΈ° μ§μ
ν°νΈ κ΅΅κΈ°λ ν μ€νΈμ κ΅΅κΈ°λ₯Ό μ§μ νλ ν°νΈ μμ±μ λλ€. ν°νΈ κ΅΅κΈ°λ ν μ€νΈλ₯Ό κ°μ‘°νκ±°λ μκ°μ μΈ ν¨κ³Όλ₯Ό λΆμ¬νλ λ° μ¬μ©λ©λλ€. λ€μν κ°λ€μ μ΄μ©νμ¬ ν μ€νΈλ₯Ό μνλ κ΅΅κΈ°λ‘ νμν μ μμ΅λλ€.
4.1 νμ€ κ°
ν°νΈ κ΅΅κΈ°μ νμ€ κ°μ normal
κ³Ό bold
μ
λλ€. normal
κ°μ ν
μ€νΈλ₯Ό μΌλ°μ μΈ κ΅΅κΈ°λ‘ νμνκ³ , bold
κ°μ ν
μ€νΈλ₯Ό κ΅΅κ² νμν©λλ€. μλ₯Ό λ€μ΄, font-weight: normal;
κ³Ό font-weight: bold;
μ κ°μ΄ μ¬μ©νμ¬ κ°κ° μΌλ° ν°νΈ κ΅΅κΈ°μ κ΅΅μ ν°νΈ κ΅΅κΈ°λ₯Ό μ§μ ν μ μμ΅λλ€.
4.2 μ«μ κ°
ν°νΈ κ΅΅κΈ°λ μ«μ κ°μΌλ‘λ μ§μ ν μ μμ΅λλ€. μ«μ κ°μ ν°νΈ κ΅΅κΈ°μ μ λλ₯Ό μ§μ νλ κ°μΌλ‘, μΌλ°μ μΌλ‘ 100λΆν° 900κΉμ§μ λ²μ λ΄μμ μ¬μ©λ©λλ€. μ«μ κ°μ΄ ν΄μλ‘ ν
μ€νΈμ κ΅΅κΈ°κ° κ°μ‘°λ©λλ€. μλ₯Ό λ€μ΄, font-weight: 400;
κ³Ό font-weight: 700;
κ³Ό κ°μ΄ μ¬μ©νμ¬ κ°κ° μ€κ° ν°νΈ κ΅΅κΈ°μ λ§€μ° κ΅΅μ ν°νΈ κ΅΅κΈ°λ₯Ό μ§μ ν μ μμ΅λλ€.
4.3 μλ κ°
μλ κ°μ bolder
μ lighter
μ κ°μ μλμ μΈ ν°νΈ κ΅΅κΈ°λ₯Ό μ§μ νλ κ°μ
λλ€. bolder
κ°μ ν
μ€νΈλ₯Ό λ κ΅΅κ² νμνκ³ , lighter
κ°μ ν
μ€νΈλ₯Ό λ κ°λκ² νμν©λλ€. μλ₯Ό λ€μ΄, λΆλͺ¨ μμμ ν°νΈ κ΅΅κΈ°κ° bold
μΌ κ²½μ°, font-weight: bolder;
λ₯Ό μ¬μ©νλ©΄ ν
μ€νΈκ° λ κ΅΅κ² νμλ©λλ€.
ν°νΈ κ΅΅κΈ°λ₯Ό μ§μ νκΈ° μν΄μλ ν
μ€νΈλ₯Ό ν¬ν¨νλ μμμ font-weight
μμ±μ μ μ©νκ±°λ, CSS μ νμλ₯Ό μ¬μ©νμ¬ νΉμ μμμλ§ μ μν μ μμ΅λλ€. ν°νΈ κ΅΅κΈ°λ₯Ό μ€μ ν¨μΌλ‘μ¨ ν
μ€νΈλ₯Ό κ°μ‘°νκ±°λ μκ°μ μΈ ν¨κ³Όλ₯Ό λΆμ¬νμ¬ μνλ λμμΈμ ꡬνν μ μμ΅λλ€. λ€μ μΉμ
μμλ ν°νΈ μ€νμΌμ μ§μ νλ λ°©λ²μ λν΄ μμ보λλ‘ νκ² μ΅λλ€.
5. ν°νΈ μ€νμΌ μ§μ
ν°νΈ μ€νμΌμ ν μ€νΈμ μ€νμΌμ μ§μ νλ ν°νΈ μμ±μ λλ€. ν°νΈ μ€νμΌμ ν μ€νΈμ κΈ°μΈκΈ°λ₯Ό μ£Όκ±°λ νΉμ ν μ€νμΌμ λΆμ¬νλ λ° μ¬μ©λ©λλ€. λ€μν κ°λ€μ μ΄μ©νμ¬ ν μ€νΈλ₯Ό μνλ μ€νμΌλ‘ νμν μ μμ΅λλ€.
5.1 νμ€ κ°
ν°νΈ μ€νμΌμ νμ€ κ°μ normal
, italic
, oblique
μ
λλ€. normal
κ°μ ν
μ€νΈλ₯Ό μΌλ°μ μΈ μ€νμΌλ‘ νμνκ³ , italic
κ°μ ν
μ€νΈλ₯Ό μ΄ν€λ¦μ²΄λ‘ νμν©λλ€. oblique
κ°μ κΈ°μΈμ΄μ§ μ€νμΌλ‘ ν
μ€νΈλ₯Ό νμν©λλ€. μλ₯Ό λ€μ΄, font-style: normal;
, font-style: italic;
, font-style: oblique;
μ κ°μ΄ μ¬μ©νμ¬ κ°κ° μΌλ° ν°νΈ μ€νμΌ, μ΄ν€λ¦μ²΄ ν°νΈ μ€νμΌ, κΈ°μΈμ΄μ§ ν°νΈ μ€νμΌμ μ§μ ν μ μμ΅λλ€.
5.2 μ¬μ©μ μ μ κ°
ν°νΈ μ€νμΌμ μ¬μ©μ μ μ κ°μΌλ‘λ μ§μ ν μ μμ΅λλ€. μ¬μ©μκ° μ§μ ν°νΈ μ€νμΌμ μ μνμ¬ νΉμ ν μ€νμΌμ λΆμ¬ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, font-style: italic bold;
μ κ°μ΄ μ¬μ©νμ¬ μ΄ν€λ¦μ²΄μ κ΅΅μ μ€νμΌμ λΆμ¬ν μ μμ΅λλ€.
ν°νΈ μ€νμΌμ μ§μ νκΈ° μν΄μλ ν
μ€νΈλ₯Ό ν¬ν¨νλ μμμ font-style
μμ±μ μ μ©νκ±°λ, CSS μ νμλ₯Ό μ¬μ©νμ¬ νΉμ μμμλ§ μ μν μ μμ΅λλ€. ν°νΈ μ€νμΌμ μ€μ ν¨μΌλ‘μ¨ ν
μ€νΈμ νΉμ ν μ€νμΌμ λΆμ¬νμ¬ μνλ λμμΈμ ꡬνν μ μμ΅λλ€. λ€μ μΉμ
μμλ ν
μ€νΈμ μ€ κ°κ²©μ μ§μ νλ λ°©λ²μ λν΄ μμ보λλ‘ νκ² μ΅λλ€.
λκΈ