로그인

  • 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

정보&강의 XE 위젯을 반응형으로 적용하자.

첨부 1

  1. image.png (File Size: 31.2KB/Download: 1)

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

}

 

이용시 참고할 점.

1. max-width 값과 min-width 값은 원하는 값으로 수정하면 된다.

2. 이 방법은 모든 위젯스타일에 적용할 수 있다.

 


#xe-widget  #screen  #min-width #위젯 #반응형 #모바일스킨 #반응형지원 #widget #스타일 #불만


이런 글도 찾아보세요!

추천인 1

공유

facebooktwitterpinterestbandkakao story
퍼머링크

댓글 0

권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고 하시겠습니까?

삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?