텍스트 스타일링: 글꼴, 크기, 색상 설정하기
안녕하세요, 여러분! 오늘은 CSS 시리즈 세 번째 포스팅으로, 텍스트 스타일링에 대해 알아보겠습니다. 웹 페이지에서 텍스트는 가장 중요한 요소 중 하나입니다. 텍스트를 어떻게 스타일링하느냐에 따라 사용자 경험이 크게 달라질 수 있습니다. 이번 포스팅에서는 글꼴 설정, 글자 크기, 색상, 정렬, 장식 등 텍스트 스타일링에 필요한 다양한 속성을 살펴보겠습니다.
1. 글꼴 설정 (Font Family)
글꼴 설정은 텍스트의 외형을 결정하는 중요한 요소입니다. CSS에서는 font-family 속성을 사용하여 글꼴을 설정할 수 있습니다. 여러 글꼴을 쉼표로 구분하여 나열하면, 브라우저가 순서대로 글꼴을 적용합니다. 마지막에는 일반적인 글꼴 패밀리를 지정하는 것이 좋습니다.
예시:
body {
font-family: Arial, Helvetica, sans-serif;
}2. 글자 크기 (Font Size)
글자 크기는 font-size 속성을 사용하여 설정합니다. 글자 크기는 픽셀(px), 포인트(pt), em, rem 등 다양한 단위를 사용할 수 있습니다. 일반적으로 px 단위를 많이 사용하지만, em과 rem 단위는 반응형 디자인에 유리합니다.
예시:
h1 {
font-size: 32px;
}
p {
font-size: 16px;
}3. 글자 색상 (Color)
글자 색상은 color 속성을 사용하여 설정합니다. 색상 값은 색상 이름, HEX 값, RGB 값, HSL 값 등을 사용할 수 있습니다.
예시:
h1 {
color: #333;
}
p {
color: rgb(102, 102, 102);
}4. 텍스트 정렬 (Text Alignment)
텍스트 정렬은 text-align 속성을 사용하여 설정합니다. 텍스트를 왼쪽, 오른쪽, 가운데 또는 양쪽 정렬할 수 있습니다.
예시:
h1 {
text-align: center;
}
p {
text-align: justify;
}5. 텍스트 장식 (Text Decoration)
텍스트 장식은 text-decoration 속성을 사용하여 설정합니다. 주로 링크에 밑줄을 추가하거나 제거할 때 사용됩니다.
예시:
a {
text-decoration: none;
}
.del {
text-decoration: line-through;
}6. 텍스트 변환 (Text Transformation)
텍스트 변환은 text-transform 속성을 사용하여 설정합니다. 텍스트를 대문자, 소문자 또는 단어의 첫 글자만 대문자로 변환할 수 있습니다.
예시:
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}7. 글자 간격 (Letter Spacing) 및 단어 간격 (Word Spacing)
글자 간격과 단어 간격은 각각 letter-spacing과 word-spacing 속성을 사용하여 설정할 수 있습니다. 텍스트의 가독성을 높이는 데 유용합니다.
예시:
h1 {
letter-spacing: 2px;
}
p {
word-spacing: 4px;
}8. 줄 높이 (Line Height)
줄 높이는 line-height 속성을 사용하여 설정합니다. 텍스트의 줄 간격을 조절하여 가독성을 높일 수 있습니다.
예시:
p {
line-height: 1.5;
}실습 예제
위에서 배운 내용을 바탕으로 간단한 실습을 해보겠습니다. 아래 코드는 HTML과 CSS를 함께 사용하여 텍스트를 스타일링하는 예제입니다.
HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 스타일링 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>텍스트 스타일링</h1>
<p class="highlight">이 문장은 하이라이트된 문장입니다.</p>
<p>이 문장은 일반 문장입니다.</p>
<a href="#">이 링크는 밑줄이 없습니다.</a>
<p class="uppercase">이 문장은 대문자로 변환됩니다.abcdefg</p>
<p class="capitalize">이 문장은 각 단어의 첫 글자가 대문자로 변환됩니다. hello, word</p>
</body>
</html>CSS 코드 (styles.css):
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 32px;
color: #333;
text-align: center;
letter-spacing: 2px;
}
p {
font-size: 16px;
color: #666;
line-height: 1.5;
text-align: justify;
}
.highlight {
background-color: yellow;
}
a {
text-decoration: none;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}output
마무리
오늘은 CSS를 사용하여 텍스트를 스타일링하는 방법에 대해 알아보았습니다. 글꼴 설정, 글자 크기, 색상, 정렬, 장식, 변환, 간격 및 줄 높이 등 다양한 속성을 통해 텍스트를 멋지게 꾸밀 수 있습니다. 다음 포스팅에서는 박스 모델에 대해 자세히 알아보겠습니다. 기대해 주세요!
여러분의 CSS 학습에 큰 도움이 되길 바라며, 다음 시간에 다시 만나요!
[CSS] 1. CSS 기초 개념 소개
CSS 기초 개념 소개: 웹 스타일링의 시작안녕하세요, 여러분! 오늘부터 시작하는 CSS 시리즈 첫 번째 포스팅에서는 CSS의 기초 개념에 대해 알아보겠습니다. CSS는 웹 페이지의 스타일과 레이아웃을
codeplayground.tistory.com
[CSS] 2. 기본 문법
CSS 기본 문법: 스타일링의 기초 다지기안녕하세요, 여러분! 오늘은 CSS 시리즈 두 번째 포스팅으로, CSS의 기본 문법에 대해 알아보겠습니다. CSS의 기본 문법을 이해하면 웹 페이지를 더 아름답고
codeplayground.tistory.com
'프로그래밍 언어 > CSS' 카테고리의 다른 글
| [CSS] 2. 기본 문법 (0) | 2024.06.10 |
|---|---|
| [CSS] 1. CSS 기초 개념 소개 (0) | 2024.06.10 |
