이번 포스트에서는 자주 사용하는 CSS 텍스트 관련 속성들을 정리하고, 더 나아가 자주 쓰이는 추가 스타일링 속성을 배워보겠습니다.
초보자들도 쉽게 따라할 수 있도록 단계별 설명과 함께 예제 코드를 제공하니, 한 줄씩 따라하며 CSS 텍스트 속성을 확실히 익혀보세요.
목차
- 글자 색 변경 (color)
- 글자 크기 설정 (font-size)
- 글꼴 설정 (font-family)
- 글자 굵기 설정 (font-weight)
- 줄 높이 설정 (line-height)
- 텍스트 꾸미기 (text-decoration)
1. 글자 색 변경 (color)
color 속성은 글자의 색상을 지정하는 속성입니다. HTML 요소에 다양한 색상을 적용할 수 있습니다.
<style>
.red {
color: #F23030;
}
.orange {
color: #F28705;
}
.yellow {
color: #F2CB05;
}
</style>
<p class="red">빨강색 텍스트</p>
<p class="orange">주황색 텍스트</p>
<p class="yellow">노랑색 텍스트</p>설명
- .red, .orange, .yellow 클래스에 각각 빨강, 주황, 노랑 색상이 적용됩니다.
- #F23030 같은 값은 16진수 색상 코드입니다.
2. 글자 크기 설정 (font-size)
font-size 속성은 텍스트의 크기를 지정할 때 사용됩니다. 픽셀(px), em, rem, 백분율(%) 등 여러 단위를 사용할 수 있습니다.
<style>
.large {
font-size: 24px;
}
.medium {
font-size: 16px;
}
.small {
font-size: 8px;
}
</style>
<p class="large">큰 텍스트</p>
<p class="medium">중간 텍스트</p>
<p class="small">작은 텍스트</p>설명
- .large 클래스는 24px 크기의 글자를, .medium은 16px, .small은 8px로 설정합니다.
- 웹 페이지의 가독성을 위해 적절한 글자 크기를 선택하는 것이 중요합니다.
3. 글꼴 설정 (font-family)
여러 글꼴을 쉼표로 나열하여, 브라우저가 차례대로 사용 가능한 글꼴을 확인하고 적용합니다.
Google Fonts와 같은 외부 웹폰트를 불러와 사용할 수도 있습니다.
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<style>
#with-poppins {
font-family: Poppins, "Noto Sans KR", sans-serif;
}
#without-poppins {
font-family: "Noto Sans KR", sans-serif;
}
</style>
<p id="with-poppins">Poppins 있는 텍스트</p>
<p id="without-poppins">Poppins 없는 텍스트</p>
</body>
</html>설명
- Poppins, "Noto Sans KR"는 웹폰트로 불러온 글꼴입니다.
- 영문 텍스트는 Poppins로, 한글 텍스트는 Noto Sans KR로 표시됩니다.
- 글꼴 이름에 공백이 있을 경우에는 따옴표로 감싸줘야 합니다.
4. 글자 굵기 설정 (font-weight)
글자의 굵기를 100부터 900까지 100 단위로 조절할 수 있습니다. 기본값은 400이고, bold는 700을 의미합니다.
<style>
.bold {
font-weight: 600;
}
.regular {
font-weight: 400;
}
.light {
font-weight: 200;
}
</style>
<p class="bold">굵은 글자</p>
<p class="regular">보통 굵기의 글자</p>
<p class="light">얇은 글자</p>설명
- .bold는 굵은 글자(600), .regular는 기본 글자(400), .light는 얇은 글자(200)입니다.
- 강조하고 싶은 텍스트는 굵게(bold) 설정하여 시각적 효과를 줄 수 있습니다.
5. 줄 높이 설정 (line-height)
line-height 속성은 텍스트의 줄과 줄 사이 간격을 조절합니다. 기본적으로 글자 크기와 비례하여 설정합니다.
<style>
.loose {
font-size: 16px;
line-height: 1.7; /* 줄 높이: 27.2px */
}
.regular {
font-size: 16px;
line-height: 1.5; /* 줄 높이: 24px */
}
.tight {
font-size: 16px;
line-height: 1; /* 줄 높이: 16px */
}
</style>
<p class="loose">줄 간격이 넓은 텍스트</p>
<p class="regular">보통 줄 간격의 텍스트</p>
<p class="tight">줄 간격이 좁은 텍스트</p>설명
- .loose는 줄 높이가 큰 텍스트, .regular는 일반적인 줄 높이, .tight는 줄 간격이 좁은 텍스트입니다.
- line-height를 적절하게 조절하면 텍스트의 가독성이 향상됩니다.
6. 텍스트 꾸미기 (text-decoration)
텍스트에 밑줄을 넣거나 취소선을 적용할 때 사용하는 속성입니다. 일반적으로 링크에 밑줄을 제거하거나 밑줄을 추가할 때 많이 사용됩니다.
<style>
.none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
</style>
<a class="none" href="#">밑줄 없는 링크</a><br>
<span class="underline">밑줄 텍스트</span><br>
<span class="line-through">취소선 텍스트</span>설명
- .none은 기본 링크 밑줄을 제거할 때 사용됩니다.
- .underline은 밑줄을 추가하고, .line-through는 취소선을 적용합니다.
이 포스트를 통해 CSS의 기본 텍스트 스타일링 속성을 완벽하게 정리하고, 실제 웹 디자인에서 어떻게 활용할 수 있는지 배우게 되었습니다.
텍스트의 색상, 크기, 글꼴, 줄 높이 등 다양한 요소를 조정하여 더 아름답고 가독성 높은 웹 페이지를 만들어 보세요.
구독!! 공감과 댓글,
광고 클릭은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > CSS' 카테고리의 다른 글
| CSS에서 그라디언트 사용법: 초보자를 위한 가이드 (2) | 2024.10.10 |
|---|---|
| CSS에서 background-image 사용 방법 및 옵션 (11) | 2024.10.09 |
| CSS에서 다양한 크기 단위 알아보기: 초보자 가이드 (3) | 2024.10.01 |
| CSS에서 다양한 색상 단위: 초보자 가이드 (3) | 2024.10.01 |
| CSS선택자를 크롬 개발자 도구(DevTools)로 확인하기 (5) | 2024.10.01 |
