소개
이 랩에서는 학생들이 웹 타이포그래피와 가독성을 향상시키기 위해 필수적인 CSS 텍스트 스타일링 기술을 탐구합니다. 이 랩은 line-height, text-indent, text-align, letter-spacing, text-decoration 의 다섯 가지 주요 텍스트 속성을 다룹니다. 참가자들은 줄 사이의 수직 간격을 제어하고, 텍스트 들여쓰기를 만들고, 텍스트를 정렬하고, 문자 간격을 조정하고, 장식적인 텍스트 스타일을 적용하는 방법을 배우게 됩니다.
실습 예제와 실용적인 HTML/CSS 데모를 통해 학습자들은 텍스트 모양을 조작하고 웹 콘텐츠의 시각적 표현을 개선하는 실질적인 기술을 습득하게 됩니다. 각 단계는 특정 텍스트 스타일링 속성을 설명하는 명확한 지침과 코드 샘플을 제공하여 학생들이 이러한 기본적인 CSS 텍스트 스타일링 기술을 효과적으로 이해하고 구현할 수 있도록 합니다.
line-height 속성으로 줄 높이 설정
이 단계에서는 CSS line-height 속성을 사용하여 텍스트의 줄 간격을 제어하는 방법을 배우게 됩니다. 줄 간격 (line height) 은 텍스트 줄 사이의 수직 공간으로, 가독성과 텍스트 모양을 크게 향상시킬 수 있습니다.
먼저, 줄 간격 스타일링을 시연하기 위한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 text-style.html이라는 새 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Line Height Example</title>
<style>
.default-text {
/* Default line height */
line-height: normal;
}
.increased-line-height {
/* Increased line height */
line-height: 1.5;
}
.pixel-line-height {
/* Fixed pixel line height */
line-height: 30px;
}
</style>
</head>
<body>
<h1>Line Height Demonstration</h1>
<h2>Default Line Height</h2>
<p class="default-text">
This is a paragraph with default line height. Notice how the lines are
spaced normally.
</p>
<h2>Increased Line Height</h2>
<p class="increased-line-height">
This paragraph uses a line height of 1.5, which provides more space
between lines, making the text easier to read.
</p>
<h2>Fixed Pixel Line Height</h2>
<p class="pixel-line-height">
This paragraph has a fixed line height of 30 pixels. The spacing between
lines is consistent and precisely controlled.
</p>
</body>
</html>
line-height 속성을 자세히 살펴보겠습니다.
normal: 브라우저 기본 줄 간격- 숫자 값 (예: 1.5): 글꼴 크기에 곱해짐
- 픽셀 값 (예: 30px): 픽셀 단위의 고정된 줄 간격
text-indent 로 텍스트 들여쓰기 제어
이 단계에서는 CSS text-indent 속성을 사용하여 텍스트 들여쓰기를 제어하는 방법을 배우게 됩니다. 텍스트 들여쓰기를 사용하면 단락의 시작 부분에 시각적인 간격을 만들어 가독성과 디자인 미학을 향상시킬 수 있습니다.
이전 HTML 파일을 계속 사용해 보겠습니다. WebIDE 에서 text-style.html 파일을 열고 텍스트 들여쓰기를 시연하기 위해 기존 내용을 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text Indentation Example</title>
<style>
.default-indent {
/* Default text with no indentation */
text-indent: 0;
}
.pixel-indent {
/* Fixed pixel indentation */
text-indent: 20px;
}
.percentage-indent {
/* Percentage-based indentation */
text-indent: 5%;
}
</style>
</head>
<body>
<h1>Text Indentation Demonstration</h1>
<h2>Default Text (No Indentation)</h2>
<p class="default-indent">
This paragraph starts at the left margin without any indentation. Notice
how it begins right at the edge of its container.
</p>
<h2>Pixel-based Indentation</h2>
<p class="pixel-indent">
This paragraph has a fixed 20-pixel indentation. The first line is pushed
20 pixels from the left margin.
</p>
<h2>Percentage-based Indentation</h2>
<p class="percentage-indent">
This paragraph uses a 5% indentation, which means the first line is
indented relative to the width of its container.
</p>
</body>
</html>
text-indent 속성은 세 가지 주요 유형의 들여쓰기를 허용합니다.
0: 들여쓰기 없음 (기본값)- 픽셀 값 (예:
20px): 고정된 들여쓰기 - 백분율 값 (예:
5%): 컨테이너 너비에 상대적
text-align 속성을 사용하여 텍스트 정렬
이 단계에서는 CSS text-align 속성을 사용하여 텍스트 정렬을 제어하는 방법을 배우게 됩니다. 텍스트 정렬은 시각적으로 매력적이고 읽기 쉬운 레이아웃을 만드는 데 매우 중요합니다.
다양한 텍스트 정렬 옵션을 시연하기 위해 WebIDE 에서 text-style.html 파일을 계속 수정해 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text Alignment Example</title>
<style>
.left-align {
/* Left-aligned text (default) */
text-align: left;
}
.center-align {
/* Centered text */
text-align: center;
}
.right-align {
/* Right-aligned text */
text-align: right;
}
.justify-align {
/* Justified text */
text-align: justify;
width: 300px;
}
</style>
</head>
<body>
<h1>Text Alignment Demonstration</h1>
<h2>Left-Aligned Text</h2>
<p class="left-align">
This paragraph is aligned to the left margin. This is the default
alignment for most text.
</p>
<h2>Center-Aligned Text</h2>
<p class="center-align">
This paragraph is centered horizontally within its container.
</p>
<h2>Right-Aligned Text</h2>
<p class="right-align">
This paragraph is aligned to the right margin. Notice how it starts from
the right side.
</p>
<h2>Justified Text</h2>
<p class="justify-align">
Justified text stretches to fill the entire width of its container,
creating even edges on both the left and right sides.
</p>
</body>
</html>
text-align 속성은 네 가지 주요 정렬 옵션을 제공합니다.
left: 텍스트를 왼쪽으로 정렬 (기본값)center: 텍스트를 가로로 가운데 정렬right: 텍스트를 오른쪽으로 정렬justify: 텍스트를 컨테이너 너비에 맞춰 늘림
letter-spacing 으로 문자 간격 조정
이 단계에서는 CSS letter-spacing 속성을 사용하여 문자 간격을 제어하는 방법을 배우게 됩니다. 문자 간격을 사용하면 텍스트의 개별 문자 사이의 거리를 조정하여 독특한 타이포그래피 효과를 만들 수 있습니다.
WebIDE 에서 text-style.html 파일을 계속 편집하여 다양한 문자 간격 옵션을 시연해 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Letter Spacing Example</title>
<style>
.default-spacing {
/* Default character spacing */
letter-spacing: normal;
}
.tight-spacing {
/* Negative letter spacing */
letter-spacing: -1px;
}
.wide-spacing {
/* Positive letter spacing */
letter-spacing: 3px;
}
.heading-spacing {
/* Spacing for headings */
letter-spacing: 0.1em;
}
</style>
</head>
<body>
<h1>Letter Spacing Demonstration</h1>
<h2>Default Character Spacing</h2>
<p class="default-spacing">
This paragraph has normal character spacing. Each character is positioned
at its default distance.
</p>
<h2>Tight Character Spacing</h2>
<p class="tight-spacing">
This paragraph uses negative letter spacing, bringing characters closer
together.
</p>
<h2>Wide Character Spacing</h2>
<p class="wide-spacing">
This paragraph has increased letter spacing, spreading characters further
apart.
</p>
<h2>Heading with Subtle Spacing</h2>
<h3 class="heading-spacing">Stylish Heading with Subtle Letter Spacing</h3>
</body>
</html>
letter-spacing 속성은 세 가지 주요 옵션을 제공합니다.
normal: 기본 문자 간격- 음수 값 (예:
-1px): 문자 간격을 좁힘 - 양수 값 (예:
3px): 문자 간격을 늘림
text-decoration 으로 텍스트 꾸미기
이 단계에서는 CSS text-decoration 속성을 사용하여 텍스트에 시각적인 장식을 추가하는 방법을 배우게 됩니다. 텍스트 장식을 사용하면 밑줄, 윗줄 및 기타 스타일 효과를 텍스트에 추가할 수 있습니다.
WebIDE 에서 text-style.html 파일을 계속 편집하여 다양한 텍스트 장식 옵션을 시연해 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text Decoration Example</title>
<style>
.underline-text {
/* Underline text */
text-decoration: underline;
}
.overline-text {
/* Overline text */
text-decoration: overline;
}
.line-through-text {
/* Line through text */
text-decoration: line-through;
}
.multiple-decorations {
/* Multiple text decorations */
text-decoration: underline overline;
}
.colored-decoration {
/* Colored text decoration */
text-decoration: underline;
text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Text Decoration Demonstration</h1>
<h2>Underlined Text</h2>
<p class="underline-text">This paragraph has an underline decoration.</p>
<h2>Overlined Text</h2>
<p class="overline-text">This paragraph has an overline decoration.</p>
<h2>Line-Through Text</h2>
<p class="line-through-text">
This paragraph has a line-through decoration.
</p>
<h2>Multiple Decorations</h2>
<p class="multiple-decorations">
This paragraph has both underline and overline decorations.
</p>
<h2>Colored Decoration</h2>
<p class="colored-decoration">
This paragraph has a red underline decoration.
</p>
</body>
</html>
text-decoration 속성은 여러 가지 옵션을 제공합니다.
underline: 텍스트 아래에 선을 추가합니다.overline: 텍스트 위에 선을 추가합니다.line-through: 텍스트를 가로지르는 선을 추가합니다.- 여러 장식을 결합할 수 있습니다.
- 장식 색상을 사용자 정의할 수 있습니다.
요약
이 랩에서는 참가자들이 다양한 CSS 텍스트 속성을 사용하여 텍스트 스타일을 향상시키는 방법을 배웠습니다. 첫 번째 단계에서는 line-height 속성을 사용하여 줄 높이를 제어하는 데 중점을 두었으며, 텍스트 가독성과 모양을 개선하기 위해 normal, 숫자 곱셈기 및 픽셀 값을 사용하는 등 다양한 기술을 시연했습니다.
이 랩에서는 줄 간격 설정, 텍스트 들여쓰기 제어, 텍스트 정렬, 문자 간격 조정 및 텍스트 장식 추가를 포함하여 텍스트 표현을 조작하는 여러 가지 방법을 탐구했습니다. 이러한 CSS 텍스트 속성을 실습함으로써 학습자들은 시각적으로 더 매력적이고 읽기 쉬운 웹 타이포그래피를 만드는 실질적인 기술을 습득했습니다.
