구조화 목록 테이블
테이블 형태의 구조화 목록입니다.
#list #table #structured
| 선택 | 유형 | 제목 | 내용 | 다운로드 | 게시일 |
|---|---|---|---|---|---|
|
|
유형 | 타이틀 영역 | 간단한 내용이 들어간는 영역입니다. | 2025.12.17 | |
|
|
유형 | 타이틀 영역 | 간단한 내용이 들어간는 영역입니다. | 2025.12.17 | |
|
|
유형 | 타이틀 영역 | 간단한 내용이 들어간는 영역입니다. | 2025.12.17 | |
|
|
유형 | 타이틀 영역 | 간단한 내용이 들어간는 영역입니다. | 2025.12.17 | |
|
|
유형 | 타이틀 영역 | 간단한 내용이 들어간는 영역입니다. | 2025.12.17 | |
|
|
유형 | 타이틀 영역 | 간단한 내용이 들어간는 영역입니다. | 2025.12.17 | |
|
|
유형 | 타이틀 영역 | 간단한 내용이 들어간는 영역입니다. | 2025.12.17 |
HTML
<div class="krds-structured-list-table sample">
<div class="search-list-top">
<div class="sch-left">
<div class="krds-check-area">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_all" />
<label for="list_chk_all">전체선택</label>
</div>
</div>
<ul class="side-line-ul">
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
</ul>
</div>
<ul class="sch-sort">
<li>
<strong class="sort-label"><label for="search_result_count">목록 표시 개수</label></strong>
<select class="krds-form-select-sort" id="search_result_count">
<option>10개</option>
<option>9개</option>
</select>
</li>
<li>
<strong class="sort-label"><label for="sort">정렬기준</label></strong>
<div class="w-sort-btn">
<button type="button" class="active">관련도순</button>
<button type="button">최신순</button>
<button type="button">인기순</button>
</div>
<div class="m-sort-btn">
<select class="krds-form-select-sort" id="sort">
<option>관련도순</option>
<option>최신순</option>
<option>인기순</option>
</select>
</div>
</li>
</ul>
</div>
<div class="krds-table-wrap">
<table class="tbl col data">
<caption>000에 대한 표로 유형 제목 내용 게시일로 구성되어있다.</caption>
<colgroup>
<col style="width: 5%;">
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 30%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col>
</colgroup>
<thead>
<tr>
<th scope="col">선택</th>
<th scope="col">유형</th>
<th scope="col">제목</th>
<th scope="col">내용</th>
<th scope="col"><span class="sr-only">다운로드</span></th>
<th scope="col">게시일</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_1" />
<label for="list_chk_1"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_2" />
<label for="list_chk_2"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_3" />
<label for="list_chk_3"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_4" />
<label for="list_chk_4"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_5" />
<label for="list_chk_5"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_6" />
<label for="list_chk_6"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_7" />
<label for="list_chk_7"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
</tbody>
</table>
</div>
<div class="krds-pagination">
<span class="page-navi prev disabled" href="#">이전</span>
<div class="page-links">
<a class="page-link" href="#">1</a>
<a class="page-link" href="#">2</a>
<a class="page-link" href="#">3</a>
<a class="page-link active" href="#"><span class="sr-only">현재페이지 </span>4</a>
<a class="page-link" href="#">5</a>
<a class="page-link" href="#">6</a>
<a class="page-link" href="#">7</a>
<a class="page-link" href="#">8</a>
<span class="page-link link-dot"></span>
<a class="page-link" href="#">99</a>
</div>
<a class="page-navi next" href="#">다음</a>
</div>
</div>Vue 컴포넌트
<template>
<div class="krds-structured-list-table sample">
<div class="search-list-top">
<div class="sch-left">
<div class="krds-check-area">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_all" />
<label for="list_chk_all">전체선택</label>
</div>
</div>
<ul class="side-line-ul">
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
<li>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
핵심버튼
</button>
</li>
</ul>
</div>
<ul class="sch-sort">
<li>
<strong class="sort-label"><label for="search_result_count">목록 표시 개수</label></strong>
<select class="krds-form-select-sort" id="search_result_count">
<option>10개</option>
<option>9개</option>
</select>
</li>
<li>
<strong class="sort-label"><label for="sort">정렬기준</label></strong>
<div class="w-sort-btn">
<button type="button" class="active">관련도순</button>
<button type="button">최신순</button>
<button type="button">인기순</button>
</div>
<div class="m-sort-btn">
<select class="krds-form-select-sort" id="sort">
<option>관련도순</option>
<option>최신순</option>
<option>인기순</option>
</select>
</div>
</li>
</ul>
</div>
<div class="krds-table-wrap">
<table class="tbl col data">
<caption>000에 대한 표로 유형 제목 내용 게시일로 구성되어있다.</caption>
<colgroup>
<col style="width: 5%;">
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 30%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col>
</colgroup>
<thead>
<tr>
<th scope="col">선택</th>
<th scope="col">유형</th>
<th scope="col">제목</th>
<th scope="col">내용</th>
<th scope="col"><span class="sr-only">다운로드</span></th>
<th scope="col">게시일</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_1" />
<label for="list_chk_1"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_2" />
<label for="list_chk_2"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_3" />
<label for="list_chk_3"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_4" />
<label for="list_chk_4"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_5" />
<label for="list_chk_5"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_6" />
<label for="list_chk_6"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
<tr>
<th scope="row">
<div class="krds-form-check">
<input type="checkbox" class="chk" id="list_chk_7" />
<label for="list_chk_7"></label>
</div>
</th>
<td>유형</td>
<td>타이틀 영역</td>
<td>간단한 내용이 들어간는 영역입니다.</td>
<td>
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-down"></i>
다운로드
</button>
</td>
<td>2025.12.17</td>
</tr>
</tbody>
</table>
</div>
<div class="krds-pagination">
<span class="page-navi prev disabled" href="#">이전</span>
<div class="page-links">
<a class="page-link" href="#">1</a>
<a class="page-link" href="#">2</a>
<a class="page-link" href="#">3</a>
<a class="page-link active" href="#"><span class="sr-only">현재페이지 </span>4</a>
<a class="page-link" href="#">5</a>
<a class="page-link" href="#">6</a>
<a class="page-link" href="#">7</a>
<a class="page-link" href="#">8</a>
<span class="page-link link-dot"></span>
<a class="page-link" href="#">99</a>
</div>
<a class="page-navi next" href="#">다음</a>
</div>
</div>
</template>
<script setup lang="ts">
// 구조화 목록 테이블 컴포넌트
// 테이블 형태의 구조화 목록입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- structured_list_table.html
- 카테고리
- 표시
- 난이도
- 보통