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; }
}
______________________________ 댓글
(여기서 잠깐 TMI)
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)에 포함시켜라.
요런 의미이죠.
좀더 정교하게 만들려면 외부여백같은 요소들도 계산해서 넣어주는게 좋기는 하죠.
(여기서 잠깐 TMI)
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)에 포함시켜라.
요런 의미이죠.
좀더 정교하게 만들려면 외부여백같은 요소들도 계산해서 넣어주는게 좋기는 하죠.