메뉴 건너뛰기

MH

내 사랑치 않고 끝내는 것 보다 사랑해서 잃어 버리는 편이 좋다.

It is better to have loved and lost than to have never loved at all.

조회 수 276 추천 수 0 댓글 0
Extra Form
원작자 80san
적용여부 적용
적용페이지 https://moonhouse.co.kr/zbxe

위젯페이지 작업시 위젯을 가로로 50%씩해서 가로 정렬시

웹에서는 디자인이 보기가 좋으나 모바일에서는 너무 작게 가로로 나타납니다.

img_003.jpg

 

모든 위젯을 반응형으로 작동하게끔 한번 만들어 보고자 위젯스타일로 연구를 했지만 

실력이 없는건지 구현 자체가 불가능한건지 하루만에 포기ㅠㅠ

 

생각의 전환을 해서 "내용 직접 추가"를 해서 에디터에 위젯코드을 추가하니 코드가 엉망이 되면서 작동 불능이다.

검색해보니 안 된단다...

 

다시 문서페이지로 페이지를 만들어서 에디터에 위젯코드 추가하니 작동은 되는데 수정할려고 에디터 들어가면 위젯코드가 엉망이 되어서 수정 불가...

 

마지막으로 외부페이지로 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

img_001.jpg

[웹 화면]

 

img_002.jpg

[모바일 화면]

 

[레이아웃에 코드 삽입으로 위젯 반응형적용]

외부페이지로 반응형위젯 화면을 만들고 나니 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. 편집기에서 코드 작성해서 레이아웃에 적용

img_004.jpg

레이아웃에 반응형위젯 적용의 경우 가로 2열 방식만 코드 복사해 넣고

가로1열 방식은 레이아웃 "페이지 수정"에서 해 주면 됩니다.

https://moonhouse.co.kr/zbxe

 

간단하지는 않지만 위젯을 직접 반응형으로 만들지 않는 이상 위의 방법들도 괜찮은 선택인 것 같습니다. 

Who's 팔공산

profile

이 世上에서 現在가 가장 중요한 時間이며,
내가 만나고 있는 바로 그 사람이 第一 중요한 사람이며,
同時에 가장 중요한 것은 그 사람에게 善으로서 行하는 것이다.

Atachment
첨부 '4'
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
?

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용여부
232 문하우스 댓글유도문구에 에니메이션 효과 적용 80san 2018.01.31 164 적용
231 문하우스 "소셜XE 2015 모듈" 사용중 API 오류 나는 경우 file 80san 2018.01.31 140 적용
» 문하우스 위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기 file 80san 2018.01.29 276 적용
229 XE타운 10원짜리 깜빡이로 강조하기 팁 file 웹지기 2018.01.29 86
228 문하우스 SoSiFam 한 줄 메모 게시판 라이믹스에서 사용 가능하게 편집 2 file 80san 2018.01.27 132 적용
227 문하우스 라이믹스에서 내용글 없이 글 작성하기 file 80san 2018.01.27 106 적용
226 문하우스 문하우스의 라이믹스 업데이트 여정 5 file 2018.01.27 232
225 XE타운 간단한 게시물 주소 복사 버튼 달기 5 file 돼둥이 2018.01.22 254 적용
224 문하우스 게시판 설정 위자드 생성하는 방법 file 80san 2018.01.21 83
223 문하우스 squarenet.kr에서 제공하는 cPanel 무료 웹서브 세팅 따라하기 3 file 80san 2018.01.15 306
222 Xe 로그인 ID를 이메일에서 아이디로 변경하는 방법 file 불금 2018.01.13 94
221 문하우스 말풍선(툴팁) 애드온을 이용한 위젯설정 3 file 80san 2017.11.07 193 적용
220 XE타운 라이믹스 스케치북 게시판 및 스케치북 게시판 1.72 스크롤 이슈 file 도리 2017.10.07 160 적용
219 문하우스 본문에 삽입된 이미지들이 사라진 경우 file 80san 2017.09.25 139
218 XE타운 확장변수중 "단일 선택(radio)"시 "직접입력" 부분 나오게 수정 file 윤삼 2017.05.19 491
217 기타 대댓글에 'OOO님에게 달린 댓글' 구현하기 1 file Str@wBerry♪'· 2017.05.16 245 적용
216 XE타운 게시판 리스트 확장변수 항목에 css 입히기 13 file 윤삼 2017.04.22 374 적용
215 XE타운 제목에 태그 출력하고 링크 걸기 file socialskyo 2017.03.20 3038 NO
214 Xe "이 페이지 나가기" 경고창이 뜨는 사이트의 경우 투씨 2017.02.09 337
213 Xe xe업데이트 후 member모듈 업데이크가 되지 않을때 file 고니고니 2017.02.03 106
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...