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

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

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

 

[본문 내용]

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

 

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

 

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

 

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

 

방법은 아주 간단하다.

 

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

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

 

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

그리고 위젯스타일의 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%로 배치됩니다.