Prev
Next
Back
각 컴포넌트에는 반응형 정책에 따른 Text Size를 적용합니다.
5개의 Pagenation을 기본으로 하며, 형태에 따라 Text Type과 Box Type, Arrow Icon의 수에 따라 Single Arrow, Dual Arrow로 구분합니다.
Page 사이 간격은 30px을 유지하며, 반응형에 따라 전체 Pagenation의 Width 값을 지정합니다.
Arrow Icon Box는 40*40px로 지정합니다.
활성화 된 페이지는 Primary 컬러로 표시합니다.
PC Width : 402px
Tab Width : 410px
Mobile Width : 343px
Page 사이 간격은 30px을 유지하며, 반응형에 따라 전체 Pagenation의 Width 값을 지정합니다.
Mobile에서만 예외적으로 Page 간격을 20px로 지정합니다.
Arrow Icon Box는 40*40px, Icon Box 간격은 5px을 유지합니다.
활성화 된 페이지는 Primary 컬러로 표시합니다.
PC Width : 402px
Tab Width : 410px
Mobile Width : 343px
Page 사이 간격은 30px을 유지하며, 반응형에 따라 고정된 Width 값은 사용하지 않습니다.
Mobile에서만 예외적으로 Page 간격 20px을 사용합니다.
활성화 된 페이지의 경우 Text Active / Primary Color 적용으로 표시합니다.
Arrow Icon 은 24*24px이며, Arrow Icon과 Page 숫자 사이 간격은 PC/Tab 에선 20px, Mobile에서 10px을 유지합니다.
가장 첫번째와 마지막 페이지에서는, 각각 Left Arrow, Right Arrow를 생략해 표기합니다.
Page 사이 간격은 30px을 유지하며, 반응형에 따라 고정된 Width 값은 사용하지 않습니다.
Mobile에서만 예외적으로 Page 간격을 20px로 지정합니다.
활성화 된 페이지의 경우 Text Active / Primary Color 적용으로 표시합니다.
Arrow Icon 은 24*24px이며, Arrow Icon과 Page 숫자 사이 간격은 PC/Tab 에선 20px, Mobile에서 10px을 유지합니다.
가장 첫번째와 마지막 페이지에서는, 각각 Left Arrow, Right Arrow를 생략해 표기합니다.
컨텐츠 정렬 등에 활용되는 Dropdown Align Option 을 정의합니다.
활성화 된 상태에서 Primary 컬러를 사용하며, Hover 시 Primary Sub 색상을 적용합니다.
옵션의 가장 긴 텍스트 기준으로, Arrow 아이콘 사이의 간격을 30px 적용한 전체 Width 값을 사용합니다.
Dropdown Text Box의 Width 값은 Align Option Width 값에 맞춰 통일합니다.
좌우 Padding은 10px를 적용합니다.
Padding : 10px
Height : 30px
Table 등의 컨텐츠 내부에서 여러 개의 Option 설정 값이 필요한 경우 활용하는 Multiple Option을 정의합니다.
Align Option과 유사하나, 텍스트에 따라 Width 가 유동적으로 적용되고, Dropdown Text Box와 Width 값이 다르게 적용된다는 차이점이 있습니다.
Text Box 내부에서 Check box icon 등을 활용해 중복 선택 옵션을 적용할 수 있습니다.
PC/ Tab
Mobile _ Filter icon
PC / Tab 레이아웃에선 일렬로 옵션을 정렬하고, Mobile 환경에선 Filter icon 형태로 페이지를 구분해 적용합니다.
Filter, Option Select를 통한 컨텐츠 검색 및 분류 시, 적용된 검색어 표기에 활용할 수 있는 Filter Tag를 정의합니다.
적용된 색상 값에 따라 Black, Primary, Point, Gray 타입으로 구분되며, 필요한 경우 위계 구조에 따라 2개 이상의 타입을 함께 적용할 수 있습니다.
텍스트 길이에 따라 Width는 유동적으로 적용되며, Padding과 아이콘 사이 간격은 모두 10px를 적용합니다.
Padding : 10px
Height : 30px