이지스트에서 제공하는 다양한 컴포넌트를 추가, 배치하여 메인 페이지를 디자인 하는 방법을 설명합니다.
1. 메뉴 추가하기
① 메뉴 컴포넌트를 선택합니다.

② 메뉴 디자인을 선택합니다. 이번 실습에서는 M010디자인을 선택하겠습니다

③ 메뉴 설정값을 정합니다. 이번 실습에서는 메뉴 종류가 많지 않아서 메뉴간 간격을 넓게 80으로 하였고 메뉴 글씨 크기도 18로 키웠습니다.
설정을 마치고 미리보기적용을 선택합니다.

④ 사이트 디자인 프리뷰 화면에 메뉴가 추가된걸 확인 할 수 있습니다

2. 메인베너 추가하기
- 이번 실습에서는 메인 베너를 개방감 있게 화면에 꽉 찰 수 있도록 1920px넓이의 이미지를 넣도록 하겠습니다
① 이미지 베너를 선택합니다.

② 화면 전체를 채우기 위해 B011이미지 베너를 선택합니다.

③ 베너 추가 버튼을 선택하여 베너 이미지 설정 창을 추가 합니다.

④ 베너 이미지를 불러 옵니다. 이미지를 불러오는 방법은 PC에 저장된 사진을 불러 오거나 이지스트에서 제공하는 셈플 이미지를 불러 올 수 있습니다. 이번 실습에서는 PC에 저장된, 디자인 처리가 된 이미지를 업로드 하였습니다. 이번 실습에 사용된 셈플 이미지는 첨부화일에서 다운 받을 수 있습니다. 이미지를 불러온 후 미리보기 적용 버튼을 선택합니다.

⑤ 사이트 디자인 프리뷰 화면에 이미지가 추가된 것을 확인 할 수 있습니다

3. 텍스트 추가하기
- 사이트를 설명하고 여행사의 장점을 강조하는 텍스트 문구를 삽입하겠습니다.
① 텍스트 컴포넌트를 선택합니다.

② 나타난 텍스트 편집창에서 문구를 입력합니다. 크기와 간격, 너비, 색상등을 지정할 수 있습니다. 편집을 마친 후 미리보기 적용을 선택합니다.

③ 사이트 디자인 프리뷰 화면에 편집한 텍스트가 추가된 것을 확인할 수 있습니다.

4. 이벤트 베너 추가하기
- 이벤트 베너란 이벤트를 홍보하기 위해 웹사이트 상단이나 중앙에 배치되는 배너 광고입니다.
- 사용자들이 이벤트에 대한 정보를 빠르게 확인하고 참여하기 쉽게 만들어주며, 이벤트의 홍보 효과를 높이는 데 큰 역할을 합니다.
① 베너 컴포넌트를 선택합니다.

② 다양한 베너 디자인 중 마음에드는 이미지를 선택합니다. 이번 실습에서는 B003 베너 컴포넌트를 선택 하겠습니다.

③ 베너 추가 버튼을 선택해 배너에 들어갈 이미지와 문구를 편집 할 베너 편집창을 불러 옵니다.

④ 이벤트 베너 위에 보여질 베너 타이틀을 입력합니다. 이번 실습에서는 베너에 들어갈 타이틀 문구를 [추천보기] 를 통해 정하였습니다.

⑤ 이벤트 베너 위에 보여질 설명 문구를 입력합니다.

⑥ 이벤트 베너 에 노출할 이미지를 선택합니다. 내PC에 있는 이미지를 직접 업로드 하거나 트립박스가 추천하는 고품질 이미지 중 하나를 적용할 수 있습니니다.

⑦ 위의 설명 ②번 과정에서 선택한 B003베너 디자인은 베너 이미지 3장을 적용하는게 가장 어울리기 때문에 ③~⑥ 과정을 반복합니다.

⑧ 미리보기 적용을 눌러 사이트에 반영합니다.

⑨ 이벤트 베너가 정상적으로 삽입되어 있는지 확인합니다.

원하시는 답변이 아닌가요? 우측 하단 실시간 채팅을 신청하시면 최대한 빨리 답변 드리도록 하겠습니다.
1. 메뉴 추가하기
① 메뉴 컴포넌트를 선택합니다.
② 메뉴 디자인을 선택합니다. 이번 실습에서는 M010디자인을 선택하겠습니다
③ 메뉴 설정값을 정합니다. 이번 실습에서는 메뉴 종류가 많지 않아서 메뉴간 간격을 넓게 80으로 하였고 메뉴 글씨 크기도 18로 키웠습니다.
설정을 마치고 미리보기적용을 선택합니다.
④ 사이트 디자인 프리뷰 화면에 메뉴가 추가된걸 확인 할 수 있습니다
2. 메인베너 추가하기
① 이미지 베너를 선택합니다.
② 화면 전체를 채우기 위해 B011이미지 베너를 선택합니다.
③ 베너 추가 버튼을 선택하여 베너 이미지 설정 창을 추가 합니다.
④ 베너 이미지를 불러 옵니다. 이미지를 불러오는 방법은 PC에 저장된 사진을 불러 오거나 이지스트에서 제공하는 셈플 이미지를 불러 올 수 있습니다. 이번 실습에서는 PC에 저장된, 디자인 처리가 된 이미지를 업로드 하였습니다. 이번 실습에 사용된 셈플 이미지는 첨부화일에서 다운 받을 수 있습니다. 이미지를 불러온 후 미리보기 적용 버튼을 선택합니다.
⑤ 사이트 디자인 프리뷰 화면에 이미지가 추가된 것을 확인 할 수 있습니다
3. 텍스트 추가하기
① 텍스트 컴포넌트를 선택합니다.
② 나타난 텍스트 편집창에서 문구를 입력합니다. 크기와 간격, 너비, 색상등을 지정할 수 있습니다. 편집을 마친 후 미리보기 적용을 선택합니다.
③ 사이트 디자인 프리뷰 화면에 편집한 텍스트가 추가된 것을 확인할 수 있습니다.
4. 이벤트 베너 추가하기
① 베너 컴포넌트를 선택합니다.
② 다양한 베너 디자인 중 마음에드는 이미지를 선택합니다. 이번 실습에서는 B003 베너 컴포넌트를 선택 하겠습니다.
③ 베너 추가 버튼을 선택해 배너에 들어갈 이미지와 문구를 편집 할 베너 편집창을 불러 옵니다.
④ 이벤트 베너 위에 보여질 베너 타이틀을 입력합니다. 이번 실습에서는 베너에 들어갈 타이틀 문구를 [추천보기] 를 통해 정하였습니다.
⑤ 이벤트 베너 위에 보여질 설명 문구를 입력합니다.
⑥ 이벤트 베너 에 노출할 이미지를 선택합니다. 내PC에 있는 이미지를 직접 업로드 하거나 트립박스가 추천하는 고품질 이미지 중 하나를 적용할 수 있습니니다.
⑦ 위의 설명 ②번 과정에서 선택한 B003베너 디자인은 베너 이미지 3장을 적용하는게 가장 어울리기 때문에 ③~⑥ 과정을 반복합니다.
⑧ 미리보기 적용을 눌러 사이트에 반영합니다.

⑨ 이벤트 베너가 정상적으로 삽입되어 있는지 확인합니다.
