font 속성

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

font 속성 본문

<style>

font 속성

yo-u-loo 2026. 3. 13. 17:45

🟢 font

웹 페이지의 글꼴 스타일, 크기, 굵기, 줄 높이 등을 설정하는 속성.

🔹 font-family (글꼴 종류)

텍스트에 적용할 글꼴(font)의 종류를 지정하는 속성.

body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
}

문법: 사용자의 컴퓨터에 해당 폰트가 없을 경우를 대비해 여러 개의 후보 글꼴을 쉼표로 구분하여 작성한다.
Generic Family (태그): 마지막에는 일반적인 글꼴 계열을 써서 대체 폰트가 작동하게 한다.
- serif: 끝에 장식이 있는 글꼴.
- sans-serif: 장식이 없는 글꼴.
- monospace: 글자 폭이 동일한 글꼴.
- cursive: 필기체 글꼴.
- fantasy: 장식적인 글꼴.
주의 사항: 글꼴 이름에 공백이 있으면 따옴표 사용. (' ')

🔹 font-size (글자 크기)

텍스트의 크기를 조절하는 속성.

절대 단위 (px(픽셀)): 화면 크기나 부모 요소와 상관없이 고정된 크기.
상대 단위 (rem, em, %): 다른 요소를 기준으로 계산되는 단위.
Viewport 단위 (vw, vh, vmin/vmax): 브라우저 화면 크기 기준.
키워드 단위 ( small, medium, large): CSS에서 미리 정의된 글자 크기.

✅ 추천 방식 (현대 웹 개발) ✅

기본: rem

고정 UI: px

반응형: vw, rem

🔹 font-style (글자 스타일)

텍스트의 기울기를 설정하는 속성.

normal: 기본 글자 스타일. (기본값)
italic: 글자가 오른쪽으로 기울어진 이탈릭체(기울임꼴)로 표시. (강조)
oblique: 기본 글자를 인위적으로 기울인 것으로 폰트에 italic이 없을 때 사용한다.

🔹 font-weight (글자 굵기)

텍스트의 굵기(두께)를 설정하는 속성.

주요 값 (Keyword):
- normal: 기본 글자 굵기.
- bold: 굵은 글씨.
- bolder: 부모 요소보다 더 굵게 표시.
- lighter: 부모 요소보다 더 얇게 표시.
숫자 값:
- 100부터 900까지 100 단위로 세밀하게 조절할 수 있다.
- 400은 normal과 같고, 700은 bold와 유사하다.

🔹 font (폰트 축약 속성)

여러 글자 관련 속성을 한 줄로 설정할 수 있는 축약형 속성.

p {
  font: italic small-caps bold 16px/24px Arial, sans-serif;
}

기본 순서: font-style → font-variant → font-weight → font-size/line-height → font-family (굵은 글씨는 필수 작성)
필수 속성: font-size, font-family (반드시 마지막 부분에 와야한다.)

📍 POINT 📍

✔️ 웹 접근성을 높이기 위해 텍스트의 크기는 px(고정 크기)보다는 rem(사용자 설정에 따라 확대/축소 가능) 사용. ✔️

✔️ 성능 최적화를 위해 웹 폰트(Google Fonts 등) 사용 시 최소한의 font-weight 사용. ✔️

📋 폰트 주요 속성 요약표 📋

속성	설명	주요 값 예시
font-family	서체 지정	"Roboto", sans-serif
font-size	글자 크기	16px, 1.2rem
font-style	기울임 여부	italic, normal
font-weight	굵기 조절	bold, 400, 700

⚙️ 실 전 예제 코드 ⚙️

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    /* 1. 웹 폰트 외부 연결 (예시: 나눔고딕) */
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

    body {
      /* font-family: 기본 서체 설정 (시스템 폰트 -> 샌세리프 순) */
      font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;
      line-height: 1.6;
    }

    .title {
      /* font-size: 상대 단위 rem 사용 (1rem = 보통 16px) */
      font-size: 2.5rem;
      /* font-weight: 숫자로 세밀하게 굵기 지정 */
      font-weight: 800;
      color: #333;
    }

    .subtitle {
      /* font-style: 기울임꼴 적용 */
      font-style: italic;
      font-size: 1.2rem;
      font-weight: 400;
      color: #666;
    }

    .bold-text {
      /* font-weight: 키워드로 굵게 지정 */
      font-weight: bold;
    }

    .shorthand {
      /* font 축약형: [style] [weight] [size] [family] */
      font: italic 700 18px 'Nanum Gothic', sans-serif;
      margin-top: 20px;
      color: royalblue;
    }
  </style>
</head>
<body>

  <h1 class="title">나만의 웹 타이포그래피</h1>
  <p class="subtitle">CSS 폰트 속성을 활용한 스타일링 예제입니다.</p>
  
  <p>이 문장은 일반적인 굵기의 텍스트입니다.</p>
  <p class="bold-text">이 문장은 font-weight: bold가 적용되어 강조되었습니다.</p>
  
  <div class="shorthand">
    축약형 속성(shorthand)을 사용하여 한 줄로 정의한 스타일입니다.
  </div>

</body>
</html>

'<style>' 카테고리의 다른 글

color 속성 (0)	2026.03.17
Web font (0)	2026.03.16
우선순위(Precedence)와 상속(Inheritance) (0)	2026.03.13
Selectors (선택자) 타입 (0)	2026.03.13
CSS와 Style sheet (0)	2026.03.12

'<style>' Related Articles

無제

font 속성 본문

font 속성

🟢 font

'<style>' 카테고리의 다른 글

티스토리툴바