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

몽9에디터


본문 영역

반응형 설정

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

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

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

반응형 처리 화면

반응형 화면에 맞게 객체설정, 레이아웃 변경이 가능합니다.
[[m9editor title=반응형_모드_화면 url=./m9_data/m9editor_shortcode/intro_1.html]]

반응형 컬럼 정렬

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

설정 방법

모드창에서 PC모드가 아닌 모바일 가로 버전 또는 모바일 세로 버전으로 변경한 후 객체를 선택하면 오른쪽에 컬럼 정렬 창이 활성화됩니다.
이때 객체를 모바일에 맞는 너비로 변경할 수 있습니다.
[[m9editor title=반응형_컬럼_정렬 url=./m9_data/m9editor_shortcode/intro_3.html example_url=./m9_data/m9editor_shortcode/insert_1_example.html]]

결과 화면

1) PC 화면 모드

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

2) 모바일 가로 화면 모드

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

3) 모바일 세로 화면 모드

각 객체의 폭이 100%로 나뉘어져 있는 형태
본문 공유 설정
TOP