표와 관련된 정렬
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은
- 표 : 왼쪽 정렬
- 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬
- 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬
- 셀 안의 내용 세로 정렬 : 가운데 정렬
입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table, th, td { border: 1px solid #bcbcbc; } table { width: 400px; height: 200px; } </style> </head> <body> <table> <thead> <tr> <th>Lorem</th> <th>Ipsum</th> <th>Dolor</th> </tr> </thead> <tbody> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> </tbody> </table> </body> </html>표 정렬
표를 가운데 정렬할 때는 margin 속성을 사용합니다. 좌우 margin 속성값을 auto로 정합니다.
표를 오른쪽 정렬할 때는 float 속성을 사용합니다. 속성값을 right로 정합니다.
<style> table, th, td { border: 1px solid #bcbcbc; } table { width: 400px; height: 200px; float: right; } </style>셀 안의 내용 가로 정렬
셀 안의 내용 가로 정렬은 text-align 속성을 사용합니다. 왼쪽 정렬은 left, 가운데 정렬은 center, 오른쪽 정렬은 right가 속성값입니다.
셀 안의 내용 세로 정렬
셀 안의 내용 세로 정렬은 vertical-align 속성을 사용합니다. 위쪽 정렬은 top, 가운데 정렬은 middle, 아래쪽 정렬은 bottom이 속성값입니다.
<style> table, th, td { border: 1px solid #bcbcbc; } table { width: 400px; height: 200px; } th { vertical-align: top; } td { vertical-align: bottom; } </style>체크박스와 라벨
체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다.
예제
다음은 높이를 조정하는 간단한 예제입니다.
- 첫 번째 체크박스와 라벨은 아무런 조정을 하지 않은 것입니다. 체크박스가 라벨보다 조금 위에 있습니다.
- 두 번째 체크박스와 라벨은 체크박스를 1.5px 밑으로 내려서 높이를 맞추었습니다.
- 세 번째 체크박스와 라벨은 라벨을 1.5px 위로 올려서 높이를 맞추었습니다.