[실습] 2/3/4열 응용 배치하기 : 애드리빙

디자인[실습] 2/3/4열 응용 배치하기

지금까지 배운 위젯 배치 및 그리드 조절방법을 응용해 다음과 같은 페이지를 디자인할 수 있습니다.

이번 튜토리얼에서는 이미지와 텍스트만 사용되었으나, 소유한 콘텐츠에 따라 다른 위젯을 사용할 수도 있습니다. 예를 들어 특정 이미지 위젯 대신 동영상 위젯을 사용하거나, 단일지도, 갤러리 위젯 등으로 대체할 수 있습니다.

이 튜토리얼을 진행하기에 앞서 모든 이전 튜토리얼을 미리 실습해보신 후 진행하시길 권장해 드립니다.

한 줄에 여백, 텍스트, 이미지 위젯을 배치하고, 이미지 위젯이 차지하는 그리드 수를 조절합니다. 어려움이 있는 경우 다음 3x1 위젯 배치하기 튜토리얼을 참고하세요.

한 줄에 텍스트와 이미지 위젯을 4열로 배치합니다. 문제가 있는 경우 4x2 이미지, 텍스트 여백 배치하기 튜토리얼을 참고해 볼 수 있습니다.

한 줄에 여백과 이미지 위젯을 2열로 배치하고, 텍스트 위젯을 이미지의 하단에 맞춰지도록 여백의 높이를 조절합니다.

여백, 이미지, 텍스트 위젯을 각각 1개씩 추가합니다.
다음 애니메이션을 참조하여, 위젯들을 배치하고, 그리드 수를 조절합니다.
1. 이미지 위젯을 여백 위젯의 오른쪽으로 이동합니다.
2. 텍스트 위젯을 왼쪽 여백 위젯의 바로 아래로 이동합니다.
3. 여백 위젯 최하단 끄트머리에 마우스 포인터를 올립니다.
마우스를 클릭한 다음, 마우스를 아래로 드래그합니다. 여백의 높이가 길어지며, 적당하다 싶으면 마우스를 놓습니다.
이미지 위젯과 여백 위젯 사이 마우스 포인터를 올리고, 드래그하여 이미지 위젯의 그리드 수를 8칸으로 늘립니다. 여백과 텍스트 위젯은 자동으로 4칸으로 줄어듭니다.

텍스트 위젯을 마우스로 더블-클릭합니다.
텍스트 편집기로 전환되면 글자를 입력합니다.
참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해주세요.
이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
설정 창 왼쪽 상단에 마우스 포인터를 올립니다.
내 PC에서 이미지를 업로드하거나, 무료 이미지 버튼을 클릭해 이미지를 추가합니다.
설정창 오른쪽 상단 닫기를 클릭해 설정 창을 끕니다.
남은 텍스트와 이미지 위젯에도 콘텐츠를 추가합니다.