정보&강의
2017.12.14 13:22

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

조회 수 511 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form

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 #스타일 #불만

짧은주소 : https://goo.gl/BVvhn3

List of Articles
번호 분류 제목 날짜 조회 수 글쓴이
공지 공지 구글 무제한 드라이브 이용자 공지사항 5 2017.10.30 1352 운영자
공지 공지 구글 드라이브 무제한 클라우드 G-Suite 가입하실 분 모집합니다. 13 file 2017.10.30 2936 운영자
14121 정보&강의 교회 사역자 회의를 고민하다? 구글 화이트보드 - 잼보드 2 file 2017.12.02 107 운영자
» 정보&강의 XE 위젯을 반응형으로 적용하자. XE를 사용하면서 가장 불만인게 메인페이지의 위젯이 반응형으로 작동되지 않는다는 점이다. 반응형에 대한 수요는 많다. 또 많은 부분에서 반응형에 대한 요구사... file 2017.12.14 511 운영자
14119 공지 인공지능으로 태그를 자동으로 입력해줍니다. 2017.12.14 57 운영자
14118 질문글 베들레헴 원어 폰트가 이상해요 3 file 2017.12.12 139 김봉옥
14117 자유글 만나주석은 말이죠.. 9 2017.11.18 652 운영자
14116 가입인사 방금 가입했습니다. 4 2017.12.06 55 트로피카나
14115 자유글 카카오TV가 host 방식의 광고차단을 막아 버렸군요. ㅠㅠ 2 file 2017.12.05 908 운영자
14114 기타 한가지 문의드립니다. 5 2017.12.03 89 dongjunkim
14113 정보&강의 Dslr과 미러리스 카메라를 방송 카메라로 사용하자 - digicamcontrol file 2017.12.05 2300 운영자
14112 공지 기멀전 호스팅 서버 업그레이드 안내 2017.12.05 74 운영자
14111 자유글 예전처럼 프로필을 올려주시면 좋겠습니다. 2017.12.05 39 김세광
14110 가입인사 가입인사 드립니다. 2017.12.05 24 에드빈
14109 자유글 네이버 웹 표준을 준수하는 상위 2% 사이트 달성. file 2017.08.05 107 김형석
14108 정보&강의 pihole 유튜브 광고 차단 주소 모음 2 file 2017.12.03 351 운영자
14107 정보&강의 pihole 화이트 리스트 모음 2017.12.03 87 운영자
14106 가입인사 가입인사드립니다. 2017.12.03 22 dongjunkim
14105 가입인사 가입합니다 1 2017.12.02 19 Myoung-DukYoon
14104 가입인사 가입인사 5 file 2017.06.14 125 SangTaeKim
14103 유머/카툰 천생연분 3 file 2013.05.22 3027 토다라바™
14102 정보&강의 (완료) 성경 DB를 침례, 세례로 자동 변경하는 컨버터를 제작합니다. 15 2017.11.20 202 운영자
Board Pagination Prev 1 ... 8 9 10 11 12 13 14 15 16 17 ... 719 Next
/ 719
서버에 요청 중입니다. 잠시만 기다려 주십시오...