반응형 보기

에디터에서 작성된 내용에 대해 반응형 렌더링을 구성합니다. 두 가지 설정 방법이 제공됩니다.

1. 에디터 구성

1.1 `getPublishingHtml()` 옵션 사용

getPublishingHtml()을 호출할 때 publishingResponsiveStyle: true를 전달합니다. 반환된 HTML은 반응형 <style>을 인라인으로 포함하므로, 외부 CSS 변경이 필요하지 않습니다.

editor.getPublishingHtml({ publishingResponsiveStyle: true });

예시 출력 (2.15.0 버전부터 지원):

<div class="se-contents" style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;">
  <style type="text/css" data-seresponsive="true">
    .se-contents .se-scrollbox { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .se-contents .se-scrollbox::-webkit-scrollbar { display: none; }
    .se-contents .se-responsive.se-image .se-caption { max-width: 100% !important; }
    .se-contents .se-responsive.se-image,
    .se-contents .se-responsive.se-video { max-width: 100%; height: auto !important; }
    .se-contents .se-responsive.se-image > img,
    .se-contents .se-responsive.se-video > * { max-width: 100%; min-width: 10px; height: auto !important; }
    .se-contents .se-responsive.se-video .se-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block; }
    .se-contents .se-responsive.se-video .se-video-wrapper > iframe { width: 100% !important; height: 100% !important; position: absolute; left: 0; }
  </style>
  <p>...</p>
</div>

릴리즈 2.14.7 및 이전 버전에서는 video 래퍼 클래스가 se-video-wrapper 대신 se-youtube-wrapper입니다.

1.2 페이지에 반응형 CSS 추가

또는 에디터의 HTML 출력물을 표시하는 페이지에 동일한 CSS를 추가합니다. 이 경우 style 태그가 HTML에 삽입되지 않으므로, 외부 스타일시트만 수정하여 반응형 동작을 변경할 수 있습니다.

.se-contents .se-scrollbox { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.se-contents .se-scrollbox::-webkit-scrollbar { display: none; }
.se-contents .se-responsive.se-image .se-caption { max-width: 100% !important; }
.se-contents .se-responsive.se-image,
.se-contents .se-responsive.se-video { max-width: 100%; height: auto !important; }
.se-contents .se-responsive.se-image > img,
.se-contents .se-responsive.se-video > * { max-width: 100%; min-width: 10px; height: auto !important; }
.se-contents .se-responsive.se-video .se-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; display: block; }
.se-contents .se-responsive.se-video .se-video-wrapper > iframe { width: 100% !important; height: 100% !important; position: absolute; left: 0; }

2. 편집 중 반응형 동작 적용

2.1 이미지

이미지 속성 다이얼로그에서 반응형을 체크합니다. 이 옵션을 선택하면 "텍스트로 취급"이 자동으로 비활성화됩니다. 반응형 이미지는 max-width: 100%가 적용되어 컨테이너 크기에 맞게 크기가 조정됩니다.

1.00

2.2 표

표 속성 > 고급에서 반응형을 체크합니다. 이 옵션을 선택하면 "텍스트로 취급"가 자동으로 비활성화됩니다. 반응형 표에는 se-scrollbox 클래스가 적용되어 모바일에서 가로로 스크롤됩니다.