Articles
CSS 소개
텍스트 관련 CSS 속성

텍스트 관련 CSS 속성

이 문서는 텍스트 관련 CSS 속성에 대해 설명합니다.

text-align, text-decoration, text-transform 속성의 사용법과 작성법을 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML 생성

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

타이포그래피 (텍스트 관련)

text-align 속성 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align은 텍스트와 인라인 요소의 수평 정렬을 지정하는 CSS 속성입니다. 일반적으로 문단이나 제목 텍스트를 왼쪽, 오른쪽, 또는 중앙으로 정렬하는 데 사용됩니다. 웹 페이지 레이아웃 및 텍스트 서식 지정에서 중요한 역할을 합니다.

text-align의 주요 값

left (좌측 정렬) 
1p {
2    text-align: left;
3}
  • left는 텍스트를 왼쪽으로 정렬합니다 (대부분의 언어에서 기본 정렬 방식입니다).
right (우측 정렬) 
1p {
2    text-align: right;
3}
  • right는 텍스트를 오른쪽으로 정렬합니다. 아랍어와 히브리어와 같이 오른쪽에서 왼쪽으로 쓰는 언어에 특히 효과적입니다.
center (중앙 정렬) 
1p {
2    text-align: center;
3}
  • center는 텍스트를 중앙으로 정렬합니다. 제목과 헤딩에 자주 사용됩니다.
justify (양쪽 정렬) 
1p {
2    text-align: justify;
3}
  • justify는 왼쪽과 오른쪽 가장자리를 균등하게 정렬하여 깔끔한 정렬의 인상을 줍니다. 신문이나 잡지 레이아웃에서 사용됩니다.
start (시작 지점 정렬) 
1p {
2    text-align: start;
3}
  • start는 시작 위치를 기준으로 텍스트를 정렬합니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 왼쪽 정렬과 동일하게 동작합니다.
end (끝 지점 정렬) 
1p {
2    text-align: end;
3}
  • end는 끝나는 위치를 기준으로 텍스트를 정렬합니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 오른쪽 정렬과 동일하게 동작합니다.

text-align 사용 및 예제

중앙 정렬을 사용하는 제목
  • 중앙 정렬은 웹 페이지 및 문서의 제목에 자주 사용됩니다. 보기 좋고 시각적으로 균형 잡힌 디자인을 제공합니다.
단락의 왼쪽 또는 오른쪽 정렬
  • 텍스트 문단은 기본적으로 왼쪽 정렬되지만, 특정 디자인에서는 오른쪽 정렬이나 중앙 정렬이 사용될 수 있습니다.
텍스트를 균등하게 맞추기
  • justify를 사용하면 각 텍스트 행이 왼쪽 및 오른쪽 가장자리와 동일하게 정렬됩니다. 신문이나 잡지 스타일의 레이아웃에 유용합니다.

요약

  • **text-align**은 텍스트나 인라인 요소를 수평으로 정렬하는 데 사용되는 CSS 속성입니다.
  • 왼쪽 정렬, 오른쪽 정렬, 중앙 정렬, 양쪽 정렬 등 다양한 레이아웃을 처리할 수 있습니다.
  • 레이아웃과 디자인 목표에 따라 적절한 정렬을 선택하는 것이 읽기 쉽고 아름다운 디자인을 만드는 핵심입니다.

text-align을 사용하여 텍스트 정렬을 디자인의 일부로 효과적으로 활용해보세요.

text-decoration 속성 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration은 텍스트에 밑줄, 윗줄, 취소선 또는 사용자 지정 스타일의 라인을 적용하는 데 사용되는 CSS 속성입니다. 이 속성을 사용하면 텍스트 스타일을 더 장식적이거나 시각적으로 강조할 수 있습니다.

설명:

  • text-decoration-underline 클래스는 텍스트에 밑줄을 표시합니다.
  • text-decoration-overline 클래스는 텍스트 위에 선을 그립니다.
  • text-decoration-line-through 클래스는 텍스트에 취소선을 적용합니다.
  • text-decoration-custom-underline 클래스는 밑줄의 색상, 스타일 및 두께를 사용자 지정하는 예시입니다.

text-decoration의 주요 값

none 
1p {
2    text-decoration: none;
3}
  • none을 지정하면 텍스트에서 모든 장식을 제거합니다. 예를 들어, 링크에서 밑줄을 제거하고 싶을 때 사용됩니다.
