어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 본문 이동은 알트 키 플러스 2 키입니다.

Mong9
반응형홈페이지제작전문

본문 영역

반응형 설정

반응형 웹이란 PC, 태블릿 PC, 모바일 등 기기 종류에 따라 웹페이지의 크기가 자동으로 바뀌는 것을 말하며
웹(Web)에 접속하는 기기에 따라 반응하는(Responsive) 디자인 (Design)을 말합니다.

예전엔 웹문서를 제작할 때 PC형과 모바일형을 별도로 제작하였으나 요즘엔 하나의 문서를 기기에 따라 반응하도록 제작하는 것이 기술입니다.

이런 문서는 일반인들이 제작하기 힘들어 보통 전문가에게 의뢰를 하지만 몽9에디터를 사용하면 코딩을 하지 못해도 반응형 웹문서를 제작할 수 있습니다.
반응형으로 제작된 100개의 샘플 블록을 제공하고, 편집을 하면서 PC, 태블릿 PC, 모바일 기기 화면을 실시간으로 확인할 수 있는 반응형 모드창이 있어
초보자도 쉽게 반응형 문서를 제작할 수 있습니다.

반응형 처리 화면

반응형 화면에 맞게 객체설정, 레이아웃 변경이 가능합니다.

반응형 컬럼 정렬

몽9에디터만이 갖고 있는 강력한 시스템인 반응형에 따른 컬럼 정렬 버튼에 대해 설명합니다. 컬럼 정렬 버튼은 모바일 모드에서만 등장하는 기능입니다.
PC버전에서 작성한 블록을 모바일에서도 깨지지 않게 너비를 %를 이용해 조정할 수 있습니다.

설정 방법

모드창에서 PC모드가 아닌 모바일 가로 버전 또는 모바일 세로 버전으로 변경한 후 객체를 선택하면 오른쪽에 컬럼 정렬 창이 활성화됩니다.
이때 객체를 모바일에 맞는 너비로 변경할 수 있습니다.

결과 화면

1) PC 화면 모드

각 객체의 폭이 25%로 4개로 나뉘어져 있는 형태

2) 모바일 가로 화면 모드

각 객체의 폭이 50%로 2개씩 나뉘어져 있는 형태

3) 모바일 세로 화면 모드

각 객체의 폭이 100%로 나뉘어져 있는 형태
TOP