KRDS Angular

푸터 Footer ​

푸터는 화면을 구성하는 가장 마지막 요소로 헤더와 본문에서 원하는 정보를 찾지 못하였거나 사이트 구조 탐색 중에 길을 잃은 사용자들이 대면하게 되는 정보이다. 따라서 푸터에는 사용자가 서비스를 탐색할 수 있는 추가적인 수단, 문제를 해결하는 데 참고할 수 있는 유용한 링크가 제공되어야 한다.

KRDS 가이드

기본 ​

기본 <footer>(contentinfo 랜드마크)에 krdsFooter를 붙이고, 영역마다 아래 속성을 붙인 요소를 넣으면 KRDS 푸터 구조로 배치합니다. krdsFooterTop(관련 사이트), krdsFooterLogo(로고), krdsFooterContent(기관 정보·링크), krdsFooterBottom(정책 링크·저작권) 안에는 KRDS 푸터 마크업을 그대로 넣습니다. 하단에는 운영기관 식별자(krdsIdentifier)를 함께 둡니다.

푸터 레이아웃은 화면 폭 기준으로 바뀌므로 예제를 별도 화면(iframe)에 띄웁니다. 예제는 1024px 폭 화면을 축소해 PC 레이아웃으로 보여 줍니다. 768px 미만 화면에서는 모바일 레이아웃으로 바뀝니다.

새 창에서 보기
ts
import { Component } from '@angular/core'
import {
  KrdsButton,
  KrdsExternalLink,
  KrdsFooter,
  KrdsFooterBottom,
  KrdsFooterContent,
  KrdsFooterLogo,
  KrdsFooterTop,
  KrdsIdentifier
} from '@krds.ui/angular'

@Component({
  selector: 'demo-footer-basic',
  imports: [KrdsFooter, KrdsFooterTop, KrdsFooterLogo, KrdsFooterContent, KrdsFooterBottom, KrdsIdentifier, KrdsButton, KrdsExternalLink],
  template: `
    <footer krdsFooter>
      <div krdsFooterTop>
        <button type="button" class="link" title="관련 사이트 레이어">related_site</button>
        <button type="button" class="link" title="관련 사이트 레이어">related_site</button>
        <button type="button" class="link" title="관련 사이트 레이어">related_site</button>
        <button type="button" class="link" title="관련 사이트 레이어">related_site</button>
      </div>

      <div krdsFooterLogo><span class="sr-only">KRDS - Korea Design System</span></div>

      <div krdsFooterContent>
        <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">
            <button krdsButton text size="medium">찾아오시는 길 <i class="svg-icon ico-angle right" aria-hidden="true"></i></button>
            <button krdsButton text size="medium">이용안내 <i class="svg-icon ico-angle right" aria-hidden="true"></i></button>
            <button krdsButton text size="medium">직원검색 <i class="svg-icon ico-angle right" aria-hidden="true"></i></button>
          </div>
          <div class="link-sns">
            @for (sns of snsLinks; track sns.icon) {
              <a href="#!" class="krds-btn xlarge icon border" krdsExternal>
                <span class="sr-only">{{ sns.label }}</span>
                <i class="svg-icon" [class]="sns.icon" aria-hidden="true"></i>
              </a>
            }
          </div>
        </div>
      </div>

      <div krdsFooterBottom>
        <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 krdsIdentifier>이 누리집은 보건복지부 누리집입니다.</div>
      </div>
    </footer>
  `
})
export default class FooterBasic {
  readonly snsLinks = [
    { label: '인스타그램', icon: 'ico-instagram' },
    { label: '유튜브', icon: 'ico-youtube' },
    { label: 'X', icon: 'ico-sns-x' },
    { label: '페이스북', icon: 'ico-facebook' },
    { label: '블로그', icon: 'ico-blog' }
  ]
}

KrdsFooter ​

선택자 footer[krdsFooter]

Inputs

이름타입기본값설명
idstring'krds-footer'id (KRDS CSS 기준 krds-footer)

KrdsFooterTop ​

선택자 [krdsFooterTop]

Inputs

없음

선택자 [krdsFooterLogo]

Inputs

없음

KrdsFooterContent ​

선택자 [krdsFooterContent]

Inputs

없음

KrdsFooterBottom ​

선택자 [krdsFooterBottom]

Inputs

없음

KrdsIdentifier ​

선택자 [krdsIdentifier]

Inputs

이름타입기본값설명
logoLabelstring'KRDS - Korea Design System'로고 이름 (화면낭독기)