[CSS] TEXT 설정 - 2️⃣ 글자 수평 정렬, 단락 들여쓰기, 줄 높이

728x90

SMALL

1. text-align

텍스트 수평 방향 정렬을 설정(left, right, center, justify)

2. text-indent

단락의 첫 줄의 들여쓰기를 설정

3. text-height

줄 높이를 정하는 속성

예)
글자 크기가 40px일 때
line-height: 1.5 ➡ 줄 높이는 40px의 1.5배인 60px ➡ 글자 크기는 40px 이므로 글자 위와 아래에 각각 10px의 여백이 생김 ➡ 만약 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css 텍스트2</title>
    <style>
        p { border: 3px solid palevioletred; padding: 10px; margin: 20px;}

        #align-left {text-align: left;}
        #align-right {text-align: right;}
        #align-center {text-align: center;}
        #align-justify {text-align: justify;}

        #indent1 { text-indent: 20px; }
        #indent2 { text-indent: 5%; } /* 화면의 크기에 따라 유동적이게 됨*/

        .small-line {line-height: 0.7;}
        .big-line {line-height: 3;}
        .px-line {line-height: 30px;}
        .per-line {line-height: 50%;}
    </style>
</head>
<body>
    <h2>css 텍스트2</h2>
    <p id="align-left" class="small-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>
    <p id="align-right" class="big-line"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>
    <p id="align-center" class="px-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>
    <p id="align-justify" class="per-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>
    <p id="indent1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>
    <p id="indent2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deserunt dolore qui eligendi quidem quibusdam unde laborum tenetur doloremque blanditiis iusto consequuntur dicta.</p>

</body>
</html>

📄 HTML 파일

16_css텍스트2.html

0.00MB

728x90

LIST

'Web > CSS' 카테고리의 다른 글

[CSS] TEXT설정 - 4️⃣ 글자 그림자 설정하기 (0)	2023.03.30
[CSS] TEXT 설정 - 3️⃣ 텍스트 효과 지우기, 텍스트 밑줄/텍스트 윗줄/ 텍스트 취소선, 작은 대문자 (0)	2023.03.30
[CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격 (0)	2023.03.30
[CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 (0)	2023.03.30
[CSS] 하이퍼링크 스타일링 설정하는 법 (0)	2023.03.30