CSS / Tutorial / 표 꾸미기 / 정렬
표와 관련된 정렬
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다.
- 표(table) : 왼쪽 정렬
- 제목 셀(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로 정합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
</style>
- 표를 오른쪽 정렬할 때는 float 속성을 사용합니다. 속성값을 right로 정합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
float: right;
}
</style>
셀 안의 내용 가로 정렬
- 셀 안의 내용 가로 정렬은 text-align 속성을 사용합니다. 왼쪽 정렬은 left, 가운데 정렬은 center, 오른쪽 정렬은 right가 속성값입니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
}
th {
text-align: left;
}
td {
text-align: right;
}
</style>
셀 안의 내용 세로 정렬
- 셀 안의 내용 세로 정렬은 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>
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 과 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다.
CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.