Articles
CSS 소개
텍스트 간격과 관련된 CSS 속성

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

이 기사는 텍스트 간격과 관련된 CSS 속성을 설명합니다.

line-height 및 word-spacing과 같은 속성의 용도와 작성 방법에 대해 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML 생성

css-text-space.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>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

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

line-height 속성 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height는 행 간격(라인 높이)을 설정하는 데 사용되는 CSS 속성입니다. line-height는 줄 간의 세로 공간을 지정하며, 가독성을 높이거나 디자인의 일부로 간격을 조정하는 데 사용됩니다.

line-height의 주요 용도

단위 없는 숫자 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • 글꼴 크기와 상대적인 높이를 지정합니다. 예를 들어, 1.5를 지정하면 줄 간격이 글꼴 크기의 1.5배로 설정됩니다. 이 방법은 반응형 디자인에 유용합니다.
백분율 
1p {
2    line-height: 150%;
3}
  • 줄 높이를 글꼴 크기에 대한 백분율로 지정합니다. 예를 들어, 150%를 지정하면 줄 높이가 글꼴 크기의 150%가 됩니다.
고정 값 (px, em, rem 등) 
1p {
2    line-height: 20px;
3}
  • 줄 높이를 절대 단위로 지정합니다. 예를 들어, 20px과 같이 구체적인 값을 지정할 수 있지만 반응형 디자인에서 유연성이 부족할 수 있습니다.
normal 
1p {
2    line-height: normal;
3}
  • normal을 지정하면 브라우저의 기본 줄 간격 설정이 적용됩니다. 일반적으로 글꼴 크기의 1.2배에서 1.4배 정도가 됩니다.

line-height 사용 예시

읽기 쉬운 단락
  • 가독성을 위해 보통 1.5에서 1.6 사이의 line-height가 권장됩니다. 줄 간격이 너무 좁으면 텍스트가 답답하고 읽기 어렵고, 너무 넓으면 텍스트가 분리된 느낌을 줄 수 있습니다.
헤딩 디자인
  • 텍스트가 더 큰 제목 및 타이틀의 경우에는 줄 간격을 줄일 수 있습니다. 1.1 또는 1.2와 같은 설정이 자주 사용됩니다.

요약

  • **line-height**는 텍스트의 가독성과 디자인을 향상시키는 중요한 속성입니다.
  • 상대값(숫자 또는 백분율)을 사용하면 반응형 디자인에 더 쉽게 적응할 수 있습니다.
  • 큰 텍스트의 제목과 작은 텍스트의 단락 각각에 대해 적절한 줄 간격을 설정하는 것이 중요합니다.

이 속성을 활용하면 텍스트의 가독성을 높이고 디자인 품질을 향상시킬 수 있습니다.

letter-spacing 속성 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing는 문자 간격(문자 스페이싱)을 조정하는 데 사용되는 CSS 속성입니다. 이 속성은 텍스트 디자인을 정리하고 가독성을 높이며 특정 스타일을 구현하는 데 사용할 수 있습니다.

이 예에서는 다음과 같이 지정됩니다.

  • normal: 기본 문자 간격. 브라우저와 글꼴에 의해 결정된 표준 값입니다.
  • 4px: 문자 간격이 넓어진 예. 각 문자 사이에 4픽셀의 간격을 추가합니다.
  • -1px: 문자 간격이 좁아진 예. 각 문자 사이의 간격을 1픽셀 줄입니다.

letter-spacing 사용 방법

단위가 있는 값 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • 양수 값을 설정하면 문자 간격이 증가합니다.
  • 음수 값을 설정하면 문자 간격이 감소합니다.
  • 단위는 일반적으로 px(픽셀) 또는 em입니다.
기본값: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • 기본 글자 간격을 사용하세요. 보통은 글꼴에서 정의된 표준 글자 간격이 적용됩니다.

