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

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

실습진행

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

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

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

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

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



관련 도움말

목록으로