사이트 디자인메인 패이지 만들기 실습 1부에서는 메뉴, 메인 베너, 설명 텍스트, 이벤트 베너를 삽입하는 것을 알아보았습니다.
2부에서는 판매 상품 전시, 그리고 이벤트 띠 배너, 회사 홍보용 유튜브 동영상을 삽입하여 메인 페이지를 완성하겠습니다.
1. 판매 상품 전시를 위한 상품 컴포넌트를 삽입합니다.
① 상품 컴포넌트를 선택합니다.

② 다양한 상품 컴포넌트 디자인 중에서 하나를 선택합니다. 이번 실습에서는 1단 구성으로 스와이핑이는 C005를 선택하겠습니다.

③ 상품 노출방식을 수동으로 선택하여 직접 노출될 상품을 선택합니다. 상단 필터 기능을 활용하면 좀 더 쉽게 상품을 찾아 선택할 수 있습니다.
⑤ 미리보기 적용을 눌러 사이트에 반영 합니다.

⑤ 사이트 디자인 프리뷰에 상품 컴포넌트가 페이지에 정상적으로 반영된 것을 확인할 수 있습니다.

2. 상품 컴포넌트의 타이틀을 추가 합니다.
- 상품에 대한 간단한 설명이 있으면 홈페이지를 이용자들의 이해가 높아 질 것입니다. 그래서 상품 컴포넌트 위에 [금주의 특가 상품] 이라는 타이틀을 입력합니다.
① 사이트 디자인 프리뷰의 상품 컴포넌트를 더블 클릭 하여 컴포넌트 편집창을 불러 옵니다.
.
② 섹션명 텍스트 입력란에 원하는 문구를 삽입합니다.

④ 상품 선택 후 미리보기 적용을 눌러 사이트에 반영 합니다.

⑤ 사이트 디자인 프리뷰 화면에 입력한 타이틀이 반영된 것을 확인할 수 있습니다.

3. 컴포넌트간 여백을 추가하여 공간 띄우기
- 기존 삽입하였던 이벤트 베너와 상품이 붙어 있어 답답한 느낌을 주고 있습니다. 이것을 해결하기 위해 이벤트 베너와 상품 사이 적절한 여백을 삽입해보겠습니다.
① 여백 컴포넌트를 선택합니다.

② 여백 높이를 설정합니다. 기본값은 10px 이며 상황에 따라 여백값을 수정할 수 있습니다. 여백값을 수정 후 미리 보기 적용을 눌러 편집중인 페이지에 반영합니다.

③ 사이트 디자인 프리뷰 화면 하단에 여백이 삽입된걸 확인할 수 있습니다. 이번 실습에서는 이벤트 베너와 상품 사이에 여백을 삽입해야 하기 때문에 여백 영역을 클릭한 상태로 끌어올려 원하는 위치에 배치 합니다.

④ 여백이 원하는 위치에 정상 반영 되어 있는지 확인 할 수 있습니다.

4. 이벤트 띠 베너삽입하기
- 페이지 중간에 분위기 환기 등의 목적으로 띠베너를 추가하도록 하겠습니다.
① 이미지 베너를 선택합니다.

② 모니터 좌우를 꽉 채우는 띠 베너를 삽입하기 위해 B011베너를 선택합니다.

③ 베너추가를 선택하여 베너 편집 창을 불러 옵니다. 이미지 불러오기를 통해 기존 별도로 편집한 띠베너 이미지를 추가 합니다. 이번 실습에 사용된 이미지 크기는 (1920*165) 입니다. 텍스트 까지 편집된 이미지를 삽입할 것이기 때문에 타이틀, 설명은 공란으로 설정 합니다.

④ 미리보기 적용 버튼을 눌러 편집중인 페이지에 반영합니다.

⑤ 사이트 디자인 프리뷰 화면에 정상적으로 반영되어 있는지 확인합니다.

5. 유튜브 동영상을 삽입합니다.
- 다양한 유튜브 영상 콘텐츠를 사이트에 삽입하여 시각적 효과를 극대화 할 수 있습니다.
① 동영상 콘텐츠의 효과를 높이기 위해 홍보, 안내 문구를 먼저 추가합니다.

