• 가이드

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

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

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

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

실습진행

1단계, 한 줄 3열 위젯 배치하기

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

  1. 새로운 메뉴를 추가합니다. 메뉴 추가방법
  2. 여백, 텍스트, 이미지 위젯을 1개씩 추가합니다. 위젯 추가방법
  3. 위젯들을 왼쪽부터 여백, 텍스트, 이미지 순으로 한 줄에 3열이 되도록 배치합니다.
  4. 배치한 위젯들의 그리드 수를 위 그림처럼 여백(3칸), 텍스트(3칸), 이미지(6칸)으로 조절합니다. 그리드 조절방법
2단계, 한 줄 4열 위젯 배치하기

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

  1. 텍스트이미지 위젯을 각각 2개씩 추가합니다.
  2. 위젯들을 왼쪽부터 텍스트, 이미지, 이미지, 텍스트 순으로 한 줄에 4열이 되도록 배치합니다.
3단계, 한 줄  2열 위젯 배치하기

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

  1. 여백, 이미지, 텍스트 위젯을 각각 1개씩 추가합니다.
  2. 다음 애니메이션을 참조하여, 위젯들을 배치하고, 그리드 수를 조절합니다.

    1. 이미지 위젯을 여백 위젯의 오른쪽으로 이동합니다.
    2. 텍스트 위젯을 왼쪽 여백 위젯의 바로 아래로 이동합니다.
    3. 여백 위젯 최하단 끄트머리에 마우스 포인터를 올립니다.

  3. 마우스를 클릭한 다음, 마우스를 아래로 드래그합니다. 여백의 높이가 길어지며, 적당하다 싶으면 마우스를 놓습니다.
  4. 이미지 위젯과 여백 위젯 사이 마우스 포인터를 올리고, 드래그하여 이미지 위젯의 그리드 수를 8칸으로 늘립니다. 여백과 텍스트 위젯은 자동으로 4칸으로 줄어듭니다.
4단계, 텍스트 입력 및 이미지 추가하기
  1. 텍스트 위젯을 마우스로 더블-클릭합니다.
  2. 텍스트 편집기로 전환되면 글자를 입력합니다.
    참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해주세요.
  3. 이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 설정 창 왼쪽 상단에 마우스 포인터를 올립니다.
  5. 내 PC에서 이미지를 업로드하거나, 무료 이미지 버튼을 클릭해 이미지를 추가합니다.
  6. 설정창 오른쪽 상단 닫기를 클릭해 설정 창을 끕니다.
  7. 남은 텍스트와 이미지 위젯에도 콘텐츠를 추가합니다.

5단계, 디자인 확인 및 게시하기
  1. 미리보기를 클릭해 의도한 디자인으로 나타나는지 확인합니다.
  2. 문제가 없다면 게시하기를 클릭해 실제 사이트에 적용합니다.
목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널, 엑심베이 공식파트너입니다.