제가 예전에 "위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기" 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>
그리고 반응형만 지원하는 위젯스타일도 하나 만들어 봤어요.
이건 스타일은 아무 것도 출력되지 않고 단지 반응형만 지원합니다.
xe-widget와 xe-widget_r을 잘 이용하면 2개 이상의 위젯을 반응형으로 배치할 수 있습니다.
아래의 이미지는 좌측2개는 ws_width를 25%로 ws_width_r을 50%로 설정한 것입니다.
물론 모바일에서는 100%로 배치됩니다.