HTML CSS JavaScript

CSS font 속성

whs5758 2025. 7. 18. 11:26

1.1. Font 속성이란?

CSS의 font 속성은 텍스트의 모양을 정의하는 데 사용됩니다. 텍스트는 웹 페이지에서 가장 중요한 요소 중 하나로, 적절한 스타일링은 가독성과 디자인에 큰 영향을 미칩니다. 주요 font 관련 속성을 하나씩 살펴보겠습니다.

  • font-family: 글꼴(폰트)을 지정합니다.
    • 예: "Arial", sans-serif (Arial이 없으면 sans-serif로 대체)
    • 웹 안전 폰트(Web Safe Fonts)와 구글 폰트(Google Fonts)를 사용할 수 있습니다.
  • font-size: 텍스트의 크기를 지정합니다.
    • 단위: px, em, rem, % 등
    • 예: 16px, 1.5em
  • font-weight: 텍스트의 두께(굵기)를 지정합니다.
    • 값: normal, bold, 100~900 (100은 얇음, 900은 매우 굵음)
    • 예: font-weight: 700 (bold와 동일)
  • font-style: 텍스트의 스타일을 지정합니다.
    • 값: normal, italic, oblique
    • 예: font-style: italic
  • line-height: 줄 간격(행간)을 지정합니다.
    • 단위: 숫자(배수), px, em 등
    • 예: line-height: 1.5 (폰트 크기의 1.5배)
  • font (단축 속성): 여러 속성을 한 줄로 정의합니다.
    • 순서: font-style font-weight font-size/line-height font-family
    • 예: font: italic 700 16px/1.5 "Arial", sans-serif
.blog-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    color: #666;
  }

웹폰트 사용법

사용자가 PC에 설치된 폰트가 없고, 사용자가 서버에 폰트 파일을 올려놓지 않은 경우에는 폰트를 사용할 수 없습니다.

구글 폰트 (Google Fonts)

  • 구글 폰트 링크: https://fonts.google.com/
  • 사용 방법: 사이트에서 사용하고 싶은 폰트(Black Han Sans)를 선택, Regular 400 + 링크를 복사 후, link 태그로 HTML 파일에 붙여넣기.
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
font-family: 'Black Han Sans', sans-serif;

 

