Header Component - 전부 버그

컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.

01. With Background

백그라운드와 함께 사용할 수 있는 헤더 컴포넌트이다. 백그라운드 헤더는 Text, Swipe Cards 2가지 타입이 있다.

01-01. Text Type

Default는 Text 타입으로, 백그라운드 헤더 컴포넌트 추가 시 다음과 같이 텍스트와 버튼이 화면에 출력된다.

배경 이미지를 추가하면 다음과 같이 백그라운드로 추가한 이미지가 삽입된다.

텍스트(“Enter text here") 영역을 마우스로 클릭하면, 다음과 같이 텍스트 셋팅 영역이 우측에 출력된다.

원하는 텍스트를 HTML로 입력하고 저장하자.

버튼을 클릭하면, 버튼 컴포넌트의 셋팅 옵션이 우측에 출력된다. 원하는 설정을 진행하고 저장하자.

버튼의 디자인을 설정 할 수도 있다.

설정 완료 후 미리보기 아이콘을 클릭하여 셋팅 결과를 미리 확인 할 수 있다.

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithBackground

01-02. Card Type

Swipe card 타입으로, 백그라운드 헤더 컴포넌트를 설정 하면, 다음과 같이 텍스트와 Swipe가 화면에 출력된다.

배경 이미지를 추가하면 다음과 같이 백그라운드로 추가한 이미지가 삽입된다.

Card영역에서 추가( ) 아이콘을 클릭하자. 다음과 같이 카드 이미지 셋팅 옵션이 Modal로 출력된다.

카드 이미지와 함께 버튼을 추가하면, 다음과 같이 화면에 반영된다.

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithBackground

02. with Countdown

카운트다운과 함께 사용하는 헤더 컴포넌트이다. 컴포넌트 추가 초기 화면은 다음과 같다.

카운트다운 헤더는 Text, Circular, Icon Countdown 3가지 타입이 있다.

모든 카운트다운 헤더에 공통으로 들어가는 카운트다운 UI 타입은 End Date와 D-day 2가지가 있다.

End date : 카운트다운 종료일시를 직접 지정하여 셋팅
D-day : 카운트다운을 시작할 Base Date를 지정하고, 카운트할 D-day 일수를 지정하여 셋팅

End date
D-day

Icon Countdown의 경우에만, 아이콘 설정 관련 옵션이 추가로 출력된다.

카운트다운 헤더 종류와 카운트 UI타입별 결과물은 다음과 같다.

	카운트 타입{End date}	카운트 타입{D-day}
Text
Circular
Icon

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/HeaderWithCountdown

03. with Video

비디오와 함께 사용되는 헤더 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

비디오는 Upload, Url 2가지 방법으로 셋팅 할 수 있다. 유투브 URL을 삽입하고 저장하면, 아래와 같이 영상이 화면내에서 Play된다. (ex. 아이온커뮤니케이션즈 유투브 영상 : https://www.youtube.com/watch?v=fq6kI35Kfmg)