문단 스타일
- direction
글자쓰기 방향을 지정할 수 있게 해줍니다.rtl, ltr과같은 속성 값이 있습니다.
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <body> <style> #left{ direction:rtl; } </style> <h1 id="left">오른쪽으로 글이 써짐</h1> </body> </html> | cs |
B. text-align
글을 정렬시켜줍니다. 속성 값으로 center, left, right등이 있습니다.
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <body> <style> #cent{ text-align:center; } </style> <h1 id="cent">중앙정렬</h1> </body> </html> | cs |
C. text-justify
정렬시에 공백을 조절하는 역할을 해줍니다. 속성 값으로 auto, inter-word, distribute등이 있습니다.
소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>html문서</title>
</head>
<body>
<style>
#interval{
text-justify:distribute;
}
</style>
<h1 id="interval">정렬할 때 공백조절</h1>
</body>
</html>
D. line-height
여러줄 글을 쓰다보면 간격이 생기는 데 그 간격을 조정할 수 있습니다.(단위나 백분율같은 것으로 조정할 수 있습니다.)
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <body> <style> #height{ line-height:10px; } </style> <h1 id="height">줄간격</h1> </body> </html> | cs |
E. text-indent
글을 쓰다보면 들여쓸 일이 생기는 데 그 때 사용합니다.(위와같이 단위같은 것으로 조정가능합니다.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <body> <style> #indent{ text-indent:10px; } </style> <h1 id="indent">들여쓰기</h1> <\body> </html> | cs |
여기까지 포스팅을 마치도록 하겠습니다.