정보&강의
2017.12.14 13:22

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

조회 수 368 추천 수 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
번호 분류 제목 날짜 조회 수 글쓴이
공지 공지 구글 무제한 드라이브 이용자 공지사항 3 2017.10.30 923 운영자
공지 공지 구글 드라이브 무제한 클라우드 G-Suite 가입하실 분 모집합니다. 10 file 2017.10.30 2432 운영자
14134 정보&강의 Youtube 백그라운드 재생 어플 - 안드로이드용 7 file 2017.11.22 402 장성수
14133 자유글 어제 중국 기자 폭행현장에 있었습니다 (펌) 1 file 2017.12.15 98 장성수
14132 정보&강의 윈도우용 베들레헴 성경 4.1.0 세례 버전 4 2017.12.22 495 HarryKwag
14131 가입인사 가입인사 1 2017.12.18 25 aizi
14130 가입인사 가입인사드립니다. 1 2017.12.21 16 로닌
14129 포인트요청 카카오뱅크로 입금했습니다. 확인후 충전 부탁합니다. 1 2017.12.21 72 DavidPaul
14128 질문글 비번 변경 2 2017.12.18 70 김인선
14127 자유글 생큐로드 2017.12.18 33 장성수
14126 자유글 구글 인공지능 태그 방식 2017.12.18 30 운영자
14125 자유글 아 눈물이.. ㅠㅠ 6 file 2017.12.14 54 운영자
14124 정보&강의 교회 사역자 회의를 고민하다? 구글 화이트보드 - 잼보드 2 file 2017.12.02 77 운영자
» 정보&강의 XE 위젯을 반응형으로 적용하자. file 2017.12.14 368 운영자
14122 공지 인공지능으로 태그를 자동으로 입력해줍니다. 2017.12.14 47 운영자
14121 질문글 베들레헴 원어 폰트가 이상해요 3 file 2017.12.12 102 김봉옥
14120 자유글 만나주석은 말이죠.. 9 2017.11.18 396 운영자
14119 가입인사 방금 가입했습니다. 4 2017.12.06 54 트로피카나
14118 자유글 카카오TV가 host 방식의 광고차단을 막아 버렸군요. ㅠㅠ 2 file 2017.12.05 779 운영자
14117 기타 한가지 문의드립니다. 5 2017.12.03 76 dongjunkim
14116 정보&강의 Dslr과 미러리스 카메라를 방송 카메라로 사용하자 - digicamcontrol file 2017.12.05 1549 운영자
14115 공지 기멀전 호스팅 서버 업그레이드 안내 2017.12.05 51 운영자
Board Pagination Prev 1 ... 6 7 8 9 10 11 12 13 14 15 ... 717 Next
/ 717
서버에 요청 중입니다. 잠시만 기다려 주십시오...