Page Comparison

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

...

01. Card Content

카드 형태로 컨텐츠를 표현하고자 할 때 사용 가능한 컨텐츠 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

카드 컨텐츠 컴포넌트를 추가한 직후의 초기 화면은 다음과 같다.

...

헤딩 헤딩과 디스크립션 텍스트 영역을 클릭하면, 관련 셋팅 옵션이 우측에 출력된다. 원하는 텍스트를 입력하자.

...

각각의 카드 영역은 이미지, 타이틀, 디스크립션 영역을 클릭하면, 관련 셋팅 , 버튼으로 구성되어 있다.

카드 영역을 선택하면, 이미지와 버튼 관련 옵션이 우측에 출력된다.

...

이미지 영역을 클릭하면, 관련 셋팅 옵션이 우측에 출력된다.

...

각각의 버튼도 셋팅 할 수 있으며, 삭제도 가능 하다.

...

컨텐츠 내용을 설정하고 저장하면만약 버튼을 사용하고 싶지 않다면, 카드 설정 마지막에 위치한 버튼 목록에서 버튼 삭제()아이콘을 클릭하면 된다.

...

이미지, 타이틀, 디스크립션, 버튼 영역을 각각 클릭하여, 해당 셋팅 옵션만 우측에서 확인 할 수도 있다. 카드를 구성하는 요소 각각이 셋팅 옵션은 Element Components [19] 를 참고하자.

...

각각의 카드별로 컨텐츠 내용을 설정하면, 다음과 같이 카드 타입의 컨텐츠가 완성된다.

...

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

...

02. Feature

특정 피쳐를 사용하여 컨텐츠를 표현하고자 할 때 사용하는 컨텐츠 컴포넌트이다.

Image AddedImage Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

피쳐 컨텐츠 컴포넌트는 Mobile Features, Side by side, Card Grid, Text Grid, Swipe 5개 타입이 있다.

...

02-1. Mobile Feature

피쳐 컨텐츠 컴포넌트를 추가한 직후의 초기 화면은 다음과 같다. 타입은 Mobile Features가 Default로 설정된다.

...

02-2. Side by side

02-3. Card Grid

02-4. Text Grid

02-5. Swipe

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

...

03. Client

클라이언트 정보를 표현하고자 할 때 주로 사용하는 컨텐츠 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

클라이언트 컴포넌트는 Client1, MobileSlider 2가지 타입이 존재한다.

...

클라이언트 컴포넌트를 추가하면 다음과 같이 Client1이 Default Type으로 출력된다.

...

행과 열은 기본 5행, 1열로 출력되며, 옵션에 숫자를 입력하여 변경할 수 있다. 이 옵션은 Images 테이블과도 연관된다. 행/열을 설정했다면, 반드시 이에 맞는 이미지를 테이블에 셋팅해야만 한다. 그렇지 않으면, 이미지 영역은 Blank로 출력된다.

• Number of Columns : 행 개수 설정

• Number of Rows : 열 개수 설정

• Images Table : 행/열에 맞추어 추가해야하는 이미지 관리 테이블

CASE 1. Number of Columns="3"으로 설정하고, Images 추가 완료 시 화면 Image Added

CASE 2. Number of Columns="3", Number of Rows="2"설정하고, Images 추가 완료 시 화면 Image Added

CASE 3. Number of Columns="8"으로 설정하고, Images 테이블에 이미지 미추가시 화면 Image Added

이미지 셋팅 방법은 2가지가 있다.

첫번째, Client 컴포넌트에 있는 Images 옵션에서 셋팅() 아이콘을 클릭하여 설정 할 수 있다. Image Added

두번째, Client 컴포넌트 화면에서 바로 이미지를 클릭하면, 우측에 이미지 관련 셋팅 영역이 출력된다. Image Added

행/열과 이미지 셋팅을 완료하였다면, Swiper와 기타 옵션을 설정해보자.

• Type Swiper :

  • Single Slide :

  • Multiple Slide :

• Speed : 슬라이드 롤링 스피드 설정

• Focus Active :

• Auto Play : 슬라이드 자동 롤링 기능

• Hide Pagenation : 페이지네이션 표시 숨김 기능

• Pagination Type : 2가지 페이지네이션 타입{Dot, Number, Number with navigation} 선택 가능

...

이미지와 스와이퍼를 모두 셋팅했다면, Heading와 text도 설정해보자. 해당 영역을 각각 클릭하면, 우측에 해당 설정 내용이 출력된다. 기본적인 Heading, text Customized 설정 내용은 다른 컴포넌트와 모두 동일하다.

...

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

...

04. Download Content

다운로드를 안내하는 컨텐츠가 필요한 경우, 사용하는 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

다운로드 컴텐츠 컴포넌트를 처음 추가하면, 다음과 같이 화면이 나타난다.

...

파일을 업로드하면..

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

...

05. Media

미디어가 포함된 컨텐츠가 필요하다면, 미디어 컨텐츠 컴포넌트를 사용할 수 있다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

미디어 컴포넌트는 Center Content, Side by side, Content Media 3가지 타입이 존재한다.

...

컴포넌트를 추가한 첫 화면은 다음과 같다. Center Content 가 Default Type으로 설정되어 있다.

...

미디어 타입은 Image, Video 2 가지 타입을 업로드 할 수 있다.

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

...

06. Team

팀 소개 컨텐츠에 사용 되는 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

Thumbnail Grid, Card Swipe, Text Swipe 총 3가지 타입이 존재한다.

...

팀 컨텐츠를 추가하면, Thumbnail Grid 타입의 팀 컴포넌트가 Default로 화면에 출력된다.

...

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

...

07. Pricing

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

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

...

08. Testimonial

베스트 리뷰, 추천의 말 등을 표현하고자 할 때 사용 가능한 컨텐츠 컴포넌트이다.

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

추천 컴포넌트(Testimonial)는 Users Compliment, user Rating, Users Quete, Card 4가지 타입이 있다.

...

추천 컴포넌트(Testimonial)를 처음 화면에 추가하면, 다음과 같이 Users Compliment가 Default 로 출력된다.

...

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

...

09. Banner

...

Image Added 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

배너 컴포넌트를 추가한 초기 화면은 다음과 같다.

...

특별한 옵션은 없으며, 이미 만들어진 배너 목록 중 하나를 선택 할 수 있다.

...

첫번째 Galasy Watch4 를 선택하고 저장하면, 다음과 같이 화면이 출력된다.

Status
colour Red title need check

URL 누락됨

bug

Jira Legacy
server System Jira serverId 843baac6-3178-3477-a407-550e40078e77 key ICE4-4220

...

설정() 아이콘을 클릭하면, 셋팅되어 있는 배너 정보를 확인 할 수 있다.

...

추가() 아이콘을 클릭하여, 신규 배너를 바로 등록 할 수 있다.

Banner Config를 선택하고, 해당 Config에 맞추어 배너를 등록하고 셋팅하면 된다.

...

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