1. 간격 지정
1) letter-spacing
- 문법
{ letter-spacing: 수치 or normal }2) word-spacing
-문법
{ word-spacing: 수치 or normal }
- 예제
<html>
<head>
<title> spacing </title>
<style type="text/css">
<!--
body { font-size: 15pt; font-weight: bolder }
.text1 { letter-spacing: -5pt }
.text2 { letter-spacing: 10pt }
.text3 { word-spacing: 10pt }
.text4 { word-spacing: 30pt }
-->
</style>
</head>
<body>
<p class="text1"> letter 간격 지정 : text1 class 글자 간격 지정 </p>
<p class="text2"> letter 간격 지정 : test2 class 글자 간격 지정 </p>
<p class="text3"> letter 간격 지정 : test3 class 단어 간격 지정1 </p>
<p class="text4"> letter 간격 지정 : test4 class 단어 간격 지정2 </p>
</body>
</html>
2. 문단 정렬 : text-align
- 문법
{ text-align: left or right or center or justify }① left : 왼쪽 정렬
② right : 오른쪽 정렬
③ center : 가운데 정렬
④ justify : 양쪽 정렬
- 예제
<html>
<head>
<title> text-align </title>
<style type="text/css">
<!--
body { font-size: 15pt; font-weight: bolder }
p { font-family: sans-serif }
.l { text-align: left }
.r { text-align: right }
.c { text-align: center }
.j { text-align: justify }
-->
</style>
</head>
<body>
<p class="l"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
<p class="r"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
<p class="c"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
<p class="j"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
</body>
</html>
3. 줄바꿈을 단어 기준할 것인가? 글자 기준으로 할 것인가? : word-break
- 문법
{ word-break: normal or break-all or keep-all }① normal : CJK 문자는 글자 기준, 나머지는 단어 기준
② break-all : 글자 기준
③ keep-all : 단어 기준
- 예제
<html>
<head>
<title> word-break </title>
<style type="text/css">
<!--
body { font-size: 15pt; font-weight: bolder }
p { font-family: sans-serif; text-align: left }
.letter { word-break: break-all }
.word { text-align: keep-all }
-->
</style>
</head>
<body>
<p class="letter"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
<p class="word"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
</body>
</html>
4. 들여쓰기, 내어쓰기 : text-indent
- 문법
{ text-indent: 길이값(px, em, cm, %) }기본값 : 0
양수 : 들여쓰기
음수 : 내어쓰기 ( 적절한 왼쪽 여백 지정 )
- 예제
<html>
<head>
<title> text-indent </title>
<style type="text/css">
<!--
body { font-size: 15pt }
p { font-family: sans-serif; text-align: left }
.indent1 { text-indent: 30pt }
.indent2 { text-indent: -30pt }
.indent3 { text-indent: -30pt ; margin-left: 30pt }
-->
</style>
</head>
<body>
<p class="indent1"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
<p class="indent2"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
<p class="indent3"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<br>
</body>
</html>
- 첫번째 문장 : 들여쓰기 30pt
- 두번째 문장 : 내어쓰기 30pt
- 세번째 문장 : 내어쓰기 30pt, 왼쪽 여백 30pt
* 왼쪽 여백 : margin-left
{ margin-left: 30pt }
5. 줄 높이 : line-height
- 문법
{ line-height: normal or length or number or percentage }① normal : 웹브라우저에서 정한 기본값 (1 or 2)
② length : 길이로 줄 높이를 정합니다.
③ number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.
④ percentage : 글자 크기의 몇 %로 줄 높이로 정합니다.
- 예제
<html>
<head>
<title> line-height </title>
<style type="text/css">
<!--
body { font-size: 15pt }
p { font-family: sans-serif }
h1 { font-size: 24pt }
.height1 { line-height: normal }
.height2 { line-height: 40px }
.height3 { line-height: 1.7 }
.height4 { line-height: 170% }
.height5 { line-height: 40% }
-->
</style>
</head>
<body>
<h1>line-height: normal </h1>
<p class="height1"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<h1>line-height: 40px </h1>
<p class="height2"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<h1>line-height: 1.7 </h1>
<p class="height3"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<h1>line-height: 170% </h1>
<p class="height4"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
<h1>line-height: 40% </h1>
<p class="height5"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. </p>
</body>
</html>
6. 다단 설정 : columns
- 문법
{ columns : 다단 개수 }
- 예제
<html>
<head>
<title> columns </title>
<style type="text/css">
<!--
body { font-size: 15pt }
p { font-family: sans-serif }
.c1 { columns: 2 }
.c2 { columns: 3 }
-->
</style>
</head>
<body>
<p class="c1"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. / Happiness and misery are not fated but self-sought. </p>
<br>
<p class="c2"> The best preparation for tomorrow is doing tour best today / Enjoy life today. Yesterday is gone & Tomorrow may never come. / Happiness and misery are not fated but self-sought. </p>
</body>
</html>
7. 선으로 텍스트 꾸미기 : text-decoration
글자에 밑줄이나 취소선 등을 넣을 수 있다.
- 문법 * 값 중복 가능
{ text-decoration: none or line-through or overline or underline }① none : 선을 만들지 않는다.
② line-through : 글자 중간에 선을 만든다.
③ overline : 글자 위에 선을 만든다.
④ underline : 글자 아래에 선을 만든다.
- 예제
<html>
<head>
<title> text-decoration </title>
<style type="text/css">
<!--
body { font-size: 15pt }
p { font-family: sans-serif }
.deco1 { text-decoration: line-through }
.deco2 { text-decoration: overline underline }
-->
</style>
</head>
<body>
<p class="deco1"> The best preparation for tomorrow is doing tour best today. </p>
<br>
<p class="deco2"> The best preparation for tomorrow is doing tour best today. </p>
</body>
</html>
8. 대문자 또는 소문자 변환 : text-transform
- 문법
{ text-transform: none or capitalize or uppercase or lowercase }① none : 그대로 출력
② capitalize : 단어의 첫 글자만 대문자
③ uppercase : 모든 글자 대문자
④ lowercase : 모든 글자 소문자
- 예제
<html>
<head>
<title> text-transform </title>
<style type="text/css">
<!--
body { font-size: 15pt }
p { font-family: sans-serif }
.capitalize { text-transform: capitalize }
.upper { text-transform: uppercase }
.lower { text-transform: lowercase }
-->
</style>
</head>
<body>
<p class="capitalize"> The best preparation for tomorrow is doing tour best today. </p>
<br>
<p class="upper"> The best preparation for tomorrow is doing tour best today. </p>
<br>
<p class="lower"> The best preparation for tomorrow is doing tour best today. </p>
</body>
</html>
