디자인[실습] 3x3 지그재그 배치하기

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


실습진행

  1. 디자인 모드에 접속합니다. 접속방법
  2. 이미지 위젯텍스트 위젯을 한 개씩 추가합니다. 위젯 추가방법
  3. 이미지 위젯의 오른쪽에 텍스트 위젯을 배치합니다. 자세한 배치방법은 아래 애니메이션과 함께 지침을 확인합니다.


    1. 텍스트 위젯 하나를 마우스로 클릭합니다.
    2. 첫 번째 이미지 위젯의 오른쪽으로 텍스트 위젯을 드래그합니다.
    3. 첫 번째 이미지 위젯의 오른쪽에 검은 줄이 생기면, 마우스를 놓습니다.
  4. 이미지 위젯과 텍스트 위젯을 새로 추가하고, 이번에는 텍스트 위젯을 이미지 위젯의 왼쪽에 배치합니다. 다음 애니메이션을 참조할 수 있습니다.


  5. 필요한 만큼 이미지 위젯과 텍스트 위젯을 추가해, 좌우 교대로 다르게 배치해봅니다.
  6. 이미지 설정을 열어 이미지를 추가하고, 텍스트 위젯을 마우스 더블-클릭해 글자를 추가합니다.
    참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해주세요.
  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

test