웹 페이지의 텍스트는 콘텐츠 전달의 핵심입니다. 이 글에서는 CSS를 사용하여 글꼴 설정, 텍스트 정렬, 꾸미기 등 텍스트를 효과적으로 스타일링하는 방법을 알려드립니다. 초보자도 이해하기 쉽도록 실용적인 예제와 함께 설명합니다.
1. CSS로 글꼴 스타일 설정하기
웹 페이지에서 텍스트를 돋보이게 하기 위해 적절한 글꼴과 크기를 설정하는 것은 매우 중요합니다.
글꼴 설정 (font-family)
• font-family 속성을 사용해 텍스트에 사용할 글꼴을 지정합니다.
• 여러 글꼴 이름을 쉼표로 나열하여 대체 글꼴을 설정할 수 있습니다.
p {
font-family: 'Arial', 'Helvetica', sans-serif;
}
예제 설명: 위 코드는 <p> 태그의 글꼴을 Arial로 설정하며, Arial이 없으면 Helvetica를, 그마저 없으면 기본 sans-serif 글꼴을 사용합니다.
글자 크기 설정 (font-size)
• px, em, % 등의 단위를 사용하여 글자 크기를 조절합니다.
h1 {
font-size: 36px;
}
예제 설명: <h1> 태그의 글자 크기를 36px로 설정합니다.
글꼴 굵기 (font-weight)
• 텍스트의 굵기를 조절합니다. 값은 숫자(100~900) 또는 bold, normal로 설정합니다.
h2 {
font-weight: bold;
}
글꼴 스타일 (font-style)
• 텍스트를 기울임체로 만듭니다.
blockquote {
font-style: italic;
}
2. 텍스트 정렬하기
텍스트 정렬은 콘텐츠를 보다 읽기 쉽게 만듭니다.
텍스트 정렬 (text-align)
• text-align 속성으로 텍스트를 좌측, 우측, 중앙 정렬하거나 양쪽 정렬할 수 있습니다.
p {
text-align: center;
}
예제 설명: 모든 <p> 태그의 텍스트를 중앙에 정렬합니다.
줄 간격 (line-height)
• line-height 속성을 사용해 텍스트 줄 간격을 조절합니다.
p {
line-height: 1.6;
}
예제 설명: 줄 간격을 1.6배로 설정해 가독성을 높입니다.
글자 간격 (letter-spacing)
• 텍스트 글자 사이의 간격을 조절합니다.
h1 {
letter-spacing: 2px;
}
예제 설명: <h1> 태그의 글자 사이 간격을 2px로 설정합니다.
3. 텍스트 꾸미기
텍스트에 장식 효과를 추가하면 웹 페이지가 더 매력적으로 보입니다.
텍스트 밑줄, 취소선 (text-decoration)
• text-decoration 속성을 사용해 텍스트에 밑줄, 취소선, 또는 강조선을 추가합니다.
a {
text-decoration: none;
}
예제 설명: 모든 링크에서 밑줄을 제거합니다.
.del {
text-decoration: line-through;
}
예제 설명: 클래스 이름이 del인 텍스트에 취소선을 추가합니다.
텍스트 변환 (text-transform)
• 텍스트를 대문자, 소문자, 또는 단어 첫 글자만 대문자로 변환합니다.
h2 {
text-transform: uppercase;
}
예제 설명: <h2> 태그의 모든 글자를 대문자로 변환합니다.
텍스트 그림자 (text-shadow)
• 텍스트에 그림자 효과를 추가해 강조합니다.
h1 {
text-shadow: 2px 2px 4px gray;
}
예제 설명: 텍스트에 회색 그림자를 추가하여 입체감을 줍니다.
4. 텍스트 스타일링 실전 예제
아래는 간단한 HTML과 CSS로 텍스트 스타일링을 적용한 예제입니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 텍스트 스타일링</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>텍스트 스타일링 예제</h1>
<p class="highlight">이 문장은 강조된 텍스트입니다.</p>
<p>웹 페이지의 텍스트는 스타일링을 통해 돋보이게 만들 수 있습니다.</p>
<a href="#">클릭해 보세요</a>
</body>
</html>
CSS
/* 기본 텍스트 스타일 */
body {
font-family: 'Arial', sans-serif;
line-height: 1.8;
}
/* 제목 스타일 */
h1 {
font-size: 36px;
text-align: center;
text-shadow: 2px 2px 5px gray;
}
/* 강조된 텍스트 */
.highlight {
color: red;
font-weight: bold;
text-transform: uppercase;
}
/* 링크 스타일 */
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline;
}
5. 텍스트 스타일링 팁
1. 가독성에 초점: 텍스트 크기와 줄 간격은 사용자의 읽기 경험에 영향을 줍니다.
2. 적절한 글꼴 선택: 페이지 목적에 맞는 글꼴을 사용하세요. 예: Serif는 신뢰감, Sans-serif는 현대적인 느낌.
3. 일관성 유지: 동일한 스타일링 규칙을 페이지 전반에 적용하세요.
CSS를 사용한 텍스트 스타일링은 단순한 디자인 요소를 넘어 콘텐츠의 가독성과 사용자 경험을 크게 향상시킵니다. 이 글에서 소개한 기법을 활용해 자신만의 독창적인 스타일을 적용해 보세요. 다음 글에서는 CSS로 배경과 색상을 다루는 방법을 알아보겠습니다.
이 글이 유용하셨다면, 댓글과 공유로 다른 분들에게도 알려주세요!
'CSS' 카테고리의 다른 글
| CSS 플렉스박스(Flexbox) 완벽 가이드: 쉽고 빠른 레이아웃 정복 (0) | 2024.12.07 |
|---|---|
| CSS 위치 설정 완벽 가이드: Static, Relative, Absolute, Fixed, Sticky (0) | 2024.12.07 |
| CSS 박스 모델 완벽 정리: 마진, 패딩, 보더를 이해하자 (0) | 2024.12.07 |
| CSS 선택자 완벽 가이드: 태그, 클래스, ID, 그리고 고급 선택자까지 (0) | 2024.12.06 |
| CSS란 무엇인가? 기초부터 배우는 CSS 입문 가이드 (0) | 2024.12.06 |