• 고객센터
  • ★ 웹 무료강의

★ 웹 무료강의

고객센터공지사항자료실★ 웹 무료강의추천유튜브강의

모던DS 웹에이전시

웹 무료강의 | 프론트엔드 강의

CSS CSS Font 관련 속성

페이지 정보

profile_image
작성자 모던DS
조회 2회 작성일 26-02-26 00:17

본문



CSS Font 관련 속성


1. font-family (글꼴 종류)

  • 설명: 웹 문서에서 사용할 글꼴을 지정합니다.

  • 폴백(Fallback) 설정: 사용자의 컴퓨터에 글꼴이 없을 경우를 대비해 여러 개를 나열합니다.

  • 작성법: font-family: "나눔고딕", "맑은 고딕", sans-serif;

    • 글꼴 이름에 공백이 있으면 반드시 따옴표("")로 감싸야 합니다.

    • 마지막에는 반드시 기본 글꼴군(Generic Family)을 적어줍니다. (serif, sans-serif, monospace 등)


2. font-size (글자 크기)

  • 단위 선택:

    • px: 절대 단위 (고정 크기) - 예) font-size:40px;

    • em: 부모 요소의 글자 크기 기준 상대 단위 - 예) font-size:1.5em;

    • rem: 최상위 요소(<html>) 기준 상대 단위 (반응형 웹 권장) - 예) font-size:1.5rem;


3. font-weight (글자 굵기)

  • 글자의 굵기를 조절할 때 사용하며, 다음과 같은 속성값들을 가집니다.

    • normal: 기본값이며 보통 굵기로 표시합니다.

    • bold: 글자를 굵게 표시합니다.

    • bolder: 현재 부모 요소의 굵기보다 더 굵게 표시합니다.

    • lighter: 현재 부모 요소의 굵기보다 더 가늘게 표시합니다.

    • 100 ~ 900: 굵기를 숫자로 정밀하게 표현합니다.

      • 100: 가장 가늘게

      • 900: 가장 굵게


4. font-style (글자 스타일)

  • normal: 기본 형태

  • italic: 이탤릭체 (글꼴 자체에 디자인된 기울임꼴 사용)

  • oblique: 사선체 (원래 글자를 물리적으로 비스듬히 기울임)

    • Tip: oblique는 특정 각도(예: oblique 20deg)를 지정할 수 있는 세밀함이 있습니다.


5. font-variant (작은 대문자)

  • 속성: small-caps

  • 설명: 영문 소문자를 크기가 작은 대문자 형태로 변환합니다. 제목 디자인 시 유용합니다.


6. line-height (줄 간격)

  • 설명: 텍스트 줄 사이의 수직 간격을 조절합니다.

  • 권장: 단위 없이 숫자만 쓰는 방식 (예: line-height: 1.5;)이 글자 크기에 비례하여 조절되므로 가장 안전합니다.


7. font-stretch (장평/너비)

  • 설명: 글자의 가로 폭을 늘리거나 줄입니다. (condensed, expanded 등)

  • 주의: 글꼴 자체가 이 기능을 지원해야만 효과가 나타납니다.


8. font 축약 속성 (Shorthand)

여러 속성을 한 줄로 줄여 쓸 때 사용하는 방식입니다. 순서가 매우 중요합니다.

font: [style] [variant] [weight] [stretch] [size]/[line-height] [family];

  • 예시: font: italic bold 16px/1.5 "Arial", sans-serif;

  • 필수 포함: size와 family는 생략하면 속성 자체가 무시됩니다.


 텍스트 디자인 심화 


1. color (글자 색상) ★ 중요

  • 설명: 텍스트의 색상을 지정합니다. font-color가 아닌 color 속성을 사용하는 것이 핵심입니다.

  • 작성법: color: red;, color: #ff0000;, color: rgb(255, 0, 0);


2. text-decoration (텍스트 꾸밈)

글자에 밑줄, 취소선 등을 넣거나 제거할 때 사용합니다.

  • none: 꾸밈 없음 (<a> 태그의 기본 밑줄을 없앨 때 필수로 사용)

  • underline: 밑줄

  • overline: 윗줄

  • line-through: 취소선 (중간 줄)

 f6da24a1423ab7b19980bdad13955e9a_1772038140_2677.png 


3. text-transform (대소문자 변환)

영문 텍스트의 대소문자를 강제로 변경합니다.

  • uppercase: 모든 글자를 대문자로

  • lowercase: 모든 글자를 소문자로

  • capitalize: 단어의 첫 글자만 대문자로


4. letter-spacing & word-spacing (간격)

  • letter-spacing: 글자 사이의 간격(자간)을 조절합니다. (예: -0.05em)

  • word-spacing: 단어와 단어 사이의 간격을 조절합니다.


5. text-shadow (글자 그림자)

글자에 입체감을 주기 위해 그림자를 추가합니다.

  • 형식: text-shadow: 가로거리 세로거리 번짐정도 색상;

  • 예시: text-shadow: 2px 2px 5px rgba(0,0,0,0.3);

f6da24a1423ab7b19980bdad13955e9a_1772037966_2283.png

  <style>
    /* Do it! text-shadow 속성으로 텍스트 그림자 추가하기 */
    .shadow1 {
      color: red;
      text-shadow: 1px 1px black;
    }

    .shadow2 {
      text-shadow: 5px 5px 3px #ffa500;
    }

    .shadow3 {
      color: #fff;
      text-shadow: 7px -7px 20px #000;
    }
  </style>


6. text-align (텍스트 정렬)

텍스트를 가로로 정렬합니다.

  • left / right / center: 왼쪽 / 오른쪽 / 가운데 정렬

  • justify: 양쪽 정렬 (신문 기사처럼 끝 라인을 맞춤)