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 파일
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 |