letter-spacing 사용 예시

  • 가독성 향상: 작은 글꼴 크기나 지나치게 빽빽한 글꼴의 경우 letter-spacing을 늘려 가독성을 향상시킬 수 있습니다.
  • 디자인 조정: 제목이나 로고 같은 디자인 요소를 시각적으로 강조하기 위해 글자 간격을 조정할 수 있습니다.
  • 단어 간 조정: 단어 사이가 아닌 글자 수준에서 간격을 조정할 수 있습니다. letter-spacing은 글자 간격을 조정하지만, 단어 사이의 공간을 넓히려면 word-spacing을 사용하세요.
  • 디자인 균형: 글자 간격을 너무 많이 늘리면 전체 텍스트가 너무 늘어진 것처럼 보일 수 있습니다. 반대로, 간격을 너무 줄이면 텍스트가 답답하고 읽기 어려워질 수 있으므로 적절한 균형을 유지하는 것이 중요합니다.

요약

  • **letter-spacing**은 글자 간의 간격을 조정하여 디자인과 가독성에 모두 영향을 미치는 속성입니다.
  • 양의 값으로 간격을 늘리고 음의 값으로 줄일 수 있습니다.
  • 제목이나 특정 디자인 요소에 효과적이지만, 가독성을 손상시키지 않도록 주의하세요.

이 속성을 사용하여 텍스트의 외관을 조정하고 매력적인 디자인을 얻을 수 있습니다.

word-spacing 속성 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing은 텍스트 내 단어 사이의 간격을 제어하는 CSS 속성입니다. 이 속성을 적절히 사용하면 시각적 균형과 텍스트 가독성을 향상시킬 수 있습니다. word-spacing은 타이포그래피에 중점을 둔 디자인 및 반응형 디자인 시나리오에서 특히 유용합니다.

이 예에서는 다음과 같이 지정됩니다.

  • normal: 기본 단어 간격을 적용합니다. 이는 브라우저의 초기 값입니다.
  • 4px: 단어 간격이 증가한 예시. 각 단어 사이에 4픽셀의 여백을 추가합니다.
  • -1px: 단어 간격이 감소한 예시. 각 단어 사이의 간격을 1픽셀 줄입니다.
  • 단어와 글자 사이 간격: 줄어든 단어와 글자 사이 간격의 예. 단어 사이의 간격은 일반보다 0.1em, 글자 사이의 간격은 0.05em 줄어듭니다.

양수 및 음수 값 사용하기

단어 간격에 양의 값을 설정하면 단어 사이의 간격이 확장됩니다. 반면에 음수 값을 사용하면 단어 사이의 간격이 좁아집니다. 음수 값은 시각적 효과를 강조하거나 특정 디자인 목적으로 문자 간격을 좁히는 데 사용할 수 있습니다.

letter-spacing과의 차이

word-spacing는 단어 간의 간격을 조정하고, letter-spacing는 문자 간의 간격을 조정하는 속성입니다. 이 속성들을 결합하여 텍스트 전체의 타이포그래피를 더 정밀하게 제어할 수 있습니다.

주의사항 및 모범 사례

  • 과도한 간격 조정: word-spacing의 과도한 사용은 가독성을 감소시킬 수 있습니다. 특히 간격이 너무 크거나 너무 작으면 사용자에게 스트레스를 줄 수 있으므로 적절한 조정이 중요합니다.
  • 반응형 디자인: em 또는 rem을 사용하여 상대 값을 지정하면 다양한 화면 크기에서 올바르게 표시되므로 반응형 디자인에 효과적입니다.
  • 헤딩 스타일 조정: 헤딩 텍스트에서 단어 간의 간격을 넓히면 시각적 강조를 추가할 수 있습니다. 이를 통해 콘텐츠 계층을 명확히 하고 세련된 디자인을 구현할 수 있습니다.

word-break 속성 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break는 텍스트가 컨테이너의 너비를 초과할 때 텍스트 줄바꿈 방식을 제어하는 CSS 속성입니다. 일반적으로 브라우저는 단어 경계에서 줄을 나누지만, 긴 단어나 URL이 있을 경우 특정 설정으로 외형과 가독성을 개선할 수 있습니다.

