8.5 셀 내부 정렬하기
셀 안의 정렬을 보면 기본적으로 좌측(left) 정렬되어 나타나게 되는데 위의 결과에서 보는 것처럼 숫자 형태나 퍼센트 형태는 오른쪽 정렬을 하는 것이 더 보기 좋을 수 있습니다. 이와 같이 셀 내부의 정렬을 하는데 있어 HTML5 이전 버전에서는 수평 정렬에는 align 속성을, 수직 정렬에는 valign 같은 속성을 td 요소에 직접 사용하였는데 HTML5에서는 이 방법보다는 CSS를 이용하여 설정하도록 권장하고 있습니다. 따라서 이를 CSS를 이용하여 설정하는 방법을 소개하면 다음과 같습니다.
<style>
table, th, td{ border: 1px solid
black;}
table th, td{ padding:10px; spacing:5px;}
</style>
메모장으로 “cellspacingandcellpadding.html”을 열고 다음과 같이 코드를 변경합니다.
<title>align, valign 예제</title>
<style>
table,th, td{ border: 1px solid black;}
table th, td{ padding:10px;
spacing:5px;
text-align:right;
vertical-align:bottom
}
</style>
</head>
<body>위에서 CSS의 text-align 속성은 수평 방향에 대해서 오른쪽 정렬을 vertical-align 속성은 바닥(bottom)으로 정렬하도록
합니다.
이제 다른 이름으로 저장을 선택하여 “alignandvalign.html”로 저장합니다. IE9를 통해 결과를 확인하면 다음과 같이 설정한대로 셀 내부의 수평 정렬은 오른쪽으로, 수직 정렬은 바닥(bottom)으로 정렬되어 나타납니다.
참고로 셀 간의
경계선이 이중으로 나타나 있는 것을 변화를 주려면 “table,th, td{ border: 1px solid
black;}” 부분을 “table,th, td{ border: 1px solid black;
border-spacing:0px}”과 같이 해주면 다음과 같은 형태로 나타납니다. 참고하세요.
정리하면 HTML5에서는 table 요소에서 경계를 나타내는 border 속성을 0 또는 1의 값만을 직접 명시하여 사용할 수 있으며 방금 전 여백이나 정렬 외에도 border와 관련된 세세한 설정은 CSS3의 border-style 속성을 이용하도록 권장하고 있으며 이에 대한 설정 방법은 CSS3 부분의 마지막 부분에서 직접 예제를 통해 이해할 수 있도록 구성하였습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 9.2 fieldset, legend 요소 (0) | 2013.07.31 |
|---|---|
| 9. Form-related Elements (0) | 2013.07.31 |
| 8.5 여백 주기 (2) | 2013.07.31 |
| 8.4 셀 합치기 (0) | 2013.07.31 |
| 8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용 (0) | 2013.07.31 |