underline 
1p {
2    text-decoration: underline;
3}
  • underline을 지정하면 텍스트 아래에 밑줄이 그려집니다. 링크나 강조하고 싶은 부분에 사용할 수 있습니다.
overline 
1p {
2    text-decoration: overline;
3}
  • overline을 지정하면 텍스트 위에 선이 그려집니다. 외형을 변경하거나 특별한 장식을 위해 사용됩니다.
line-through 
1p {
2    text-decoration: line-through;
3}
  • line-through를 지정하면 텍스트를 가로지르는 취소선이 그려집니다. 수정을 나타내기 위해 사용됩니다.
blink（点滅）
  • blink는 텍스트를 깜빡이게 하는 값이지만, 대부분의 브라우저에서 더 이상 지원되지 않기 때문에 실제로 사용되지 않습니다.

text-decoration의 고급 설정

text-decoration은 다음과 같은 세부 설정을 허용합니다:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • text-decoration-color 속성을 사용하면 밑줄이나 취소선의 색상을 지정할 수 있습니다. 기본적으로 텍스트 색상과 일치하지만, 다른 색상을 선택하여 시각적인 포인트를 추가할 수 있습니다.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • text-decoration-style 속성을 사용하면 장식 라인의 스타일을 지정할 수 있습니다. 값은 다음과 같습니다:.
    • solid (기본값, 실선)
    • double (이중선)
    • dotted (점선)
    • dashed (대시선)
    • wavy (물결선)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • text-decoration-thickness 속성을 사용하면 장식 라인의 두께를 지정할 수 있습니다. 예를 들어, 2px 또는 0.1em과 같은 단위를 사용하여 조정할 수 있습니다.

요약:

  • **text-decoration**은 텍스트에 밑줄이나 취소선과 같은 장식 라인을 추가하는 속성입니다.
  • text-decoration-color, text-decoration-style, text-decoration-thickness를 사용하면 더 세부적인 사용자 지정을 할 수 있습니다.
  • 링크나 중요한 텍스트를 강조하거나 디자인 요소로 자주 사용됩니다.

text-decoration을 사용하여 텍스트에 은은한 강조나 포인트를 추가할 수 있습니다.

text-transform 속성 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform은 텍스트의 대소문자를 변환하는 CSS 속성입니다. 이 속성은 HTML에서 지정된 텍스트의 표시 형식을 제어하며, 사용자 입력 텍스트나 기존 텍스트의 대소문자를 자동으로 변환할 수 있습니다.

설명:

  • text-transform-none 클래스는 원래 텍스트를 변경하지 않고 표시합니다.
  • text-transform-capitalize 클래스는 각 단어의 첫 글자를 대문자로 변환합니다.
  • text-transform-uppercase 클래스는 전체 텍스트를 대문자로 변환합니다.
  • text-transform-lowercase 클래스는 전체 텍스트를 소문자로 변환합니다.

text-transform의 주요 값

none 
1p {
2    text-transform: none;
3}
  • none을 지정하면 텍스트를 변경하지 않습니다.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • capitalize를 지정하면 각 단어의 첫 글자가 대문자로 변환됩니다. 단어 경계는 공백이나 구두점으로 인식됩니다.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • uppercase를 지정하면 전체 텍스트가 대문자로 변환됩니다.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • lowercase를 지정하면 전체 텍스트가 소문자로 변환됩니다.
full-width
  • full-width를 지정하면 텍스트가 전각 문자로 변환됩니다. 이는 주로 한자나 가나를 다룰 때 특수 스타일로 사용되지만, 이를 지원하는 브라우저는 거의 없습니다.

요약:

  • **text-transform**은 텍스트의 대소문자를 변경하는 편리한 CSS 속성입니다.
  • 이는 주로 헤딩, 네비게이션 메뉴, 폼 텍스트의 시각적 일관성을 제공하기 위해 사용됩니다.
  • 사용자 입력과 상관없이 특정 스타일로 텍스트를 표시하고 싶을 때 유용합니다.

이 속성을 사용하면 시각적 일관성을 유지하면서 텍스트를 쉽게 조작할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

글꼴 관련 CSS 속성텍스트 간격과 관련된 CSS 속성