(8) text-align
- 인라인 요소의 가로정렬을 표시
- 인라인 요소는 텍스트, 이미지, 폼요소
- 스타일은 인라인 요소를 감싸는 "블록" 요소에 작성
- 사용하는 값은 left, center, right, justify를 사용한다.
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>text 스타일</title> <style type="text/css"> *{margin:0; padding: 0;} .align{border:2px solid #333;} .right{text-align: right;} .center{text-align: center;} .justify{text-align: justify;} </style> </head> <body> <h2>text-align</h2> <p class="align left">왼쪽</p> <p class="align right">오른쪽</p> <p class="align center">가운데 정렬</p> <p class="align justify"> 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 </p> </body> </html> |
■ 실행결과1
(9) text-decoration
- 글자장식을 표현한다.
- 사용하는 값은 underline(밑줄), over-line(윗줄), line-throught(취소선)을 사용한다.
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>text 스타일</title> <style type="text/css"> *{margin:0; padding: 0;} .d1{text-decoration: underline;} .d2{text-decoration: overline;} .d3{text-decoration: line-through;} .d4{text-decoration: underline overline;} .d5{text-decoration: none;}/* 적용되지 않음. a태그에 적용해야 함. */ </style> </head> <body> <h2>text-decoration</h2> <ul> <li class="d1">밑줄</li> <li class="d2">윗줄</li> <li class="d3">취소선</li> <li class="d4">밑줄 윗줄 적용하기</li> <li class="d5"><a href="#">없음</a></li> </ul> </body> </html> |
■ 실행결과2
(10) text-transform
- 소문자, 대문자 변환을 표현하며 영문에 적용
- 사용하는 값은 uppercase(대문자), lowercase(소문자) capitalize(첫글자만 대문자) 등이 있다.
■ 예시3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>text 스타일</title> <style type="text/css"> *{margin:0; padding: 0;} .t1{text-transform: uppercase;} .t2{text-transform: lowercase;} .t3{text-transform: capitalize;} </style> </head> <body> <h2>text-transform</h2> <ul> <li class="t1">uppercase</li> <li class="t2">LOWERCASE</li> <li class="t3">hypertext markup language</li> </ul> </body> </html> |
■ 실행결과3
(11) text-indent
- 들여쓰기 및 내어쓰기를 표현하며 양수값은 들여쓰기, 음수값은 내어쓰기를 한다.
- text-indent를 이용하는 경우는 주로 음수값 -9999px을 이용하여 스크린에서 텍스트를 감출 때 많이 사용한다.
■ 예시4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>text 스타일</title> <style type="text/css"> *{margin:0; padding: 0;} .indent{border: 2px solid #000;} .i1{text-indent: 100px;} .i2{text-indent: -30px;} .i3{text-indent: -9999px;} </style> </head> <body> <h2>text-indent</h2> <p class="indent i1">들여쓰기</p> <p class="indent i2">내어쓰기</p> <p class="indent i3">감추기</p> </body> </html> |
■ 실행결과4
(12) letter-spacing(자간), word-spacing
- 글자 및 단어 사이의 간격을 제어
- 음수 양수값을 입력하여 간격제어
■ 예시5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>text 스타일</title> <style type="text/css"> *{margin:0; padding: 0;} .s1{letter-spacing: 20px;} .s2{word-spacing: 30px;} </style> </head> <body> <h2>letter-spacing(자간), word-spacing</h2> <p class="s1">letter-spacing</p> <p class="s2">word spacing word spacing</p> </body> </html> |
■ 실행결과5
(13) vertical-align
- 인라인 요소끼리의 수직위치 정렬 표현
- 사용하는 값은 baseline, top, middle, bottom 등이 있음
- 스타일은 블록요소 안의 인라인 요소에 적용
■ 예시6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>text 스타일</title> <style type="text/css"> *{margin:0; padding: 0;} .vertical{background-color: #ccc; height: 50px; line-height: 50px; font-size: 30px;} .vertical .v1{vertical-align: middle;} .vertical1{border: 2px solid #000; height: 100px;} .vertical1 img{vertical-align: middle;} </style> </head> <body> <h2>vertical-align</h2> <p class="vertical"> <input type="checkbox" value="로그인 상태유지" class="v1"/> 로그인 상태유지 </p> <p class="vertical1"><img src="img1.png" alt=""/>텍스트</p> </body> </html> |
■ 실행결과6
※ vertical-align: middle; 을 사용한 경우, 이미지와 텍스트를 한 줄로 예쁘게 맞출 수가 있습니다. (미세하게 텍스트가 위로 붙은 거 보이시죠? 아주 미세하게..)
(14) List-style-type
- 목록기호 타입을 바꿀 수 있으며 다양한 기호설정이 가능하다.
- 기본값을 사용하는 경우는 거의 없으며 주로 배경이미지를 이용하여 목록기호를 표시하므로 리스트에서 제공하는 목록기호는 none으로 설정하여 보이지 않게 한다.
- 리스트 설정은 부모요소인 ul, ol 자식요소인 li 둘 중의 어느 곳에 작성하여도 상관없음. 그러나 일반적으로 li에 선언.
■ 예시7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>리스트 스타일</title> <style type="text/css"> ul, ol, li{list-style-type: none;}/* 보통 그룹태그로 선언하여 스타일 적용*/ .aa li{list-style-type: none;} </style> </head> <body> <h2>List-style</h2> <ul class="aa"> <li>list</li> <li>list</li> <li>list</li> </ul> </body> </html> |
※ list-style-type: none; 대신에 list-style: none;으로 써도 똑같이 적용됩니다.