Prev

Search

Back

Tok.D _ Design System (Beta)


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f20d44ef-2ad8-46b7-bfb3-2956ac6cb718/Untitled.png

Navigation - Footer

Footer

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

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

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

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

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

1) Text Footer


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

PC

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/91ac6e6f-13c1-4073-9625-c4af305d439f/_2021-03-22__11.31.12.png

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

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

Tab

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ca81f56f-6bba-4a0a-aa70-02a9a2103d5a/_2021-03-22__1.00.00.png

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

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

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

Mobile

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3125091d-e64d-45d2-be3c-2da69877a752/_2021-03-22__11.31.35.png

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

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

2) Icon Footer


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

PC

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7469fac9-326b-43ac-baf8-21b180bacdaf/_2021-03-22__11.32.22.png

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

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

Tab

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f06ce9df-d4ff-4fee-a3b7-d6840627bded/_2021-03-22__11.32.34.png

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

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

Mobile

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/540ef4c5-d27b-42ea-ad64-910c1aa8e940/_2021-03-22__11.58.14.png

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

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