표(table)의 캡션의 위치를 정하는 속성

CSS
Created 2018-09-04 Last Modified 2022-03-19

개요

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>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table { width: 100%; }
      table, td { border: 1px solid #444444; }
      .abc { caption-side: top; }
      .xyz { caption-side: bottom; }
    </style>
  </head>
  <body>
    <p>Captionside Top</p>
    <table>
      <caption class="abc">caption-side: top;</caption>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor</td>
      </tr>
      <tr>
        <td>Sit</td>
        <td>Amet</td>
        <td>Elit</td>
      </tr>
    </table>
    <p>Captionside Bottom</p>
    <table>
      <caption class="xyz">caption-side: bottom;</caption>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor</td>
      </tr>
      <tr>
        <td>Sit</td>
        <td>Amet</td>
        <td>Elit</td>
      </tr>
    </table>
  </body>
</html>

CSS

CSS / linear-gradient - 선형 그라데이션 효과 만들기

linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, color3 ) direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / 마우스 오버 시 텍스트 나오게 하는 방법

CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...

CSS / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

개요 word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정한다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈한다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. word-break 속성의 값이 keep-all이면 단어가, break-all이면 ...

CSS / float와 overflow

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

CSS / 인용문(Blockquote) 꾸미기

다음과 같은 인용문(blockquote)을 꾸미는 몇 가지 예제이다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...

CSS / font-family / 글꼴 정하는 속성

개요 font-family는 글꼴을 설정하는 속성이다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 font family-name은 글꼴 이름이다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감싼다. generic-family는 글꼴 유형이다. 글꼴 유형은 다음과 ...

CSS / border-width / 테두리 두께 정하는 속성

개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정한다. 기본값은 medium이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 테두리의 두께를 xx로 만든다. border-width: xx 다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 두께는 yy로 ...

CSS / 도형 만들기 / 삼각형

CSS의 border 속성으로 삼각형을 만들 수 있다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아본다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만든다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid #666666; ...