Chapter 2-9. 텍스트 꾸미기(CSS)

2025. 3. 31. 10:49·HTML & CSS

📌 CSS 텍스트 꾸미기 완전정복!

텍스트는 웹사이트에서 가장 기본적이고 중요한 콘텐츠입니다. CSS를 활용하면 텍스트의 시각적 표현을 다양하게 꾸밀 수 있습니다. 이번 포스팅에서는 글꼴, 크기, 정렬, 줄 간격 등 다양한 속성으로 텍스트를 꾸미는 방법을 정리해드립니다.


🎨 1. 글꼴 지정: font-family

  • font-family 속성은 텍스트에 적용할 글꼴을 지정합니다.
  • 여러 글꼴을 쉼표로 나열하면, 앞에서부터 순차적으로 적용됩니다.
p {
  font-family: "Nanum Pen", Arial, sans-serif;
}

✅ 웹폰트를 사용하면 시스템에 없는 글꼴도 사용 가능! (ex: Google Fonts)


🖍️ 2. 텍스트 속성 정리 다양한 속성을 활용해 텍스트의 시각적 효과를 극대화할 수 있습니다.

속성명 설명 예시 값

font-size 글자 크기 16px, 1.2rem
font-weight 글자 굵기 normal, bold
line-height 줄 간격 1.5, 24px
text-align 텍스트 정렬 방식 left, center
text-decoration 텍스트 줄긋기 (밑줄 등) underline, none

📐 3. 상대 단위: rem, em CSS에서 텍스트 크기를 지정할 때는 **절대 단위(px)**와 **상대 단위(rem, em)**를 사용할 수 있습니다.

단위 설명

rem 루트 요소(html)의 글자 크기를 기준으로 배수 계산
em 부모 요소의 글자 크기를 기준으로 배수 계산

💡 예시:

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px */
}

 

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible"
        contect="IE=edge"
        >
        
        <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=Single+Day&display=swap" rel="stylesheet">
        <style>
            
            *{
                font-family: "Single Day", Arial, monospace;
            }
            
            html{
                font-size: 8px;
            }

            body{
                font-size: 32px;
            }
        
            #first{
                font-size: 3rem;
                font-weight: 500; /*두께 설정 100~900까지 */
                line-height: 32px;
                text-align: justify; /*(center,justify) */
        
            }

            
        </style>

    </head>
    <body>
       <p id="first">에스프로소와 물을 섞으면 아메리카노가 됩니다.</p>
       <p>에스프로소와 물을 섞으면 아메리카노가 됩니다.</p>
      
    </body>
</html>

✨ 마무리 정리

  • font-family: 글꼴 설정 (웹폰트 가능)
  • font-size: 크기 지정 (px, rem, em 등 단위 활용)
  • text-align: 텍스트 정렬 (left, center 등)
  • line-height: 줄 간격 조절
  • text-decoration: 밑줄, 취소선 등 텍스트 효과

 

CSS를 이용한 텍스트 스타일링은 읽기 쉽고, 감각적인 디자인의 핵심입니다.
지금 바로 연습해 보세요! 🖋️📘

 

 

 

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

Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)+@  (0) 2025.03.31
Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)  (0) 2025.03.31
Chapter 2-8. 색깔을 지정하는 다양한 방법(CSS)  (0) 2025.03.31
Chapter 2-7. 배경 다루기(CSS)  (0) 2025.03.31
Chapter 2-6. 여백다루기(CSS)  (0) 2025.03.31
'HTML & CSS' 카테고리의 다른 글
  • Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)+@
  • Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)
  • Chapter 2-8. 색깔을 지정하는 다양한 방법(CSS)
  • Chapter 2-7. 배경 다루기(CSS)
Chansman
Chansman
안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
  • Chansman
    찬스맨의 프로그래밍 스토리
    Chansman
  • 전체
    오늘
    어제
    • 분류 전체보기 (787)
      • Python (32)
      • 프로젝트 (110)
      • 과제 (25)
      • Database (40)
      • 멘토링 (11)
      • 특강 (37)
      • 기술블로그 (41)
      • 기술블로그-Fastapi편 (33)
      • 기술블로그-Django편 (153)
      • 기술블로그-Flask편 (36)
      • AI 분석 (5)
      • HTML & CSS (31)
      • JavaScript (17)
      • AWS_Cloud (21)
      • 웹스크래핑과 데이터 수집 (14)
      • Flask (42)
      • Django (77)
      • Fastapi (16)
      • 연예 (14)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    btscomeback
    basalcellcarcinoma
    btsreunion
    remittance
    bts
    livebroadcast
    chinanightlife
    life reflection
    btsdischarge
    RM
    travel ban
    classaction
    titaniumcase
    trumpmuskclash
    americanlaw
    college reunions
    chatgpterror
    smartphonedurability
    lawsuitculture
    urbantrends
    newpoliticalparty
    hotcoffeecase
    homebartrend
    americaparty
    global politics
    self-growth
    뷔
    youngprofessionals
    btsjungkook
    gpterror
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Chansman
Chapter 2-9. 텍스트 꾸미기(CSS)

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.