질문/조언팁/리소스 공유

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; }
 
}

 

______________________________ 댓글

(여기서 잠깐 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)에 포함시켜라.

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

글쓴이 도토리묵

profile
https://github.com/sikim0726
  • profile

    (여기서 잠깐 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)에 포함시켜라.

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

  • profile profile
    조흔 답변입니다.
  • ?
    감사합니다..^.^
    제가 바라던 팁입니다.
  • profile

    해석부분이 있어서 코딩을 모르던 저같은 사람도 봤을 때 배워갈 수 있어서 넘 좋네요.
    새해부터 훈훈합니다~^^


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