디자인[실습] 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. 의도한 디자인으로 나타나는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기를 클릭해 적용합니다.

상호명 : 애드리빙

서울시 마포구 마포대로 63-8 삼창프라자빌딩 1539호

사업자등록번호 : 106-04-80687 조회하기

통신판매업신고번호 : 제 2015-서울용산-00950 호

T.1566-5733  F.02-6499-3299  E.so2815@naver.com

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00