메뉴 건너뛰기

MH

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

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

XE타운
2018.12.31 14:43

XE 위젯을 반응형으로 적용하자

조회 수 54 추천 수 0 댓글 0
Extra Form
원작자 도토리묵
출처 https://xetown.com/tips/1137813
적용여부 변형
적용페이지 https://moonhouse.co.kr/zbxe

제가 예전에 "위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기" Tip을 올린적이 있는데요

이것을 아주 쉽게 적용한 것이 올라왔네요.

 

[본문 내용]

XE를 사용하면서 가장 불만인게 메인페이지의 위젯이 반응형으로 작동되지 않는다는 점이다.

 

반응형에 대한 수요는 많다. 또 많은 부분에서 반응형에 대한 요구사항을 반영하여 업데이트를 하는데 유독 위젯에서의 반응형 지원은 되지 않는 것이 이해가 되지 않는다.

 

이 문제로 모바일 스킨을 별도로 구매하는 경우도 있는 듯한데 더 이상 골치 아프지 말도록 하자.

 

그럼 위젯을 반응형으로 적용하는 방법을 알아보자.

 

방법은 아주 간단하다.

 

먼저, 위젯 크기를 적용하는 화면에서 위젯 CSS Class 명을 적어준다.

예제에서는 xe-widget이라고 적었다.

image.png

 

다음으로 자신이 원하는 위젯스타일을 적용한다. 

그리고 위젯스타일의 CSS 파일을 아래와 같이 수정한다.

@media screen and (max-width:639px){
.xe-widget { width: 100% !important; box-sizing:border-box; }
}
  
@media screen and (min-width: 640px){
.xe-widget { width: 49% !important; box-sizing:border-box; }
}

 

css부분을 해석하면

@media screen and (max-width:639px){
가로크기가 최대 639px까지는(639보다 작거나 같으면)
.xe-widget
xe-widget라는 클래스명을 가진 요소의
width: 100% !important;
가로 크기를 100%로 만들고, 이게 우선순위를 가지며
box-sizing:border-box;
내부여백(패딩)과 선(보더)의 크기는 가로크기(width)에 포함시켜라.

@media screen and (min-width: 640px){
가로크기가 최소 640px까지는(640보다 크거나 같으면)
.xe-widget
xe-widget라는 클래스명을 가진 요소의
width: 49% !important;
가로 크기를 49%로 만들고, 이게 우선순위를 가지며
box-sizing:border-box;
내부여백(패딩)과 선(보더)의 크기는 가로크기(width)에 포함시켜라.

요런 의미이죠.
좀더 정교하게 만들려면 외부여백같은 요소들도 계산해서 넣어주는게 좋기는 하죠. 

 

[문하우스의 Tip]

저는 MH 위젯스타일에 적용해 보았습니다.

https://moonhouse.co.kr/index.php?mid=moonre&package_srl=469185

 

- skin.xml 에 옵션 추가

<var name="ws_width" type="text">
<name xml:lang="ko">반응형 가로폭</name>
<description xml:lang="ko">반응형 가로폭 (기본 49% 숫자만)</description>
</var>
<var name="ws_width_r" type="text">
<name xml:lang="ko">반응형 가로폭_오른쪽</name>
<description xml:lang="ko">반응형 가로폭 (기본 49% 숫자만)</description>
</var>

 

- widgetstyle.html 에 추가

<block cond="!$widgetstyle_extar_var->ws_width">{@ $widgetstyle_extar_var->ws_width = '49'}</block>
<block cond="!$widgetstyle_extar_var->ws_width_r">{@ $widgetstyle_extar_var->ws_width_r = '49'}</block>

<style>
@media screen and (max-width:639px){
.xe-widget,
.xe-widget_r
{ width:100% !important; box-sizing:border-box; padding-bottom:10px;}
}

@media screen and (min-width: 640px){
.xe-widget { width:{$widgetstyle_extar_var->ws_width}% !important; box-sizing:border-box; padding-right:5px; }
.xe-widget_r { width:{$widgetstyle_extar_var->ws_width_r}% !important; box-sizing:border-box; padding:0px; }
}
</style>

 

그리고 반응형만 지원하는 위젯스타일도 하나 만들어 봤어요.

이건 스타일은 아무 것도 출력되지 않고 단지 반응형만 지원합니다.

mh_mobile V1.0.zip

 

xe-widget와 xe-widget_r을 잘 이용하면 2개 이상의 위젯을 반응형으로 배치할 수 있습니다.

아래의 이미지는 좌측2개는 ws_width를 25%로 ws_width_r을 50%로 설정한 것입니다.

물론 모바일에서는 100%로 배치됩니다.

[Demo] https://moonhouse.co.kr/page_CiNC29

001.png

002.png

Who's 팔공산

profile

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

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

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용여부
251 문하우스 호스팅 이전 하면서 /xe 떼고 SSL설치한 경험기 입니다. file 80san 2019.03.16 10 적용
250 문하우스 게시글보기 링크문구 바로가기 아이콘 출력 file 80san 2019.02.23 148 적용
249 문하우스 게시판 글쓰기시 Tag부분 출력 유무 설정방법 file 80san 2019.02.17 26 적용
248 문하우스 "드래그하여 페이지/문서 이동 애드온" 적용팁 5 file 80san 2019.02.14 74 적용
» XE타운 XE 위젯을 반응형으로 적용하자 file 도토리묵 2018.12.31 54 변형
246 XE타운 댓글이 2줄 이상일 경우 접고 펴는 기능추가하기 file 이온디 2018.11.27 67 변형
245 문하우스 Sketchbook5 게시판 글작성시 상단에 빵조각메뉴 부분 삭제하기 file 80san 2018.11.02 89 적용
244 문하우스 Xedition 레이아웃 스킨에서 검색버턴 바꾸기 file 80san 2018.10.31 67 적용
243 문하우스 xedition레이아웃과 sketchbook5 게시판을 같이 사용시 미미한 문제점수정 file 80san 2018.10.27 73 적용
242 문하우스 구글 드라이브 자료링크를 XE게시판에 적용하는 방법 file 80san 2018.09.25 129 적용
241 XE타운 게시판 사용자정의 일자(연월일)에 시간 추가하는 방법 file sunup 2018.09.03 89 NO
240 XE타운 PC, 모바일, Tab 접속장치 구분 코드 file misol 2018.08.03 80 적용
239 XE타운 마지막 문장 이후 오는 <p> </p> 를 모두 제거해서 보여주는 방법 prologos 2018.07.28 54 적용
238 문하우스 구글 웹사이트 번역기 웹페이지에 간단하게 달기 file 80san 2018.07.27 67 NO
237 문하우스 이미지 Hover시 Zoom기능 출력 file 80san 2018.07.25 72 적용
236 기타 XE 위젯에 임시 저장글이 뜰때 해결방법 file 잡다한 생각 2018.07.13 26 적용
235 문하우스 외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법 file plruto 2018.02.17 202 적용
234 문하우스 Ckeditor에 스킨 설치하는 방법 file 80san 2018.02.13 269 NO
233 문하우스 Ckeditor에 플러그인 설치하는 방법 1 file 80san 2018.02.11 391 적용
232 문하우스 댓글유도문구에 에니메이션 효과 적용 80san 2018.01.31 158 적용
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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