반응형
<Table>를 사용하여 정렬에 대해 알아보겠습니다.
<HTML>에서 정렬 관련으로 사용되던 align과 valign를 이용하여 정열했습니다.
| <td align="center">1</td> -> 가운데 정렬 <td align="right" valign="top">3</td> -> 오른쪽 상단 정렬  |
이번에는 CSS의 style을 이용해서 정렬하도록 하겠습니다.
style속성중 line-height 와 vertical-align 이 있습니다.
- line-height : 문자열의 아랫선에서 다음 줄에 있는 문자열의 아랫선까지의 높이
- vertical-align : 한 줄 안에서의 Box 간의 수직 정렬 방식을 정의
- (table의 vertical-align 속성)
텍스트 포맷 관련 스타일
em (단위) : 해당 범위에서 높이를 1로 하는 단위- letter-spacing : 문자 간격
- word-spacing : 단어 간격(음수 사용가능)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table border="1" width="100%" style="width:100%;height:200px;">
<tr>
<td align="center">
1<br />1<br />
</td>
<td style="text-align:center; line-height:200%;">
2<br />2<br />
</td>
</tr>
<tr>
<td align="right" valign="top" style="letter-spacing:0.5em;">33</td>
<td style="text-align:right; vertical-align:bottom;
word-spacing:10em; ">f f</td>
</tr>
</table>
</body>
</html>
11.정렬관련스타일.htm반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 13.CSS - 여백관련 (0) | 2009.07.29 |
|---|---|
| 12.CSS - 텍스트관련 (0) | 2009.07.29 |
| 10.CSS - 폰트관련스타일 (0) | 2009.07.28 |
| 09.CSS - 영역설정 (0) | 2009.07.28 |
| 08.CSS - 중첩태그 (0) | 2009.07.28 |
Comments