배경색 만들기

CSS 표

배경색을 만드는 속성

배경색은 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 표

CSS / float와 overflow

float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / z-index / 요소의 수직 위치 정하는 속성

z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 1 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100px; height: 100px; position: absolute; } div.x { background-color: #2196F3; top: ...

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성

개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성이다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값으로, 표의 위에 캡션을 위치시킨다. bottom : 표의 아래에 캡션을 위치시킨다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / 기초 / !important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성

개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...

CSS / 선택자(Selector)

전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...

CODING FACTORY