위젯 배치 및 그리드 실습
이 도움말에서는 준비된 예제에 따라 위젯을 추가, 배치하고, 그리드 수를 조절해 레이아웃을 디자인하는 방법을 설명합니다.
튜토리얼을 진행하기에 앞서 다음 사항들을 미리 익혀두시면 더 재밌고 빠르게 그리드 활용법을 배우실 수 있습니다.
앞서 알아두면 좋은 사항
위젯 배치 & 그리드 실습하기
총 7개의 튜토리얼에 따라 디자인 모드에서 위젯을 배치하고 그리드 조절하는 방법을 배워봅니다.
[실습] 1x1 위젯 배치, 정렬하기
이미지, 게시판, 갤러리와 같은 위젯은 단독으로 정렬이 불가능합니다. 이 경우 여백 위젯을 활용해 정렬할 수 있습니다. 여백 위젯을 사용하지 않는 경우 12칸 그리드에 꽉 차게 배치됩니다.
[실습] 3x1 위젯 배치하기
한 줄에 이미지 위젯 3개를 3열로 배치해 봅니다. 단순 배치 시 각 위젯의 그리드 수는 균등하게 나눠져 배치됩니다. 필요에 따라 특정 위젯의 그리드 수만 다르게 적용해 위젯의 크기를 조절할 수도 있습니다.
[실습] 3x2 이미지, 텍스트 위젯 배치하기
한 줄에 이미지 위젯 3개를 3열로 배치하고, 각 이미지 위젯 아래 텍스트 위젯을 배치해 봅니다. 주제를 세분화하여 정보를 제공할 때 유용합니다. 예) 서비스 종류, 팀원 소개, 상품 종류 등
[실습] 3x3 지그재그 배치하기
이미지와 텍스트를 지그재그로 배치해 봅니다. 소주제를 더욱 확실하게 구분하여 정보를 전달할 때 사용될 수 있습니다.
[실습] 4x2 이미지, 텍스트, 여백 배치하기
중앙에 이미지를 2열로 배치하고, 이미지 양끝에 여백과 텍스트를 추가하는 방법을 배워봅니다.
[실습] 4x4 목록형 배치하기
이미지 위젯과 텍스트 위젯을 교차하여 목록 형식으로 배치해 봅니다. 필요에 따라 버튼을 추가해 클릭 시 세부정보 페이지로 이동되도록 구성할 수 있습니다.
[실습] 복합 배치하기
여러 위젯들을 다양한 방식으로 배치할 수 있습니다.
