[CSS] 문단 관련 속성

CSS 역시 HTML과 마찬가지로 문장과 문단 관련 속성으로 구분됩니다. 먼저 살펴볼 속성은 문장을 구성하는데 사용되는 속성입니다.

Posted Mar 12, 2022

13 min read

[CSS] 문단 관련 속성

CSS 문단 속성

#01. 문단 및 텍스트 정렬 관련 속성

문단과 텍스트의 정렬 및 배치를 제어하는 속성들로, 문서의 가독성과 시각적 구성에 중요한 역할을 한다.

속성	설명
text-align	텍스트의 수평 정렬 방식 지정 • left(기본값): 왼쪽 정렬 • center: 가운데 정렬 • right: 오른쪽 정렬 • justify: 양쪽 정렬(마지막 줄 제외)
text-indent	문단의 첫 줄 들여쓰기 지정 (px, em 단위) • 양수값: 첫 줄을 오른쪽으로 들여쓰기 • 음수값: 첫 줄을 왼쪽으로 내어쓰기(hanging indent)
text-decoration	텍스트에 장식선 추가 • none(기본값): 장식선 없음 • underline: 밑줄 • overline: 윗줄 • line-through: 취소선 여러 값을 공백으로 구분하여 동시 적용 가능
vertical-align	인라인 요소의 수직 정렬 지정 • baseline(기본값): 베이스라인 정렬 • top: 줄의 맨 위 • middle: 줄의 가운데 • bottom: 줄의 맨 아래 • text-top/text-bottom: 텍스트 기준 정렬
letter-spacing	글자 간격 조정 (px, em 단위) • 양수값: 글자 사이 간격 늘리기 • 음수값: 글자 사이 간격 줄이기 • normal(기본값): 기본 간격
word-spacing	단어 간격 조정 (px, em 단위) • 양수값: 단어 사이 공백 늘리기 • 음수값: 단어 사이 공백 줄이기 • normal(기본값): 기본 공백 크기
white-space	공백과 줄바꿈 처리 방식 지정 • normal(기본값): 연속 공백 합치고 자동 줄바꿈 • nowrap: 줄바꿈 금지 • pre: 공백과 줄바꿈 그대로 유지 • pre-wrap: 공백 유지하며 자동 줄바꿈 • pre-line: 줄바꿈만 유지하고 공백은 합침
text-transform	텍스트 대소문자 변환 • none(기본값): 변환 없음 • capitalize: 각 단어의 첫 글자만 대문자 • uppercase: 모든 글자를 대문자로 • lowercase: 모든 글자를 소문자로

실습: /10-CSS-문단속성/01-문단관련속성.html

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">>
    <title>01-문단관련속성</title>
    <!-- 스타일시트 -->
    <style type="text/css">
        .container {
            font-size: 20px;

            .text1 {
                text-align: center;
            }

            .text2 {
                text-indent: -30px;
            }

            .text3 {
                text-decoration: underline overline line-through;
            }

            .text4 {
                img {
                    vertical-align: middle;
                }
            }

            .text5 {
                letter-spacing: -2px;
                word-spacing: 10px;
            }

            .text6 {
                white-space: nowrap;
            }

            .text7 {
                p {
                    &:nth-child(1) {
                        text-transform: capitalize;
                    }

                    &:nth-child(2) {
                        text-transform: uppercase;
                    }

                    &:nth-child(3) {
                        text-transform: lowercase;
                    }
                }
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="text1">문단 관련 속성 (1)</div>
        <hr />
        <div class="text2">
            문단 관련 속성 (2) <br />
            문단 관련 속성 (2)
        </div>
        <hr />
        <div class="text3">문단 관련 속성 (3)</div>
        <hr />
        <div class="text4">
            <img src="img/sample.png" width="50" alt="시계이미지" />
            문단 관련 속성 (4)
        </div>
        <hr />
        <div class="text5">문단 관련 속성 (5)</div>
        <hr />
        <div class="text6">
            문단 관련 속성 (6)문단 관련 속성 (6)문단 관련 속성 (6)문단 관련 속성
            (6)문단 관련 속성 (6)문단 관련 속성 (6)문단 관련 속성 (6)문단 관련 속성
            (6)문단 관련 속성 (6)문단 관련 속성 (6)
        </div>
        <hr />
        <div class="text7">
            <p>Just for fun</p>
            <p>Just for fun</p>
            <p>Just for fun</p>
        </div>
    </div>
</body>

</html>

#02. 텍스트 줄바꿈 및 말줄임 처리

긴 텍스트나 고정된 너비의 컨테이너에서 텍스트 표시 방식을 제어하는 속성들이다.

1) white-space 속성의 활용

값	설명
normal	연속된 공백을 하나로 합치고, 필요시 줄바꿈 (기본값)
nowrap	연속된 공백을 하나로 합치지만, 줄바꿈하지 않음
pre	연속된 공백과 줄바꿈을 그대로 유지 (HTML의 `<pre>` 태그와 동일)
pre-wrap	연속된 공백과 줄바꿈을 유지하면서 필요시 줄바꿈
pre-line	연속된 공백은 합치지만 줄바꿈은 유지하고 필요시 줄바꿈

2) 말줄임 처리 (Text Ellipsis)

텍스트가 지정된 영역을 벗어날 때 말줄임표(…)로 생략 표시하는 기법

한 줄 말줄임

  
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

여러 줄 말줄임 (웹킷 브라우저)

  
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; /* 표시할 줄 수 */
display: -webkit-box;
-webkit-box-orient: vertical;

