이미지 위젯을 왼쪽에, 텍스트 위젯을 오른쪽에 2열 배치하고, 다음 줄부터는 반대로 배치합니다. 이를 반복하면 이미지와 텍스트가 지그재그로 배치됩니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법
2. 이미지 위젯과 텍스트 위젯을 한 개씩 추가합니다. 위젯 추가방법

3. 이미지 위젯의 오른쪽에 텍스트 위젯을 배치합니다. 자세한 배치방법은 아래 애니메이션과 함께 지침을 확인합니다.

   

   1. 텍스트 위젯 하나를 마우스로 클릭합니다.
   2. 첫 번째 이미지 위젯의 오른쪽으로 텍스트 위젯을 드래그합니다.
   3. 첫 번째 이미지 위젯의 오른쪽에 검은 줄이 생기면, 마우스를 놓습니다.

4. 이미지 위젯과 텍스트 위젯을 새로 추가하고, 이번에는 텍스트 위젯을 이미지 위젯의 왼쪽에 배치합니다. 다음 애니메이션을 참조할 수 있습니다.

   

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