위젯 배치 및 그리드 실습

이 도움말에서는 준비된 예제에 따라 위젯을 추가, 배치하고, 그리드 수를 조절해 레이아웃을 디자인하는 방법을 설명합니다.

튜토리얼을 진행하기에 앞서 다음 사항들을 미리 익혀두시면 더 재밌고 빠르게 그리드 활용법을 배우실 수 있습니다.

앞서 알아두면 좋은 사항

• 디자인 모드 접속 방법
• 메뉴 추가, 이동, 복제, 삭제 방법
• 위젯 추가, 이동, 복제, 삭제 방법
• 텍스트 입력 방법
• 사이트 미리보기, 게시하기, 되돌리기

위젯 배치 & 그리드 실습하기 

총 7개의 튜토리얼에 따라 디자인 모드에서 위젯을 배치하고 그리드 조절하는 방법을 배워봅니다.

[실습] 1x1 위젯 배치, 정렬하기

이미지, 게시판, 갤러리와 같은 위젯은 단독으로 정렬이 불가능합니다. 이 경우 여백 위젯을 활용해 정렬할 수 있습니다. 여백 위젯을 사용하지 않는 경우 12칸 그리드에 꽉 차게 배치됩니다.

실습 시작하기

[실습] 3x1 위젯 배치하기

한 줄에 이미지 위젯 3개를 3열로 배치해 봅니다. 단순 배치 시 각 위젯의 그리드 수는 균등하게 나눠져 배치됩니다. 필요에 따라 특정 위젯의 그리드 수만 다르게 적용해 위젯의 크기를 조절할 수도 있습니다.

실습 시작하기

[실습] 3x2 이미지, 텍스트 위젯 배치하기

한 줄에 이미지 위젯 3개를 3열로 배치하고, 각 이미지 위젯 아래 텍스트 위젯을 배치해 봅니다. 주제를 세분화하여 정보를 제공할 때 유용합니다. 예) 서비스 종류, 팀원 소개, 상품 종류 등

실습 시작하기

[실습] 3x3 지그재그 배치하기

이미지와 텍스트를 지그재그로 배치해 봅니다. 소주제를 더욱 확실하게 구분하여 정보를 전달할 때 사용될 수 있습니다.

실습 시작하기

[실습] 4x2 이미지, 텍스트, 여백 배치하기

중앙에 이미지를 2열로 배치하고, 이미지 양끝에 여백과 텍스트를 추가하는 방법을 배워봅니다.

실습 시작하기

[실습] 4x4 목록형 배치하기

이미지 위젯과 텍스트 위젯을 교차하여 목록 형식으로 배치해 봅니다. 필요에 따라 버튼을 추가해 클릭 시 세부정보 페이지로 이동되도록 구성할 수 있습니다.

실습 시작하기

[실습] 복합 배치하기

여러 위젯들을 다양한 방식으로 배치할 수 있습니다.

실습 시작하기

도움말에 찾으시는 답변이 없으신가요? 문의하기