구조화 목록
키-값 쌍의 목록 컴포넌트입니다.
#list #key-value #structured
HTML
<ul class="krds-structured-list type-full">
<li class="structured-item">
<div class="in">
<div class="card-top">
<span class="krds-badge bg-light-primary">뱃지</span>
</div>
<div class="card-body">
<a href="#" class="c-text">
<p class="c-tit"><span class="span">타이틀 영역</span></p>
<p class="c-txt">
간단한 설명이 들어가는 영역입니다. 최대 3줄까지 작성합니다. 간단한 설명이 들어가는 영역입니다. 간단한 설명이 들어가는 영역입니다.
</p>
<p class="c-date">
<strong class="key">신청 기간</strong>
<span class="value">2023.00.00-2024.00.00</span>
</p>
</a>
<div class="c-btn">
<a href="#" class="krds-btn secondary" title="타이틀 영역">신청하기</a>
</div>
</div>
<div class="card-btm">
<span class="tag">태그</span>
<span class="tag">태그</span>
</div>
<div class="card-btn">
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-share"></i> 공유하기</button>
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-like"></i> 찜하기</button>
</div>
</div>
</li>
<li class="structured-item">
<div class="in">
<div class="card-top">
<span class="krds-badge bg-light-success">뱃지</span>
</div>
<div class="card-body">
<a href="#" class="c-text">
<p class="c-tit"><span class="span">타이틀 영역</span></p>
<p class="c-txt">
간단한 설명이 들어가는 영역입니다. 최대 3줄까지 작성합니다. 간단한 설명이 들어가는 영역입니다. 간단한 설명이 들어가는 영역입니다.
</p>
<p class="c-date">
<strong class="key">신청 기간</strong>
<span class="value">2023.00.00-2024.00.00</span>
</p>
</a>
<div class="c-btn">
<a href="#" class="krds-btn secondary" title="타이틀 영역">신청하기</a>
</div>
</div>
<div class="card-btm">
<span class="tag">태그</span>
<span class="tag">태그</span>
</div>
<div class="card-btn">
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-share"></i> 공유하기</button>
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-like"></i> 찜하기</button>
</div>
</div>
</li>
<li class="structured-item">
<div class="in">
<div class="card-top">
<span class="krds-badge bg-secondary">뱃지</span>
</div>
<div class="card-body">
<a href="#" class="c-text">
<p class="c-tit"><span class="span">타이틀 영역</span></p>
<p class="c-txt">
간단한 설명이 들어가는 영역입니다. 최대 3줄까지 작성합니다. 간단한 설명이 들어가는 영역입니다. 간단한 설명이 들어가는 영역입니다.
</p>
<p class="c-date">
<strong class="key">신청 기간</strong>
<span class="value">2023.00.00-2024.00.00</span>
</p>
</a>
<div class="c-btn">
<a href="#" class="krds-btn secondary" title="타이틀 영역">신청하기</a>
</div>
</div>
<div class="card-btm">
<span class="tag">태그</span>
<span class="tag">태그</span>
</div>
<div class="card-btn">
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-share"></i> 공유하기</button>
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-like"></i> 찜하기</button>
</div>
</div>
</li>
</ul>Vue 컴포넌트
<template>
<ul class="krds-structured-list type-full">
<li class="structured-item">
<div class="in">
<div class="card-top">
<span class="krds-badge bg-light-primary">뱃지</span>
</div>
<div class="card-body">
<a href="#" class="c-text">
<p class="c-tit"><span class="span">타이틀 영역</span></p>
<p class="c-txt">
간단한 설명이 들어가는 영역입니다. 최대 3줄까지 작성합니다. 간단한 설명이 들어가는 영역입니다. 간단한 설명이 들어가는 영역입니다.
</p>
<p class="c-date">
<strong class="key">신청 기간</strong>
<span class="value">2023.00.00-2024.00.00</span>
</p>
</a>
<div class="c-btn">
<a href="#" class="krds-btn secondary" title="타이틀 영역">신청하기</a>
</div>
</div>
<div class="card-btm">
<span class="tag">태그</span>
<span class="tag">태그</span>
</div>
<div class="card-btn">
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-share"></i> 공유하기</button>
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-like"></i> 찜하기</button>
</div>
</div>
</li>
<li class="structured-item">
<div class="in">
<div class="card-top">
<span class="krds-badge bg-light-success">뱃지</span>
</div>
<div class="card-body">
<a href="#" class="c-text">
<p class="c-tit"><span class="span">타이틀 영역</span></p>
<p class="c-txt">
간단한 설명이 들어가는 영역입니다. 최대 3줄까지 작성합니다. 간단한 설명이 들어가는 영역입니다. 간단한 설명이 들어가는 영역입니다.
</p>
<p class="c-date">
<strong class="key">신청 기간</strong>
<span class="value">2023.00.00-2024.00.00</span>
</p>
</a>
<div class="c-btn">
<a href="#" class="krds-btn secondary" title="타이틀 영역">신청하기</a>
</div>
</div>
<div class="card-btm">
<span class="tag">태그</span>
<span class="tag">태그</span>
</div>
<div class="card-btn">
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-share"></i> 공유하기</button>
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-like"></i> 찜하기</button>
</div>
</div>
</li>
<li class="structured-item">
<div class="in">
<div class="card-top">
<span class="krds-badge bg-secondary">뱃지</span>
</div>
<div class="card-body">
<a href="#" class="c-text">
<p class="c-tit"><span class="span">타이틀 영역</span></p>
<p class="c-txt">
간단한 설명이 들어가는 영역입니다. 최대 3줄까지 작성합니다. 간단한 설명이 들어가는 영역입니다. 간단한 설명이 들어가는 영역입니다.
</p>
<p class="c-date">
<strong class="key">신청 기간</strong>
<span class="value">2023.00.00-2024.00.00</span>
</p>
</a>
<div class="c-btn">
<a href="#" class="krds-btn secondary" title="타이틀 영역">신청하기</a>
</div>
</div>
<div class="card-btm">
<span class="tag">태그</span>
<span class="tag">태그</span>
</div>
<div class="card-btn">
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-share"></i> 공유하기</button>
<button type="button" class="krds-btn medium text" title="타이틀 영역"><i class="svg-icon ico-like"></i> 찜하기</button>
</div>
</div>
</li>
</ul>
</template>
<script setup lang="ts">
// 구조화 목록 컴포넌트
// 키-값 쌍의 목록 컴포넌트입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- structured_list.html
- 카테고리
- 표시
- 난이도
- 쉬움