실습: /10-CSS-문단속성/02-word_wrap.html

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-word_wrap</title>

    <style type="text/css">
        body {
            font-size: 24px;
            line-height: 150%;
            font-weight: bold;
        }

        p {
            background-color: rgb(172, 250, 228);

            &:nth-child(1) {
                /* 문단 끝에서 줄바꿈함(기본값이므로 명시하지 않아도 됨) */
                white-space: normal;
            }

            &:nth-child(2) {
                /* 줄바꿈 하지 않음(문단 영역을 벗어남) */
                white-space: nowrap;
            }

            &:nth-child(3) {
                /* 한 줄 단위 말줄임 처리 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &:nth-child(4) {
                /* 여러 줄 단위 말줄임 처리 */
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    </style>
</head>

<body>
    <p>
        한국 양궁이 사상 첫 올림픽 금메달 5개 싹쓸이의 대업을 달성했다.
    </p>
    <p>
        김우진(청주시청)은 4일 프랑스 파리에서 열린
        2024 파리 올림픽 양궁 남자 개인전 결승에서 미국의 브레이디 엘리슨을 슛오프 접전 끝에
        6-5(27-29 28-24 27-29 29-27 30-30 <10+-10>)로 물리치고 금메달을 수확했다.
    </p>
    <p>
        앞서 남녀 단체전과 혼성 단체전(혼성전), 여자 개인전에서 금메달을 따낸 한국 양궁은
        이로써 사상 처음으로 올림픽 양궁에 걸린 금메달 5개를 모두 쓸어 담았다.
    </p>
    <p>
        '최강' 한국 양궁이 올림픽 금메달을 독식한 건 금메달 4개가 걸려있던 2016년 리우데자네이루 대회 이후 8년 만이자 사상 두 번째다.
    </p>
</body>

</html>

#03. 텍스트 그림자 효과 (text-shadow)

텍스트에 그림자 효과를 적용하여 시각적 임팩트를 높이는 속성이다.

text-shadow 속성 구문

  
text-shadow: offset-x offset-y blur-radius color;

값	설명
offset-x	그림자의 수평 거리 (양수: 오른쪽, 음수: 왼쪽)
offset-y	그림자의 수직 거리 (양수: 아래쪽, 음수: 위쪽)
blur-radius	그림자의 흐림 정도 (0일 때 선명, 클수록 흐림) - 선택사항
color	그림자 색상

다중 그림자

쉼표(,)로 구분하여 여러 개의 그림자를 동시에 적용할 수 있다.

  
text-shadow: 0 0 4px #ccc,
             0 -5px 4px #ff3,
             2px -10px 6px #fd3,
             2px -19px 18px #f20;

실습: /10-CSS-문단속성/03-textshadow.html

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-textshadow</title>

    <style type="text/css">
        .container {
            font-weight: bold;
            font-size: 80px;
            text-align: center;

            .text1 {
                color: #06f;
                text-shadow: 3px 3px 5px #000;
            }

            .text2 {
                color: #c30;
                text-shadow: -3px -3px 5px #000;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <span class="text1">HTML5 </span> &amp;
        <span class="text2">CSS3</span>
    </div>
</body>

</html>

실습: /10-CSS-문단속성/04-textshadow2.html

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-textshadow2</title>

    <style type="text/css">
        body {
            background-color: #666;
            font-weight: bold;
            font-size: 40px;
            text-align: center;
        }

        .text1 {
            color: #000;
            text-shadow: 0px 1px 1px #fff;
        }

        .text2 {
            color: #fff;
            text-shadow: 0px 1px 1px #000;
        }
    </style>
</head>

<body>
    <p class="text1">HTML5 &amp; CSS3</p>
    <p class="text2">HTML5 &amp; CSS3</p>
</body>

</html>

실습: /10-CSS-문단속성/05-textshadow3.html

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-textshadow3</title>

    <style type="text/css">
        body {
            background-color: #005151;
            font-weight: bold;
            font-size: 40px;
            text-align: center;
        }

        .text1 {
            color: #fff;
            text-shadow: 0px 1px 8px #fff;
        }

        .text2 {
            color: #fff;
            text-shadow: 1px -3px 8px #6f0;
        }

        .text3 {
            color: #000;
            text-shadow: 0px 1px 4px #fff;
        }
    </style>
</head>

<body>
    <p class="text1">HTML5 &amp; CSS3</p>
    <p class="text2">HTML5 &amp; CSS3</p>
    <p class="text3">HTML5 &amp; CSS3</p>
</body>

</html>

실습: /10-CSS-문단속성/06-textshadow4.html

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-textshadow4</title>

    <style type="text/css">
        body {
            background-color: #000;
            font-weight: bold;
            font-size: 40px;
            text-align: center;
        }

        .text1 {
            color: #000;
            background-color: #000;
            text-shadow: 0 0 4px #ccc,
                0 -5px 4px #ff3,
                2px -10px 6px #fd3,
                2px -19px 18px #f20;
        }
    </style>
</head>

<body>
    <p class="text1">HTML5 &amp; CSS3</p>
</body>

</html>

요약

CSS 문단 속성은 텍스트의 배치, 정렬, 장식을 제어하는 중요한 속성들이다:

기본 문단 속성: text-align, text-indent, text-decoration 등으로 텍스트 정렬과 장식을 제어
공백 처리: white-space 속성으로 줄바꿈과 공백 처리 방식을 설정
말줄임 처리: overflow와 text-overflow를 조합하여 긴 텍스트를 생략 표시
텍스트 그림자: text-shadow로 다양한 시각적 효과 연출

이러한 속성들을 적절히 활용하면 웹 페이지의 텍스트를 보다 효과적이고 아름답게 표현할 수 있다.

05.Frontend, HTML&CSS

This post is licensed under CC BY 4.0 by the author.