Prev

Search

Back

Tok.D _ Design System (Beta)


Navigation - Footer

Footer

Text ColorWhiteGray4 두가지 색상으로 구분됩니다.

Background Color로는 Gray5, Gray2, Primary Color 를 활용할 수 있습니다.

각 푸터에는 반응형 정책에 따른 Text Size를 적용합니다.

푸터 내부의 텍스트 영역은 반응형 Grid System 레이아웃에 맞춰 구성합니다.

자세한 Column 정책은 Grid System - Column 에서 설명합니다.

1) Text Footer


텍스트 정보로만 구성되는 푸터를 정의합니다.

PC

PC Column 정책에서 두 단씩 묶어 레이아웃을 구성합니다.

첫번째와 마지막 단에는 Title, 이용약관 및 저작권 정보를 표기합니다.

Tab

Tab Column 정책에서 두 단씩 묶어 레이아웃을 구성합니다.

첫번째 단에는 Title 정보를 한 단으로만 구성합니다.

이용약관 및 저작권 정보 표기는 마지막 단에 우측 정렬로 표기합니다.

Mobile

PC, Tab 에서 구성된 텍스트 정보를 단락 별로 나열합니다.

이용약관 및 저작권 정보는 400px 하단에 붙여 중앙 정렬로 표기합니다.

2) Icon Footer


SNS, 홈페이지 링크 연결 등의 아이콘과 함께 활용되는 푸터를 정의합니다.

PC

PC Column 정책에서 두 단씩 묶어 레이아웃을 구성합니다.

마지막 단에는 Icon List를 우측 정렬로 표기합니다.

Tab

Tab Column 정책에서 두 단씩 묶어 레이아웃을 구성합니다.

Icon List 영역은 끝에서부터 두 단을, 4번째 단 영역과 일부 겹치도록 우측 정렬로 구성합니다.

Mobile

PC, Tab 에서 구성된 텍스트 정보를 단락 별로 나열합니다.

Icon List는 400px 하단에 붙여 중앙 정렬로 표기합니다.