에디터에서 작성한 컨텐츠를 반응형보기 형태로 제공하기 위해 아래와 같이 두가지 방법으로 설정이 가능합니다.
getPublishingHtml() API 사용시 publishingResponsiveStyle 옵션을 true로 설정하면 HTML 본문에 반응형보기 처리를 위한 <style>이 포함되어 반환됩니다. 이 경우 별다른 외부 CSS 파일 수정 없이 반응형보기를 지원할 수 있습니다.
editor.getPublishingHtml({'publishingResponsiveStyle': true}); |
릴리즈 2.14.7 까지 | |
---|---|
| |
릴리즈 2.15.0 이상 | |
|
아래 <style>을 에디터에서 편집한 HTML 문서를 보는 페이지의 외부 CSS파일에 추가합니다. HTML 본문에 별도의 style tag가 포함되어 있지 않아 외부 CSS 수정만으로 반응형보기에 필요한 스타일을 추가하거나 변경 할 수 있습니다.
릴리즈 2.14.7 까지 | |
---|---|
| |
릴리즈 2.15.0 이상 | |
|
이미지에 반응형보기를 설정하려면 아래와 같이 이미지속성창에서 "반응형"을 체크합니다. "반응형"을 체크하면 "글자처럼 취급"은 자동으로 비활성화 됩니다.
반응형이 설정된 이미지는 max-width: 100% 스타일이 부여되어 화면 사이즈에 맞춰 리사이즈됩니다.
표에 반응형보기를 설정하려면 아래와 같이 "표 속성 > 상세속성" 창에서 "반응형"을 체크합니다. "반응형"을 체크하면 "글자처럼 취급"은 자동으로 비활성화 됩니다.
반응형이 설정된 표는 "se-scrollbox" class가 부여되며 모바일 환경에서 좌/우 스크롤이 가능합니다.