[CSS] 02-3 문단 스타일

1. direction 속성 – 글자 쓰기 방향 지정하기

① 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지를 결정

② 기본형 :

direction : ltl | rtl

③ 사용 가능한 속성 값

2. text-align 속성 – 텍스트 정렬하기

① 문단의 텍스트 정렬 방법 지정

② 기본형 :

text-align : start | end | left | right | center | justify | match-parent

③ 사용 가능한 속성 값

<예제 – text-align-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 정렬</title>
    <style>
        p {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
        .align-left {
            text-align: left;
        }
        .align-right {
            text-align: right;
        }
        .align-center {
            text-align: center;
        }
        .align-justify {
            text-align: justify;
            text-justify: inter-word;
        }
    </style>
</head>
<body>
    <!--p.align-left*4-->
    <!--텍스트 왼쪽 정렬-->
    <p class="align-left">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
    <!--텍스트 오른쪽 정렬-->
    <p class="align-right">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
    <!--텍스트 중앙 정렬-->
    <p class="align-center">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
    <!--텍스트 양쪽 끝에 맞춰 정렬-->
    <p style="text-align: justify;" class="align-justify">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
</body>
</html>

3. text-justify 속성 – 정렬 시 공백 조절하기

① text-align=“justify”일 경우 글자와 단어 사이의 간격 조절

② 기본형 :

text-justify : auto | none | inter=word | distribute

③ 사용 가능한 속성 값

4. text-indent 속성 – 텍스트 들여 쓰기

① 문단의 첫 글자를 얼마나 들여 쓸지 지정

② 기본형 :

text-indent : <크기> | <백분율>

③ 사용 가능한 속성 값

<예제 – text-indent-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 들여쓰기</title>
    <style>
        p {
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .indent1 {
            text-indent: 15px;
        }
        .indent2 {
            text-indent: 5%;
        }
    </style>
</head>
<body>
    <!--p.align-left*3-->
    <p>
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
    <p class="indent1">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
    <p class="indent2">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
</body>
</html>

5. line-height 속성 – 줄 간격 조절하기

① 원하는 만큼 줄 간격을 조절할 때 사용

② <숫자>와 <백분율>은 부모 요소를 기준으로 몇 배인지 지정

③ 보통 글자 크기의 1.5~2배 정도면 적당

④ 기본형 :

line-height : normal | <숫자> | <크기> | <백분율> | inherit

<예제 – line-height-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>줄간격 조절</title>
    <style>
        p {
            font-size: 15px;
            border: 1px solid gray;
            padding: 10px;
        }
        .big-line {
            line-height: 2; /* 글자 크기 2배만큼의 줄간격*/
        }
        .small-line {
            line-height: 0.7; /* 글자 크기 0.7배만큼의 줄간격*/
        }
    </style>
</head>
<body>
    <!--p.align-left*3-->
    <p>
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
    <p class="big-line">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
    <p class="small-line">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
</body>
</html>

6. text-overflow 속성 – 넘치는 텍스트 표기하기

① 지정한 영역을 벗어나는 텍스트를 어떻게 처리할지 결정

② overflow 속성 값이 hidden, scroll, auto이면서 white-space: nowrap일 때만 적용 가능

③ 기본형 :

text-overflow : clip ellipsis

④ 사용 가능한 속성 값

<예제 – text-overflow-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 넘침 조절</title>
    <style>
        .content {
            border: 1px solid #ccc; /* 테두리 */
            width: 300px; /* 단락의 너비 */
            white-space: nowrap; /* 줄바꿈 없음 */
            overflow: hidden; /* 넘치는 부분 감춤 */
            text-overflow: ellipsis; /* 말줄임표 */
            /*text-overflow: clip; /* 그냥 잘라버림 */
        }
        .content:hover {
            overflow: visible;
        }
    </style>
</head>
<body>
    <p class="content">
        Integer elementum massa at nulla placerat varius.
        Suspendisse in libero risus, in interdum massa.
        Vestibulum ac leo vitae metus faucibus gravida ac in neque.
        Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
</body>
</html>

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 03-1 웹에서 색상 표현하기 (0)	2021.09.05
[CSS] 02-4 목록과 링크 스타일 (0)	2021.09.05
[CSS]02-2 텍스트 스타일 (0)	2021.09.05
[CSS] 02-1 글꼴 관련 스타일 (0)	2021.09.05
[CSS] 01-5 CSS3와 CSS 모듈 (0)	2021.09.05