민혁이의 IT스토리

[혼자 공부해서 개발까지]part7 - 글꼴과 텍스트 스타일링 본문

혼자 공부해서 개발까지/CSS

[혼자 공부해서 개발까지]part7 - 글꼴과 텍스트 스타일링

FE_Minhyuk 2025. 2. 18. 12:00

웹페이지에서 중요하다고 생각되는 부분은 무엇인가요?
저는 글꼴과 텍스트의 알맞은 크기 등이 중요하다고 생각됩니다. 그래서 오늘은 웹페이지에서 텍스트를 자유롭게 스타일링 할 수 있는 방법을 배워보도록 하겠습니다!😊

 

 

목차

  • 글꼴 기본 이해
  • 글꼴 스타일링 기초
  • 웹 폰트 사용하기

 

 

글꼴 기본 이해

웹에서 글꼴을 사용할 때 가장 기본적으로 알아야 할 개념입니다. 글꼴이란 웹페이지에서 텍스트를 표시하는 방식으로, 글자의 모양과 스타일을 정의합니다.

 

웹 폰트란 무엇인가: 웹 폰트는 웹페이지에서 사용하는 폰트로, 사용자가 해당 폰트를 로컬에 설치하지 않아도 서버에서 불러와 사용할 수 있습니다. 

 

 

 

 

글꼴 스타일링 기초

CSS에서는 기본적으로 텍스트의 크기, 두께, 종류, 줄간격 등을 제어할 수 있습니다. 그럼 이것들을 어떻게 제어 할 수 있을지 속성부터 알아보겠습니다.

 

 

글자 크기

속성 : font-size

설명 : 글자 크기는 텍스트의 크기를 설정하는 CSS 속성입니다. 기본적으로 웹에서는 px(픽셀), em, % 등의 단위를 사용해 크기를 지정할 수 있습니다.

 

예시코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>버튼 예시</title>
    <style>
        #after{
            font-size: 30px;
        }
    </style>
</head>
<body>
       <p id="before">before</p>
       <p id="after">after</p>
</body>
</html>

결과 화면

p태그의 기본 크기는 16px이지만 font-size 속성을 이용하면 원하는 크기로 바꿀 수 있습니다

 

 

 

 

줄 간격

속성: line-height

설명: 텍스트의 각 줄 사이의 간격을 조정합니다. line-height를 사용하면 텍스트의 가독성을 높이거나 특정 디자인 효과를 줄 수 있습니다.

 

예시코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Height 예시</title>
    <style>
        .short-line-height {
            line-height: 1.2;
        }
        .medium-line-height {
            line-height: 1.6;
        }
        .large-line-height {
            line-height: 2;
        }
    </style>
</head>
<body>
    <h1>줄 간격(line-height) 예시</h1>
    <p class="short-line-height">이 문장은 줄 간격이 1.2로 설정되어 있습니다.</p>
    <p class="medium-line-height">이 문장은 줄 간격이 1.6으로 설정되어 있습니다.</p>
    <p class="large-line-height">이 문장은 줄 간격이 2로 설정되어 있습니다.</p>
</body>
</html>

 

실행화면

차이가 느껴지시나요?🤨

 

 

 

웹 폰트 사용하기

웹 폰트란?

  •  웹 폰트는 웹사이트에서 사용되는 글꼴을 의미합니다
  •  다양한 디바이스에서 일관된 디자인을 유지할 수 있음.

 

 

 

사용해보기

 

Google Fonts에서 제공하는 폰트를 사용하려면 HTML 파일에 <link> 태그를 추가하고, CSS에서 해당 폰트를 참조하면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts 예시</title>
    <!-- Google Fonts에서 Roboto 폰트 불러오기 -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
        }
        h1 {
            font-size: 2em;
            font-weight: 700; 
        }
        p {
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>웹 폰트 사용 예시</h1>
    <p>이 텍스트는 Google Fonts에서 불러온 'Roboto' 폰트를 사용하여 표시됩니다.</p>
</body>
</html>

 

 

실행화면

 

 

무료폰트를 찾으려면 아래 링크를 클릭해서 찾아보세요

눈누

 

 

 

 

 

 

 

마무리

오늘은 웹페이지에서 가장 많은 비중을 차지하는 폰트를 내 마음대로 제어할 수 있는 속성들에 대해 배워보았습니다. 내용 중 추가적으로 설명이 필요한 부분은 추후에 수정하도록 하겠습니다. 감사합니다.

'혼자 공부해서 개발까지 > CSS' 카테고리의 다른 글

[혼자 공부해서 개발까지]part9 - 테두리와 그림자 효과  (0) 2025.02.25
[혼자 공부해서 개발까지]part8 - 색상과 배경 설정  (0) 2025.02.21
[혼자 공부해서 개발까지] part6 - 스타일의 여백과 크기 설정 &값의 단위  (0) 2025.02.15
[혼자서 공부해서 개발까지] part5 - 웹 페이지 디자인의 첫걸음,CSS 기초  (0) 2025.02.11
'혼자 공부해서 개발까지/CSS' Related Articles more