You cannot see this page without javascript.

메뉴 건너뛰기

MH

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

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

조회 수 248 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
원작자 80san
적용여부 적용
적용페이지 http://moonhouse.co.kr/xe/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="http://moonhouse.co.kr/xe/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="http://moonhouse.co.kr/xe/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="http://moonhouse.co.kr/xe/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="http://moonhouse.co.kr/xe/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="http://moonhouse.co.kr/xe/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줄 배치했습니다.

 

http://moonhouse.co.kr/xe/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열 방식은 레이아웃 "페이지 수정"에서 해 주면 됩니다.

http://moonhouse.co.kr/xe/zbxe

 

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

Who's 팔공산

profile

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

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

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용여부
247 XE타운 XE 위젯을 반응형으로 적용하자 제가 예전에 &quot;위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기&quot; Tip을 올린적이 있는데요 이것을 아주 쉽게 적용한 것이 올라왔네요. [본문 내용] XE를... file 도토리묵 2018.12.31 17 변형
246 XE타운 댓글이 2줄 이상일 경우 접고 펴는 기능추가하기 게시글에 댓글이 여러줄로 달릴 경우 댓글란들이 길게 나열되는 것이 싫어실 경우 적용하시면 됩니다. sketchbook5 게시판을 예로 해서 설명합니다. 1. 게시판설... file 이온디 2018.11.27 46 변형
245 문하우스 Sketchbook5 게시판 글작성시 상단에 빵조각메뉴 부분 삭제하기 Sketchbook5 게시판을 사용하여 글 작성시 상단에 빵조각 메뉴 부분이 설정과 상관없이 출력됩니다. 이 부분이 마음에 들지 않는 경우 무조건 출력되지 않게 수정... file 80san 2018.11.02 76 적용
244 문하우스 Xedition 레이아웃 스킨에서 검색버턴 바꾸기 Xedition 레이아웃을 사용해 오면서 별 불만이 없는데 상단에 위치한 검색창이 마음에 들지를 않아서 바꾸어 봤습니다. 생각보다 어렵더군요 ^.^! 1. xedition/la... file 80san 2018.10.31 47 적용
243 문하우스 xedition레이아웃과 sketchbook5 게시판을 같이 사용시 미미한 문제점수정 xedition레이아웃과 sketchbook5 게시판을 함께 사용하면 게시판에서 아이콘Hover시 아래에 작은 검은 삼각형이 보입니다. 별 문제는 없지만 미간상 보기가 좋지 ... file 80san 2018.10.27 62 적용
242 문하우스 구글 드라이브 자료링크를 XE게시판에 적용하는 방법 [구글 드라이브에 올린 파일 직접 다운로드 링크 넣는 방법] [외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법] 위 두가지 내용을 복합해서 sketc... file 80san 2018.09.25 113 적용
241 XE타운 게시판 사용자정의 일자(연월일)에 시간 추가하는 방법 안녕하세요! XE타운 여러분~!? 게시판 설정 -&gt; 사용자 정의에서 형식을 일자(연월일)로 선택하고 글을 쓰면 위에 스샷처럼 날짜만 선택이 가능합니다. 저는 위 스... file sunup 2018.09.03 81 NO
240 XE타운 PC, 모바일, Tab 접속장치 구분 코드 XE에는 기본으로 불러오는 클래스 들이 많습니다. 그 중에 모바일 클래스를 조금 써봅니다. 파일 위치는 ./classes/mobile/Mobile.class.php 입니다. 이 파일에는... file misol 2018.08.03 69 적용
239 XE타운 마지막 문장 이후 오는 <p> </p> 를 모두 제거해서 보여주는 방법 과도한 엔터가 문서 하단에 들어간걸 그냥 보통 지우지 않으시는 경우가 있는데요. 스킨에서 본문을 불러오면서 내용의 끝부분에 위치한 반복되는 &lt;p&gt;&amp;nbsp;&lt;/p&gt; ... prologos 2018.07.28 50 적용
238 문하우스 구글 웹사이트 번역기 웹페이지에 간단하게 달기 XE 나 라이믹스에도 &quot;다국어&quot;기능이 있기는 하지만 번역이나 기타 여러 가지 번거로운 점이 많습니다. 자신이 확실하게 외국어 언어를 알고 있고 귀찮니즘을 극복... file 80san 2018.07.27 60 NO
237 문하우스 이미지 Hover시 Zoom기능 출력 썸네일이미지를 사용하거나, 일반 이미지의 경우 큰이미지 작은이미지를 이용하여 이미지에 마우스 Hover시 이미지부분이 확대 Zoom 형태로 출력되게 하는 Tip입... file 80san 2018.07.25 63 적용
236 기타 XE 위젯에 임시 저장글이 뜰때 해결방법 1) 최신글 위젯의 경우 widgets/newest_document/queries 에 위치한 getNewestDocuments.xml을 열어서 &lt;condition operation=&quot;equal&quot; column=&quot;modules.site_srl&quot; ... file 잡다한 생각 2018.07.13 23 적용
235 문하우스 외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법 유틸리티 메뉴의 작성글들중 프로그램용량이 큰 자료의 경우 외부에서 파일을 가져와서 링크를 걸어 두었는데 이런 경우는 게시판의 파일권한과 상관 없이 다운로... file plruto 2018.02.17 193 적용
234 문하우스 Ckeditor에 스킨 설치하는 방법 아래글에 이어서 Ckeditor에 스킨 설치하는 방법을 설명드립니다. https://ckeditor.com/cke4/addons/skins/all 에 가면 몇가지의 스킨들이 존재합니다. 그 중에 ... file 80san 2018.02.13 247 NO
233 문하우스 Ckeditor에 플러그인 설치하는 방법 XE를 라이믹스로 변환시키고 나니 에디터기로 Ckeditor를 기본으로 사용하게 되어 있네요. XE에서 사용하던 xpresseditor에디터기는 사용이 불가하네요. 그래서 C... 1 file 80san 2018.02.11 333 적용
232 문하우스 댓글유도문구에 에니메이션 효과 적용 css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. 스케치북5 게시판에 댓글달기 추천 문구... 80san 2018.01.31 144 적용
231 문하우스 "소셜XE 2015 모듈" 사용중 API 오류 나는 경우 &quot;소셜XE 2015 모듈&quot; 사용해서 SNS로그인을 적용해서 사용중인데 어느 순간 부터 네이버 와 카카오톡으로 로그인이 되지를 않더군요. 네이버는 API오류 라고 뜨고,... file 80san 2018.01.31 120 적용
» 문하우스 위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기 위젯페이지 작업시 위젯을 가로로 50%씩해서 가로 정렬시 웹에서는 디자인이 보기가 좋으나 모바일에서는 너무 작게 가로로 나타납니다. 모든 위젯을 반응형으로 ... file 80san 2018.01.29 248 적용
229 XE타운 10원짜리 깜빡이로 강조하기 팁 뭔가 꼭 알려 주고 싶은 내용을 특정 위치에 적어 놓지만 신경 쓰지 않고 읽지 않는 경우가 많을 겁니다. 깜빡이 효과를 줘서 조금 더 눈에 띌 수 있도록 해 봅니... file 웹지기 2018.01.29 69
228 문하우스 SoSiFam 한 줄 메모 게시판 라이믹스에서 사용 가능하게 편집 라이믹스를 업데이트 하고 나니 첫화면 우측 아래에 있는 &quot;가입인사&quot;에 글 등록이 되지를 않아서 SoSiFam 한 줄 메모 게시판을 수정했습니다. 내용글이 없어면 글... 2 file 80san 2018.01.27 97 적용
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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