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

이미지, 텍스트, 버튼 위젯을 활용해 다음처럼 목록형 레이아웃을 제작할 수 있습니다. 이 레이아웃은 제품 또는 서비스에 대한 상세 설명 또는 멤버 목록 표시 등에 사용될 수 있습니다.

새로운 게시물이 수시로 업로드 되거나, 게시물 수가 많은 경우 게시판 위젯을 사용하실 것을 권장합니다.


실습진행

  1. 디자인 모드에 접속합니다. 접속방법
  2. 다음의 위젯들을 추가합니다. 위젯 추가방법
    • 이미지 위젯: 2개
    • 텍스트 위젯: 2개
    • 버튼 위젯: 2개

  3. 이미지 위젯들이 2열이 되도록 배치합니다.

  4. 텍스트 위젯을 배치합니다.
    주의: 검은 줄이 반드시 텍스트 위젯 너비 만큼 표시 됐을 때 마우스를 놓아야 합니다.


    1. 텍스트 위젯을 왼쪽 이미지 위젯 바로 오른쪽에 배치합니다.
    2. 나머지 텍스트 위젯은 오른쪽 이미지 위젯의 오른쪽에 배치합니다.

  5. 버튼 위젯을 배치합니다.
    주의: 검은 줄이 반드시 텍스트 위젯 너비 만큼 표시 됐을 때 마우스를 놓아야 합니다.


    1. 버튼 위젯을 왼쪽 텍스트 위젯 아래 배치합니다.
    2. 나머지 버튼 위젯은 오른쪽 텍스트 위젯 아래 배치합니다.

  6. 위 2번~5번 방법을 반복하여 다음 동영상처럼 목록 형식으로 반복해 배치합니다.

  7. 텍스트 위젯을 더블-클릭해 글자를 작성하고, 이미지 및 버튼 설정을 열어 내용을 추가합니다. 위젯 설정하기
    참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해주세요.
  8. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
  9. 배치된 위젯들을 확인합니다.

상호명 : 애드리빙

서울시 마포구 마포대로 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