디자인[실습] 4x2 이미지, 텍스트, 여백 배치하기

3x2 배치, 3x3 지그재그 배치 방법을 응용해 다음과 같은 레이아웃을 만들어 볼 수 있습니다. 이전 실습을 진행하지 않은 경우 앞서 기초 배치 방법을 익혀주세요.


실습진행

  1. 디자인 모드에 접속합니다. 접속방법
  2. 다음의 위젯들을 추가합니다. 위젯 추가방법
    • 여백 위젯: 5개
    • 텍스트 위젯: 3개
    • 이미지 위젯: 4개
  3. 타이틀로 사용할 텍스트 위젯을 상단으로 이동합니다. 첫 번째 텍스트 위젯을 마우스 클릭 후, 클릭을 유지한 채로 최상단 여백 위젯 바로 아래로 이동합니다. 아래 애니메이션을 참조할 수 있습니다.

  4. 남은 텍스트 위젯 두 개를, 여백 위젯의 오른쪽 및 왼쪽에 배치합니다. 아래 애니메이션을 참조하세요.


  5. 이미지 위젯 두 개를 여백과 텍스트 위젯 사이로 이동합니다. 다음 애니메이션을 참조합니다.


  6. 위 5번과 같은 방법으로, 남은 이미지 위젯 두 개를 다음 줄의 여백과 텍스트 위젯 사이로 이동합니다. 다음 그림처럼 구성됩니다.

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



관련 도움말

상호명 : 애드리빙

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

test