푸터
사이트 하단 푸터 영역입니다.
#footer #bottom
HTML
<footer id="krds-footer">
<div class="foot-quick">
<div class="inner">
<button type="button" class="link" title="related_site 레이어">related_site</button>
<button type="button" class="link" title="related_site 레이어">related_site</button>
<button type="button" class="link" title="related_site 레이어">related_site</button>
<button type="button" class="link" title="related_site 레이어">related_site</button>
</div>
</div>
<div class="inner">
<div class="f-logo">
<span class="sr-only">KRDS - Korea Design System</span>
</div>
<div class="f-cnt">
<div class="f-info">
<p class="info-addr">(26464) 강원특별자치도 원주시 건강로 32(반곡동) 국민건강보험공단</p>
<ul class="info-cs">
<li><strong class="strong">대표전화 1577-1000</strong><span class="span">(유료, 평일 09시~18시)</span></li>
<li><strong class="strong">해외이용 82-33-811-2001</strong><span class="span">(유료, 평일 09시~18시)</span></li>
</ul>
</div>
<div class="f-link">
<div class="link-go">
<a href="#" class="krds-btn medium text">찾아오시는 길 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn medium text">이용안내 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn medium text">직원검색 <i class="svg-icon ico-angle right"></i></a>
</div>
<div class="link-sns">
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">인스타그램</span>
<i class="svg-icon ico-instagram"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">유튜브</span>
<i class="svg-icon ico-youtube"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">X</span>
<i class="svg-icon ico-sns-x"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">페이스북</span>
<i class="svg-icon ico-facebook"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">블로그</span>
<i class="svg-icon ico-blog"></i>
</a>
</div>
</div>
</div>
<div class="f-btm">
<div class="f-btm-text">
<div class="f-menu">
<a href="#" class="point">개인정보처리방침</a>
<a href="#">저작권 정책</a>
<a href="#">웹 접근성 품질인증 마크 획득</a>
</div>
<p class="f-copy">© 2023 National Health Insurance Service. All rights reserved.</p>
</div>
<div class="krds-identifier">
<span class="logo">
<span class="sr-only">KRDS - Korea Design System</span>
</span>
<span class="ban-txt">이 누리집은 보건복지부 누리집입니다.</span>
</div>
</div>
</div>
</footer>Vue 컴포넌트
<template>
<footer id="krds-footer">
<div class="foot-quick">
<div class="inner">
<button type="button" class="link" title="related_site 레이어">related_site</button>
<button type="button" class="link" title="related_site 레이어">related_site</button>
<button type="button" class="link" title="related_site 레이어">related_site</button>
<button type="button" class="link" title="related_site 레이어">related_site</button>
</div>
</div>
<div class="inner">
<div class="f-logo">
<span class="sr-only">KRDS - Korea Design System</span>
</div>
<div class="f-cnt">
<div class="f-info">
<p class="info-addr">(26464) 강원특별자치도 원주시 건강로 32(반곡동) 국민건강보험공단</p>
<ul class="info-cs">
<li><strong class="strong">대표전화 1577-1000</strong><span class="span">(유료, 평일 09시~18시)</span></li>
<li><strong class="strong">해외이용 82-33-811-2001</strong><span class="span">(유료, 평일 09시~18시)</span></li>
</ul>
</div>
<div class="f-link">
<div class="link-go">
<a href="#" class="krds-btn medium text">찾아오시는 길 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn medium text">이용안내 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn medium text">직원검색 <i class="svg-icon ico-angle right"></i></a>
</div>
<div class="link-sns">
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">인스타그램</span>
<i class="svg-icon ico-instagram"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">유튜브</span>
<i class="svg-icon ico-youtube"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">X</span>
<i class="svg-icon ico-sns-x"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">페이스북</span>
<i class="svg-icon ico-facebook"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">블로그</span>
<i class="svg-icon ico-blog"></i>
</a>
</div>
</div>
</div>
<div class="f-btm">
<div class="f-btm-text">
<div class="f-menu">
<a href="#" class="point">개인정보처리방침</a>
<a href="#">저작권 정책</a>
<a href="#">웹 접근성 품질인증 마크 획득</a>
</div>
<p class="f-copy">© 2023 National Health Insurance Service. All rights reserved.</p>
</div>
<div class="krds-identifier">
<span class="logo">
<span class="sr-only">KRDS - Korea Design System</span>
</span>
<span class="ban-txt">이 누리집은 보건복지부 누리집입니다.</span>
</div>
</div>
</div>
</footer>
</template>
<script setup lang="ts">
// 푸터 컴포넌트
// 사이트 하단 푸터 영역입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- footer.html
- 카테고리
- 네비게이션
- 난이도
- 보통