jQuery | javascript | CSS

11.CSS - 정렬관련스타일

Godffs 2009. 7. 28. 16:47
반응형

<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 속성)

텍스트 포맷 관련 스타일
  • letter-spacing : 문자 간격
  • word-spacing : 단어 간격(음수 사용가능)
em (단위) : 해당 범위에서 높이를 1로 하는 단위

<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

반응형