📌 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 |