<div class="krds-tag-wrap large">
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
</div>
<div class="krds-tag-wrap medium">
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
</div>
<div class="krds-tag-wrap small">
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
</div>

Vue 컴포넌트

<template>
  <div class="krds-tag-wrap large">
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
</div>
<div class="krds-tag-wrap medium">
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
</div>
<div class="krds-tag-wrap small">
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
	<span class="krds-btn-tag">
		태그
		<button type="button" class="btn-delete">
			<span class="sr-only">삭제</span>
		</button>
	</span>
</div>
</template>

<script setup lang="ts">
// 태그 컴포넌트
// 콘텐츠 분류용 태그 컴포넌트입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>

컴포넌트 정보

파일명: tag.html
카테고리: 표시
난이도: 쉬움