project components guide

기본 가이드

각 열에 대한 스타일은 <col> 요소에 추가하며 너비가 고정일 경우는 px, 유동적일 경우는 %를 사용합니다.
표의 헤더는 <thead>, 본문은 <tbody>로 구분하며 <tr>,<th>, <td> 태그로 표의 구조를 만듭니다.
텍스트 정렬 - default : center / <align-left> : 왼쪽 / <align-right> : 오른쪽

접근성 가이드

<caption> 에 표의 제목, 설명을 정의합니다.
머리글이 두 개 이상의 열에 걸쳐 있는 경우 해당 수의 <col> 요소 대신 <colgroup> 요소를 사용합니다.
<th> 에 scope를 기재하여 헤더의 행과 열을 지정해야합니다.

Table

컴포넌트 클래스 : .component-table

<div class="component-table">
  <table>
    <caption>표제목 : 제목1, 제목2, 제목3, 제목4</caption>
    <col style="width: 25%;">
    <col style="width: 25%;">
    <col style="width: 25%;">
    <col>
    <thead>
        <tr>
            <th scope="col">날짜</th>
            <th scope="col">이벤트</th>
            <th scope="col">장소</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2월 12일</td>
            <td class="align-left">함께하는 왈츠	</td>
            <td>정당</td>
            <td class="align-right">1,3485원</td>
        </tr>
        <tr>
            <td>3월 12일</td>
            <td class="align-left">오벨리스크</td>
            <td>웨스트 윙</td>
            <td class="align-right">23,076원</td>
        </tr>
        <tr>
            <td>4월 12일</td>
            <td class="align-left">무엇</td>
            <td>정당</td>
            <td class="align-right">73,076원</td>
        </tr>
    </tbody>
  </table>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Table 복합형

컴포넌트 클래스 : .component-table
caption 태그에 요약하여 기재한다.
행과 열을 병합할땐 rowspan, colspan 을 사용합니다.
col, row, colgroup 을 사용하여 그룹화해줍니다.

<div class="component-table">
  <table>
    <caption>
      2024 주간 요율 요약
      <span>2024년 4월 15일부터 4월 20일까지의 주간 다양한 금융 도구에 대한 주간 요율</span>
    </caption>
    <col>
    <col style="width: 17%;">
    <col style="width: 17%;">
    <col style="width: 17%;">
    <col style="width: 17%;">
    <col style="width: 17%;">
    <thead>
        <tr>
            <th rowspan="2" scope="col">구분</th>
            <th colspan="3" scope="colgroup">2024</th>
            <th colspan="3" scope="colgroup">일주일 마무리</th>
        </tr>
        <tr>
            <th scope="col">4월 15일</th>
            <th scope="col">4월 16일</th>
            <th scope="col">4월 17일</th>
            <th scope="col">4월 19일</th>
            <th scope="col">4월 20일</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">연방 자금</th>
            <td>1.84</td>
            <td>1.85</td>
            <td>1.85</td>
            <td>1.85</td>
            <td>1.85</td>
        </tr>
        <tr>
            <th scope="row">비금융</th>
            <td>1.84</td>
            <td>1.85</td>
            <td>1.85</td>
            <td>1.85</td>
            <td>1.85</td>
        </tr>
        <tr>
            <th scope="row">금융</th>
            <td>1.84</td>
            <td>1.85</td>
            <td>1.85</td>
            <td>1.85</td>
            <td>1.85</td>
        </tr>
    </tbody>
  </table>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Table header Fixed

컴포넌트 클래스 : .component-table
컴포넌트 Custom 클래스 : .table-fixed, .thead-fixed

<div class="component-table table-fixed">
  <table>
    <caption>표제목 : 제목1, 제목2, 제목3, 제목4</caption>
    <col style="width: 25%;">
    <col style="width: 25%;">
    <col style="width: 25%;">
    <col>
    <thead class="thead-fixed">
        <tr>
            <th scope="col">날짜</th>
            <th scope="col">이벤트</th>
            <th scope="col">장소</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2월 12일</td>
            <td>함께하는 왈츠	</td>
            <td>정당</td>
            <td>1,3485원</td>
        </tr>
        <tr>
            <td>3월 12일</td>
            <td>오벨리스크</td>
            <td>웨스트 윙</td>
            <td>23,076원</td>
        </tr>
        <tr>
            <td>4월 12일</td>
            <td>무엇</td>
            <td>정당</td>
            <td>73,076원</td>
        </tr>
        <tr>
            <td>4월 12일</td>
            <td >무엇</td>
            <td>정당</td>
            <td>73,076원</td>
        </tr>
        <tr>
            <td>4월 12일</td>
            <td>무엇</td>
            <td>정당</td>
            <td>73,076원</td>
        </tr>
        <tr>
            <td>4월 12일</td>
            <td>무엇</td>
            <td>정당</td>
            <td>73,076원</td>
        </tr>
        <tr>
            <td>4월 12일</td>
            <td>무엇</td>
            <td>정당</td>
            <td>73,076원</td>
        </tr>
        <tr>
            <td>4월 12일</td>
            <td>무엇</td>
            <td>정당</td>
            <td>73,076원</td>
        </tr>
    </tbody>
  </table>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Table Scroll(horizontal)

컴포넌트 클래스 : .component-table
컴포넌트 Custom 클래스 : .table-scroll

<div class="component-table table-scroll">
  <table>
    <caption>표제목 : 제목1, 제목2, 제목3, 제목4</caption>
    <col style="width: 150px;">
    <col style="width: 150px;">
    <col style="width: 150px;">
    <col style="width: 150px;">
    <col style="width: 150px;">
    <col style="width: 150px;">
    <thead>
        <tr>
            <th scope="col">날짜</th>
            <th scope="col">이벤트</th>
            <th scope="col">장소</th>
            <th scope="col">가격</th>
            <th scope="col">가격</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2월 12일</td>
            <td>함께하는 왈츠	</td>
            <td>정당</td>
            <td>정당</td>
            <td>정당</td>
            <td>1,3485원</td>
        </tr>
        <tr>
            <td>3월 12일</td>
            <td>오벨리스크</td>
            <td>웨스트 윙</td>
            <td>웨스트 윙</td>
            <td>웨스트 윙</td>
            <td>23,076원</td>
        </tr>
    </tbody>
  </table>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */