위젯페이지 작업시 위젯을 가로로 50%씩해서 가로 정렬시
웹에서는 디자인이 보기가 좋으나 모바일에서는 너무 작게 가로로 나타납니다.
모든 위젯을 반응형으로 작동하게끔 한번 만들어 보고자 위젯스타일로 연구를 했지만
실력이 없는건지 구현 자체가 불가능한건지 하루만에 포기ㅠㅠ
생각의 전환을 해서 "내용 직접 추가"를 해서 에디터에 위젯코드을 추가하니 코드가 엉망이 되면서 작동 불능이다.
검색해보니 안 된단다...
다시 문서페이지로 페이지를 만들어서 에디터에 위젯코드 추가하니 작동은 되는데 수정할려고 에디터 들어가면 위젯코드가 엉망이 되어서 수정 불가...
마지막으로 외부페이지로 html 만들어서 적용시키니 잘 작동한다. ㅎㅎ
[외부페이지 html 코드]
<div class="w_board">
<div class="w_left">
<img class="zbxe_widget_output" widget="mh_multi" skin="mh_newdoc_chameleon" widget_cache="1m" box_top="N" title="컴퓨터 팁" list_count="3" titles="Y" display_summary="Y" content_cut_size="240" com_view="N" com_cut_size="70" thumd_nails="Y" thumbnail_type="crop" thumbnail_width="100px" thumbnail_height="100px" order_target="list_order" order_type="desc" display_author="Y" display_regdate="Y" display_comment_count="Y" display_readed_count="Y" display_voted_count="Y" display_duration_new="Y" select_read="N" view_menuname="off" menuname="browser_title" view_category="on" background_color="#ffffff" board_line="hidden" board_line_width="0px" board_line_color="#fff" title_font_color="#042a6d" top_background_color="#fff" titles_font_color="#555" summary_font_color="#7f7c7c" board_bottom="Y" round_top="Y" display_link="Y" linkt="comtip" link="https://moonhouse.co.kr/comtip" page_type="N" module_srls="174"
widgetstyle="mhstyle" ws_colorset="ws_text" ws_rcolor="#f9f9f9" ws_r1color="#e9e9e9" ws_tcolor="#b2b2b2" ws_linecolor="#e9e9e9" ws_fas="fas fa-key" ws_fascolor="#ff6600" ws_title="컴퓨터 팁" ws_title_size="12px" ws_more_url="https://moonhouse.co.kr/comtip" ws_more_text="ComTip of Moonhouse" />
</div></div>
<div class="w_board">
<div class="w_right">
<img class="zbxe_widget_output" widget="mh_multi" skin="mh_newdoc_chameleon" widget_cache="1m" box_top="N" title="유틸리티" list_count="3" titles="Y" display_summary="Y" content_cut_size="240" com_view="N" thumd_nails="Y" thumbnail_type="crop" order_target="list_order" order_type="desc" display_author="Y" display_regdate="Y" display_comment_count="Y" display_readed_count="Y" display_voted_count="Y" display_duration_new="Y" select_read="N" view_menuname="off" menuname="browser_title" view_category="on" board_line="hidden" board_line_width="0px" board_line_color="#fff" title_font_color="#042a6d" top_background_color="#fff" titles_font_color="#555555" summary_font_color="#7f7c7c" board_bottom="N" round_top="Y" display_link="Y" linkt="utils" link="https://moonhouse.co.kr/utils" page_type="N" module_srls="170"
widgetstyle="mhstyle" ws_colorset="ws_text" ws_rcolor="#f9f9f9" ws_r1color="#e9e9e9" ws_tcolor="#b2b2b2" ws_linecolor="#e9e9e9" ws_fas="fab fa-simplybuilt" ws_fascolor="#ff6600" ws_title="유틸리티" ws_title_size="12px" ws_more_url="https://moonhouse.co.kr/utils" ws_more_text="Utils of Moonhouse" />
</div></div>
<div class="w_board">
<div class="w_bottom">
<img class="zbxe_widget_output" widget="mh_sliding_banners" skin="banner" widget_sequence="433147" widget_cache="1m" module_srls="91640" display_location="center" banner_mov="false" thumbnail_type="crop" shuffling="true" mouseoverstop="true" thumbnail_width="115" thumbnail_height="110" rows_list_count="1" shown_image_num="6" flowing_images_num="16" bottom_height="5" controls="auto" sliding_effect="easeOutQuad" img_margin="3" mouse_wheel="true" title_visibility="true" title_color="#999999" title_length="14" title_size="12px" title_font="나눔고딕" box_top="N" box_top_title="" box_top_title_color="#160c9e" box_top_title_size="16px" box_top_title_font="나눔고딕" urllink="false" display_regdate="false" display_author="false" display_summary="Y" content_cut_size="200" sum_font_size="10px" summary_font_color="#000000"
widgetstyle="mhstyle" ws_colorset="ws_text" ws_rcolor="#f9f9f9" ws_r1color="#e9e9e9" ws_tcolor="#b2b2b2" ws_linecolor="#e9e9e9" ws_fas="fab fa-yelp fa-spin" ws_fascolor="#ff6600" ws_title="즐겨찾는 사이트" ws_title_size="12px" ws_more_url="https://moonhouse.co.kr/fa" ws_more_text="Favorites of Moonhouse" />
</div></div>
<style>
.w_board { margin:10px; }
.w_board .w_left { width:48%; float: left; padding:5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); border-radius:3px; overflow:hidden; }
.w_board .w_right { width:48%; float: right; padding:5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); border-radius:3px; overflow:hidden; }
.w_board .w_bottom { width:99%; margin:10px 0; padding:5px; float: left; box-shadow: 0 0 5px rgba(0,0,0,0.1); border-radius:3px; overflow:hidden; }
@media all and (max-width: 479px) {
.w_board .w_left { min-width:100%; background:#f6f6f6; box-sizing:border-box;}
.w_board .w_right { min-width:100%; background:#f6f6f6; margin-top:10px; box-sizing:border-box;}
.w_board .w_bottom { min-width:100%; background:#f6f6f6; box-sizing:border-box;}
}
</style>
- 위젯은 mh_multi, mh_sliding_banners를 사용했으며, 위젯스타일 mhstyle 까지 적용해서
위의 두개의 mh_multi위젯은 2줄 가로 배열 했으며
아래 한개의 mh_sliding_banners위젯은 1줄 배치했습니다.
https://moonhouse.co.kr/data
[웹 화면]
[모바일 화면]
[레이아웃에 코드 삽입으로 위젯 반응형적용]
외부페이지로 반응형위젯 화면을 만들고 나니 html만들어서 ftp로 올리고 적용하고 기차니즘이 생기네요.
그래서 레이아웃에 반응형위젯 코드를 넣어면 편하겠다 싶어서 레이아웃 수정 작업을 단행
1. info.xml에 추가
<var name="wp_top" type="textarea">
<title xml:lang="ko">메인페이지 상단 위젯삽입</title>
<description xml:lang="ko">메인페이지에 위젯을 추가합니다.(위젯코드를 붙여넣기 하세요.)</description>
</var>
<var name="wp_bottom" type="textarea">
<title xml:lang="ko">메인페이지 하단 위젯삽입</title>
<description xml:lang="ko">메인페이지에 위젯을 추가합니다.(위젯코드를 붙여넣기 하세요.)</description>
</var>
2. layout.html에 추가
<div class="widget_place" style="">
{$layout_info->wp_top}
</div>
{$content}
<div class="widget_place" style="">
{$layout_info->wp_bottom}
</div>
3. 편집기에서 코드 작성해서 레이아웃에 적용
레이아웃에 반응형위젯 적용의 경우 가로 2열 방식만 코드 복사해 넣고
가로1열 방식은 레이아웃 "페이지 수정"에서 해 주면 됩니다.
https://moonhouse.co.kr/zbxe
간단하지는 않지만 위젯을 직접 반응형으로 만들지 않는 이상 위의 방법들도 괜찮은 선택인 것 같습니다.