CSS / Tutorial / 표 꾸미기 / 배경색
목차
배경색을 만드는 속성
- 배경색은 background-color 속성으로 만듭니다.
- table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다.
기본 모양
- 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Lorem</th><th>Ipsum</th><th>Dolor</th><th>Sit</th><th>Amet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
</tbody>
</table>
</body>
</html>
표 전체에 배경색 추가하기
- 표 전체에 하나의 배경색을 넣을 때는 table에 배경색을 추가하는 게 편합니다.
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
table {
background-color: #bbdefb;
}
</style>
제목이 있는 행과 내용이 있는 행에 다른 색 추가하기
- th 요소와 td 요소에 서로 다른 배경색을 추가합니다. (thead 요소와 tbody 요소에 서로 다른 배경색을 추가해도 됩니다.)
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
th {
background-color: #bbdefb;
}
td {
background-color: #e3f2fd;
}
</style>
행의 배경색을 번갈아 넣기
- 홀수번째 행과 짝수번째 행의 배경색을 다르게 하고 싶다면 tr 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
thead tr {
background-color: #0d47a1;
color: #ffffff;
}
tbody tr:nth-child(2n) {
background-color: #bbdefb;
}
tbody tr:nth-child(2n+1) {
background-color: #e3f2fd;
}
</style>
열의 배경색을 번갈아 넣기
- 홀수번째 열과 짝수번째 열의 배경색을 다르게 하고 싶다면 th 또는 td 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
th:nth-child(2n), td:nth-child(2n) {
background-color: #bbdefb;
}
th:nth-child(2n+1), td:nth-child(2n+1) {
background-color: #e3f2fd;
}
</style>
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
CSS / Tutorial / 상속(inheritance)
상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 예를 들어 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않습니다. 예제 color는 상속하는 속성이므로 자식 요소의 ...
CSS / Tutorial / 마우스 오버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
선택자 링크는 a 태그로 만듭니다. 따라서 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다. a { color: red; } 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만듭니다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있습니다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid #666666; ...
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype ...