본문 바로가기
Web/CSS

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

by coding-choonsik 2023. 3. 30.
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