② 유튜브 콘텐츠를 추가하기 위해 동영상 컴포넌트를 선택합니다.

③ 추가할 유튜브 영상의 전체 주소를 입력합니다. 그리고 재생 옵션을 선택한 후 미리보기 적용을 선택하여 편집중인 페이지에 반영합니다.

④ 사이트 디자인 프리뷰 화면에 유튜브 동영상이 정상적으로 삽입되었는지 확인 할 수 있습니다

5. 페이지 저장을 눌러 편집한 내용을 최종 반영합니다.

원하시는 답변이 아닌가요? 우측 하단 실시간 채팅을 신청하시면 최대한 빨리 답변 드리도록 하겠습니다.
1. 판매 상품 전시를 위한 상품 컴포넌트를 삽입합니다.
① 상품 컴포넌트를 선택합니다.

② 다양한 상품 컴포넌트 디자인 중에서 하나를 선택합니다. 이번 실습에서는 1단 구성으로 스와이핑이는 C005를 선택하겠습니다.

③ 상품 노출방식을 수동으로 선택하여 직접 노출될 상품을 선택합니다. 상단 필터 기능을 활용하면 좀 더 쉽게 상품을 찾아 선택할 수 있습니다.
⑤ 미리보기 적용을 눌러 사이트에 반영 합니다.
⑤ 사이트 디자인 프리뷰에 상품 컴포넌트가 페이지에 정상적으로 반영된 것을 확인할 수 있습니다.
2. 상품 컴포넌트의 타이틀을 추가 합니다.
① 사이트 디자인 프리뷰의 상품 컴포넌트를 더블 클릭 하여 컴포넌트 편집창을 불러 옵니다.
② 섹션명 텍스트 입력란에 원하는 문구를 삽입합니다.

④ 상품 선택 후 미리보기 적용을 눌러 사이트에 반영 합니다.
⑤ 사이트 디자인 프리뷰 화면에 입력한 타이틀이 반영된 것을 확인할 수 있습니다.
3. 컴포넌트간 여백을 추가하여 공간 띄우기
① 여백 컴포넌트를 선택합니다.
② 여백 높이를 설정합니다. 기본값은 10px 이며 상황에 따라 여백값을 수정할 수 있습니다. 여백값을 수정 후 미리 보기 적용을 눌러 편집중인 페이지에 반영합니다.
③ 사이트 디자인 프리뷰 화면 하단에 여백이 삽입된걸 확인할 수 있습니다. 이번 실습에서는 이벤트 베너와 상품 사이에 여백을 삽입해야 하기 때문에 여백 영역을 클릭한 상태로 끌어올려 원하는 위치에 배치 합니다.
④ 여백이 원하는 위치에 정상 반영 되어 있는지 확인 할 수 있습니다.
4. 이벤트 띠 베너삽입하기
① 이미지 베너를 선택합니다.
② 모니터 좌우를 꽉 채우는 띠 베너를 삽입하기 위해 B011베너를 선택합니다.
③ 베너추가를 선택하여 베너 편집 창을 불러 옵니다. 이미지 불러오기를 통해 기존 별도로 편집한 띠베너 이미지를 추가 합니다. 이번 실습에 사용된 이미지 크기는 (1920*165) 입니다. 텍스트 까지 편집된 이미지를 삽입할 것이기 때문에 타이틀, 설명은 공란으로 설정 합니다.
④ 미리보기 적용 버튼을 눌러 편집중인 페이지에 반영합니다.

⑤ 사이트 디자인 프리뷰 화면에 정상적으로 반영되어 있는지 확인합니다.
5. 유튜브 동영상을 삽입합니다.
① 동영상 콘텐츠의 효과를 높이기 위해 홍보, 안내 문구를 먼저 추가합니다.
② 유튜브 콘텐츠를 추가하기 위해 동영상 컴포넌트를 선택합니다.

③ 추가할 유튜브 영상의 전체 주소를 입력합니다. 그리고 재생 옵션을 선택한 후 미리보기 적용을 선택하여 편집중인 페이지에 반영합니다.
④ 사이트 디자인 프리뷰 화면에 유튜브 동영상이 정상적으로 삽입되었는지 확인 할 수 있습니다
5. 페이지 저장을 눌러 편집한 내용을 최종 반영합니다.