word-break 속성에 대해 다음 값을 지정할 수 있습니다.

  • normal

    normal은 기본값입니다. 단어가 컨테이너 너비를 초과하면 단어 경계에서 줄이 나뉩니다. 이 설정은 영어와 같은 언어에서 일반적이며, 단어 중간에서는 줄바꿈이 발생하지 않습니다.

  • break-all

    break-all은 필요에 따라 모든 문자 뒤에서 줄바꿈을 허용하는 설정입니다. 특히 긴 단어나 URL이 포함된 경우, 레이아웃이 깨지는 것을 방지하기 위해 문자 수준에서 줄바꿈이 발생합니다.

  • keep-all

    keep-all은 주로 일본어, 중국어, 한국어 등 아시아 언어에 사용되는 설정입니다. 이 설정에서는 단어 전체가 유지되며, 단어 중간에서 줄바꿈이 발생하지 않습니다. 그러나 영어처럼 공백으로 단어를 구분하는 언어의 경우, 일반적인 단어 경계 줄바꿈이 적용됩니다.

이 예제는 세 가지 다른 word-break 설정을 보여줍니다. word-break-normal에서는 단어 전체가 유지되며, 컨테이너 너비를 초과할 경우 단어 경계에서 줄바꿈이 발생합니다. word-break-break-all에서는 단어 중간에서도 줄바꿈이 발생합니다. word-break-keep-all은 일본어 같은 아시아 언어에서 자연스러운 줄바꿈을, 영어에서는 단어 경계 줄바꿈을 허용합니다.

word-break 적용 시나리오

모바일 장치 및 반응형 디자인 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

모바일 기기에서는 화면 너비가 제한되어 있어 URL이나 긴 단어를 포함한 텍스트가 화면 너비를 초과할 수 있습니다. 이러한 경우, word-break: break-all;을 적용하면 문자 수준에서 줄바꿈이 이루어져 화면 너비에 맞게 되어 가독성이 향상됩니다.

hyphens 속성 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • hyphens 속성은 CSS에서 텍스트 줄바꿈 시 단어를 하이픈으로 나누는 방식을 지정하는 데 사용됩니다. 이 속성을 적절하게 설정하면 텍스트의 가독성과 외형을 개선할 수 있습니다. 하이픈 적용은 특히 긴 단어를 줄바꿈해야 할 때 유용합니다.

  • 하이픈 규칙은 언어마다 다르기 때문에 이 속성은 텍스트의 로케일에 따라 달라집니다.

문법 

1element {
2    hyphens: none | manual | auto;
3}

hyphens 속성은 다음 값으로 설정할 수 있습니다:.

  • none: 하이픈이 적용되지 않습니다. 단어는 일반적으로 단어 끝에서만 줄바꿈됩니다.
  • manual: 하이픈이 수동으로 적용됩니다. 이 경우, HTML 내에서 하이픈 지점을 수동으로 지정해야 합니다. 예를 들어, &shy; (소프트 하이픈)을 사용할 수 있습니다.
  • auto: 브라우저가 적절한 위치에 자동으로 하이픈을 적용합니다. 이 경우, 문서의 언어(lang 속성)가 정확하게 지정되어야 합니다.

노트

  • 언어 설정의 중요성: hyphens: auto;를 사용할 때, 올바른 하이픈 적용을 위해 HTML 문서의 lang 속성이 올바르게 설정되어야 합니다.
  • 폰트 의존성: 일부 폰트는 하이픈 적용에 적합하지 않을 수 있습니다.
  • 하이픈 사전 사용: 하이픈 규칙은 브라우저가 사용하는 사전에 따라 달라집니다. 따라서 일부 언어에서는 예상대로 작동하지 않을 수 있습니다.

요약

hyphens 속성을 적절히 활용하면 텍스트 레이아웃을 크게 개선할 수 있습니다. 특히 다국어 웹사이트와 모바일 친화적 디자인에서는 auto와 manual을 적절히 사용함으로써 사용자 경험을 향상시킬 수 있습니다.

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

YouTube Video

텍스트 관련 CSS 속성코드 표시 및 인용을 위한 CSS 속성