튜토리얼 패널
튜토리얼 안내 패널입니다.
#tutorial #panel #guide
도움
전자문서지갑 도움말
전자문서지갑에서는 전자증명서 출력기능을 제공하지 않으며, 스마트폰 화면을 캡쳐하여 사용할 수 없습니다. 다만, 발급받은 전자증명서를 열람용으로 다운로드할 수는 있습니다.
관련서비스/민원
기타 문의/도움말
따라하기
이사 전 살던 곳 정보 입력하기
-
Task 1: 이사 전에 살던 곳 주소 확인
- 단계1 : 주소조회
- 단계2 : 조회 결과 확인
-
Task 2: 이사 갈 가족 구성원 선택하기
- 단계1 : 주소조회
HTML
<div id="container">
<div class="inner help-panel-flexible">
<button type="button" class="krds-btn small tertiary btn-help-panel expand btn-help-exec"><i class="svg-icon ico-fold"></i> 도움말</button>
<div class="krds-help-panel">
<div class="help-panel-wrap">
<div class="help-conts-area">
<div class="krds-tab-area layer">
<div class="tab line">
<ul role="tablist">
<li id="helperTab01" role="tab" aria-selected="false" aria-controls="helperTabpanel01">
<button type="button" class="btn-tab">도움</button>
</li>
<li id="helperTab02" role="tab" aria-selected="true" aria-controls="helperTabpanel02" class="active">
<button type="button" class="btn-tab">따라하기 <i class="sr-only created"> 선택됨</i></button>
</li>
</ul>
</div>
<div class="tab-conts-wrap">
<section id="helperTabpanel01" role="tabpanel" aria-labelledby="helperTab01" class="tab-conts">
<h3 class="sr-only">도움</h3>
<div class="help-conts-area-inner">
<div class="conts-area help-conts">
<div class="conts-wrap">
<h4 class="help-title">
전자문서지갑
<span class="krds-btn medium icon">
<span class="sr-only">도움말</span>
<i class="svg-icon ico-help"></i>
</span>
</h4>
<div class="conts-desc">
<p>
전자문서지갑에서는 전자증명서 출력기능을 제공하지 않으며, 스마트폰 화면을 캡쳐하여 사용할 수 없습니다. 다만, 발급받은 전자증명서를
열람용으로 다운로드할 수는 있습니다.
</p>
</div>
<ul class="link-list">
<li>
<a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
안드로이드 애플리케이션 다운로드
<i class="svg-icon ico-go"></i>
</a>
</li>
<li>
<a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
iOS애플리케이션 다운로드
<i class="svg-icon ico-go"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="conts-area related-service">
<div class="conts-wrap">
<h4 class="help-title">관련서비스/민원</h4>
<ul class="link-list">
<li>
<a href="#" class="krds-btn xsmall link basic">
영문 주민등록표등본
<i class="svg-icon ico-angle right"></i>
</a>
</li>
<li>
<a href="#" class="krds-btn xsmall link basic">
영문 주민등록표초본
<i class="svg-icon ico-angle right"></i>
</a>
</li>
<li>
<a href="#" class="krds-btn xsmall link basic">
주민등록표등본
<i class="svg-icon ico-angle right"></i>
</a>
</li>
</ul>
</div>
<div class="conts-wrap">
<h4 class="help-title">기타 문의/도움말</h4>
<ul class="link-list">
<li>
<a href="#" class="krds-btn xsmall link basic">
<i class="svg-icon ico-call"></i>
민원신청 관련 문의 전화 번호 찾기
</a>
</li>
<li>
<a href="#" class="krds-btn xsmall link basic">
<i class="svg-icon ico-faq"></i>
자주 묻는 질문 확인하기
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="helperTabpanel02" role="tabpanel" aria-labelledby="helperTab02" class="tab-conts active">
<h3 class="sr-only">따라하기</h3>
<div class="help-conts-area-inner">
<div class="conts-area">
<h4 class="help-title">
<a href="#;" title="이전으로 돌아가기">
이사 전 살던 곳 정보 입력하기
</a>
</h4>
<ul class="coach-help-process">
<li>
<h4 class="tit current">Task 1: 이사 전에 살던 곳 주소 확인</h4>
<div class="krds-disclosure conts-expand-area">
<button type="button" class="btn-conts-expand">전체 2단계</button>
<div class="expand-wrap">
<div class="expand-in">
<ul class="krds-info-list decimal">
<li>단계1 : 주소조회</li>
<li>단계2 : 조회 결과 확인</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<h4 class="tit">Task 2: 이사 갈 가족 구성원 선택하기</h4>
<div class="krds-disclosure conts-expand-area">
<button type="button" class="btn-conts-expand">전체 1단계</button>
<div class="expand-wrap">
<div class="expand-in">
<ul class="krds-info-list decimal">
<li>단계1 : 주소조회</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="help-panel-action">
<button type="button" class="krds-btn medium secondary coach-btn-stop">그만 따라하기</button>
</div>
</div>
</section>
</div>
</div>
<button type="button" class="krds-btn small tertiary btn-help-panel fold">
<span class="sr-only">도움말</span> 접어두기 <i class="svg-icon ico-angle right"></i>
</button>
</div>
</div>
</div>
</div>
</div>Vue 컴포넌트
<template>
<div id="container">
<div class="inner help-panel-flexible">
<button type="button" class="krds-btn small tertiary btn-help-panel expand btn-help-exec"><i class="svg-icon ico-fold"></i> 도움말</button>
<div class="krds-help-panel">
<div class="help-panel-wrap">
<div class="help-conts-area">
<div class="krds-tab-area layer">
<div class="tab line">
<ul role="tablist">
<li id="helperTab01" role="tab" aria-selected="false" aria-controls="helperTabpanel01">
<button type="button" class="btn-tab">도움</button>
</li>
<li id="helperTab02" role="tab" aria-selected="true" aria-controls="helperTabpanel02" class="active">
<button type="button" class="btn-tab">따라하기 <i class="sr-only created"> 선택됨</i></button>
</li>
</ul>
</div>
<div class="tab-conts-wrap">
<section id="helperTabpanel01" role="tabpanel" aria-labelledby="helperTab01" class="tab-conts">
<h3 class="sr-only">도움</h3>
<div class="help-conts-area-inner">
<div class="conts-area help-conts">
<div class="conts-wrap">
<h4 class="help-title">
전자문서지갑
<span class="krds-btn medium icon">
<span class="sr-only">도움말</span>
<i class="svg-icon ico-help"></i>
</span>
</h4>
<div class="conts-desc">
<p>
전자문서지갑에서는 전자증명서 출력기능을 제공하지 않으며, 스마트폰 화면을 캡쳐하여 사용할 수 없습니다. 다만, 발급받은 전자증명서를
열람용으로 다운로드할 수는 있습니다.
</p>
</div>
<ul class="link-list">
<li>
<a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
안드로이드 애플리케이션 다운로드
<i class="svg-icon ico-go"></i>
</a>
</li>
<li>
<a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
iOS애플리케이션 다운로드
<i class="svg-icon ico-go"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="conts-area related-service">
<div class="conts-wrap">
<h4 class="help-title">관련서비스/민원</h4>
<ul class="link-list">
<li>
<a href="#" class="krds-btn xsmall link basic">
영문 주민등록표등본
<i class="svg-icon ico-angle right"></i>
</a>
</li>
<li>
<a href="#" class="krds-btn xsmall link basic">
영문 주민등록표초본
<i class="svg-icon ico-angle right"></i>
</a>
</li>
<li>
<a href="#" class="krds-btn xsmall link basic">
주민등록표등본
<i class="svg-icon ico-angle right"></i>
</a>
</li>
</ul>
</div>
<div class="conts-wrap">
<h4 class="help-title">기타 문의/도움말</h4>
<ul class="link-list">
<li>
<a href="#" class="krds-btn xsmall link basic">
<i class="svg-icon ico-call"></i>
민원신청 관련 문의 전화 번호 찾기
</a>
</li>
<li>
<a href="#" class="krds-btn xsmall link basic">
<i class="svg-icon ico-faq"></i>
자주 묻는 질문 확인하기
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="helperTabpanel02" role="tabpanel" aria-labelledby="helperTab02" class="tab-conts active">
<h3 class="sr-only">따라하기</h3>
<div class="help-conts-area-inner">
<div class="conts-area">
<h4 class="help-title">
<a href="#;" title="이전으로 돌아가기">
이사 전 살던 곳 정보 입력하기
</a>
</h4>
<ul class="coach-help-process">
<li>
<h4 class="tit current">Task 1: 이사 전에 살던 곳 주소 확인</h4>
<div class="krds-disclosure conts-expand-area">
<button type="button" class="btn-conts-expand">전체 2단계</button>
<div class="expand-wrap">
<div class="expand-in">
<ul class="krds-info-list decimal">
<li>단계1 : 주소조회</li>
<li>단계2 : 조회 결과 확인</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<h4 class="tit">Task 2: 이사 갈 가족 구성원 선택하기</h4>
<div class="krds-disclosure conts-expand-area">
<button type="button" class="btn-conts-expand">전체 1단계</button>
<div class="expand-wrap">
<div class="expand-in">
<ul class="krds-info-list decimal">
<li>단계1 : 주소조회</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="help-panel-action">
<button type="button" class="krds-btn medium secondary coach-btn-stop">그만 따라하기</button>
</div>
</div>
</section>
</div>
</div>
<button type="button" class="krds-btn small tertiary btn-help-panel fold">
<span class="sr-only">도움말</span> 접어두기 <i class="svg-icon ico-angle right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// 튜토리얼 패널 컴포넌트
// 튜토리얼 안내 패널입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- tutorial_panel.html
- 카테고리
- 피드백
- 난이도
- 보통