실습 코드 1

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>구글 폰트 적용 예제</title>
  <!-- 구글 폰트 링크 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sunflower:wght@300;500;700&display=swap" rel="stylesheet">
  <style>
    .gaegu {
      font-family: 'Gaegu', sans-serif;
      font-weight: 400;
      font-size: 24px;
    }
    .roboto {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-style: italic;
      font-size: 28px;
    }
    .sunflower {
      font-family: 'Sunflower', sans-serif;
      font-weight: 500;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>나는 기본 폰트야</h1>  
  <!-- 모든 브라우저는 자체적으로 기본 폰트 스택을 가지고 있습니다 -->
  <h1 class="gaegu">안녕! 나는 Gaegu 폰트야</h1>
  <h2 class="roboto">안녕! 나는 Roboto 폰트야</h2>
  <p class="sunflower">안녕! 나는 Sunflower 폰트야</p>
</body>
</html>

2.1. line-height (줄 간격)

  • 설명: line-height는 텍스트 줄 간의 간격(행간)을 설정합니다. 가독성을 높이는 데 중요한 속성입니다.
  • 값:
    • normal: 브라우저 기본값(보통 1.2배).
    • length: px, %, em, rem 등 단위로 지정(예: 32px, 1.5em).
    • number: 폰트 크기의 배수(예: 1.5는 폰트 크기의 1.5배).
p { line-height: 1.5; } /* 폰트 크기의 1.5배로 줄 간격 설정 */

2.2. text-decoration (텍스트 장식)

  • 설명: 텍스트에 밑줄, 취소선, 윗줄 등의 장식을 추가합니다.
  • 값:
    • none: 장식 없음.
    • underline: 밑줄.
    • line-through: 취소선.
    • overline: 윗줄.
    a { text-decoration: underline; } /* 링크에 밑줄 추가 */

2.3. white-space (공백 및 줄 바꿈 처리)

  • 설명 white-space 속성은 텍스트의 공백(스페이스)과 줄 바꿈을 어떻게 처리할지를 설정하는 CSS 속성입니다. 이 속성은 텍스트가 컨테이너 내에서 어떻게 표시되는지를 제어하며, 특히 공백과 줄 바꿈의 동작을 조정합니다.
  • 값:
    • normal: 공백과 줄 바꿈을 기본적으로 처리(여러 공백은 하나로, 줄 바꿈은 자동).
    • nowrap: 줄 바꿈 없이 한 줄로 표시.
    • pre: 공백과 줄 바꿈을 그대로 유지.
    • pre-wrap: 공백과 줄 바꿈을 유지하되, 컨테이너 크기에 따라 줄 바꿈 가능.
    • pre-line: 줄 바꿈은 유지하되, 여러 공백은 하나로 처리.
div { white-space: nowrap; } /* 줄 바꿈 없이 한 줄로 표시 */

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

  • 설명: 텍스트의 수평 정렬을 설정합니다.
  • 값:
    • left: 왼쪽 정렬.
    • right: 오른쪽 정렬.
    • center: 가운데 정렬.
    • justify: 양쪽 정렬.
    h1 { text-align: center; } /* 제목을 가운데 정렬 */

2.5. text-overflow (텍스트 오버플로우 처리)

  • 설명: 텍스트가 컨테이너를 넘칠 때 어떻게 처리할지 설정합니다.
  • 필요 조건:
    1. width 속성으로 컨테이너 크기 지정.
    2. white-space: nowrap;으로 줄 바꿈 방지.
    3. overflow 속성이 visible이 아닌 값(예: hidden).
  • 값:
    • clip: 텍스트를 잘라냄.
    • ellipsis: 넘치는 텍스트를 "..."으로 표시.
p { text-overflow: ellipsis; } /* 넘치는 텍스트를 "..."으로 표시 */

 

실습 예제 1

 

  • 뻬대 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>뉴스 기사 스타일링</title>
  
    
</head>
<body>
  <h1 class="article-title">오늘의 헤드라인 뉴스</h1>
  <h2 class="article-subtitle">세계 곳곳에서 일어난 흥미로운 소식</h2>
  <p class="article-content">
    오늘 아침, 새로운 기술 혁신이 발표되었습니다. 이 기술은 환경 보호에 큰 기여를 할 것으로 기대됩니다. 
    자세한 내용은 <a href="#" class="article-link">여기</a>를 클릭하여 확인하세요. 
    전문가들은 이번 발표가 앞으로의 산업 발전에 큰 영향을 미칠 것이라고 전망하고 있습니다.
  </p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>뉴스 기사 스타일링</title>
  <style>
    body {
      padding: 40px;
      font-family: Arial, sans-serif;
    }
    .article-title {
      font-size: 32px;
      line-height: 1.4; /* 줄 간격 설정 */
      text-align: center; /* 가운데 정렬 */
      margin-bottom: 20px;
    }
    .article-subtitle {
      font-size: 20px;
      line-height: 1.5;
      text-align: center;
      color: #666;
      margin-bottom: 30px;
    }
    .article-content {
      font-size: 16px;
      line-height: 1.8; /* 가독성을 위한 넉넉한 줄 간격 */
      max-width: 700px;
      margin: 0 auto;
    }
    .article-link {
      text-decoration: none; /* 기본 밑줄 제거 */
      color: #007bff;
    }
    .article-link:hover {
      text-decoration: underline; /* 마우스 오버 시 밑줄 추가 */
    }
  </style>
</head>
<body>
  <h1 class="article-title">오늘의 헤드라인 뉴스</h1>
  <h2 class="article-subtitle">세계 곳곳에서 일어난 흥미로운 소식</h2>
  <p class="article-content">
    오늘 아침, 새로운 기술 혁신이 발표되었습니다. 이 기술은 환경 보호에 큰 기여를 할 것으로 기대됩니다. 
    자세한 내용은 <a href="#" class="article-link">여기</a>를 클릭하여 확인하세요. 
    전문가들은 이번 발표가 앞으로의 산업 발전에 큰 영향을 미칠 것이라고 전망하고 있습니다.
  </p>
</body>
</html>

 

실습 예제 2

  • 뼈대 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>채팅 메시지 스타일링</title>
  
</head>
<body>
  <h2>채팅 메시지 스타일링</h2>
  <div class="chat-message message-normal">
    안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈이 됩니다.
  </div>
  <div class="chat-message message-nowrap">
    안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈 없이 "..."로 표시됩니다.
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>채팅 메시지 스타일링</title>
  <style>
    body {
      padding: 40px;
      font-family: Arial, sans-serif;
    }
    .chat-message {
      width: 300px; /* 고정된 너비 */
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
      background-color: #f0f0f0;
      border-radius: 5px;
    }
    .message-normal {
        /* 기본값 */
      white-space: normal; /* 기본 줄 바꿈 */
    }
    .message-nowrap {
       /* ... 처리 */
      white-space: nowrap; /* 줄 바꿈 방지 */
      overflow: hidden; /* 넘치는 부분 숨김 */
      text-overflow: ellipsis; /* "..." 표시 */
      text-align: right;
    }
  </style>
</head>
<body>
  <h2>채팅 메시지 스타일링</h2>
  <div class="chat-message message-normal">
    안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈이 됩니다.
  </div>
  <div class="chat-message message-nowrap">
    안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈 없이 "..."로 표시됩니다.
  </div>
</body>
</html>

 

실습 예제 3

  • 뼈대 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Text-Overflow 실습</title>
  
</head>
<body>
  <h2>Text-Overflow 실습: 채팅 메시지</h2>

  <h3>1. text-overflow: clip (텍스트 잘라냄)</h3>
  <div class="chat-message message-clip">
    안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
  </div>

  <h3>2. text-overflow: ellipsis (넘치는 부분 "..." 표시)</h3>
  <div class="chat-message message-ellipsis">
    안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Text-Overflow 실습</title>
  <style>
    body {
      padding: 40px;
      font-family: Arial, sans-serif;
    }
    /* 채팅 메시지 박스 스타일 */
    .chat-message {
      width: 250px; /* 1. 컨테이너 크기 지정 */
      white-space: nowrap; /* 2. 줄 바꿈 방지 */
      overflow: hidden; /* 3. 넘치는 부분 숨김 */
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 15px;
      background-color: #f0f0f0;
      border-radius: 5px;
    }
    /* text-overflow: clip 적용 */
    .message-clip {
      text-overflow: clip; /* 텍스트를 잘라냄 */
    }
    /* text-overflow: ellipsis 적용 */
    .message-ellipsis {
      text-overflow: ellipsis; /* 넘치는 텍스트를 "..."으로 표시 */
    }
    /* 제목 스타일 */
    h2, h3 {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h2>Text-Overflow 실습: 채팅 메시지</h2>

  <h3>1. text-overflow: clip (텍스트 잘라냄)</h3>
  <div class="chat-message message-clip">
    안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
  </div>

  <h3>2. text-overflow: ellipsis (넘치는 부분 "..." 표시)</h3>
  <div class="chat-message message-ellipsis">
    안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
  </div>
</body>
</html>

'HTML CSS JavaScript' 카테고리의 다른 글

CSS Transition(부드러운 애니메이션 만들기)  (1) 2025.07.18
CSS position 관련 속성(Position, Z-Index, Overflow)  (3) 2025.07.18
CSS block, inline  (0) 2025.07.18
CSS background에 이해  (0) 2025.07.18
CSS 박스 모델에 이해  (1) 2025.07.18

'HTML CSS JavaScript'의 다른글

  • 현재글CSS font 속성

관련글

티스토리툴바