XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

모바일에 CK에디터를 적용해 놓은 경우 제일 아쉬운 부분이 바로 각 컴퍼넌트들의 팝업창에 출력되는 것들이 모바일에 최적화 되지 않아 요소들이 너무 작아 사용하기 불편하다는 점 입니다. 

 

오늘은 이를 모바일에서 조금이나마 보기 편하게 바꿔 보는 작업을 하려고 합니다.

 

우선 사용하기 더 좋은 이모티콘2를 소개해 드립니다.

 

스케치북스킨 제작자분이 만드신 이모티콘2 컴퍼넌트 입니다. 이것으로 교체해서 사용하시길 권장해 드려요. 

http://xe.sketchbook.kr/download/76140

 

 

모바일에서 이모티콘을 사용하려고 이모티콘 팝업을 띄우면 작은 화면에 모든 아이콘을 다 보여주는 방식으로 정말 작게 나와서 사용하기 좀 불편해서 사용하기 어렵죠...

 

이것을 개선해 보려고 생각한건 사실 지도에디터 컴퍼넌트의 모바일에서 보여주는 화면을 보고 모바일에 잘 보이게 처리했네? 라는 의문에서 였습니다.

 

https://www.xpressengine.com/index.php?mid=download&package_id=22753406

 

위 자료를 보고 차용한거니 설치를 안하실 분들도 다운 받아서 열어보세요.. 

 

컴퍼넌트들의 popup html,css 두가지 파일만 살짝 고쳐주면 모바일에서 보기 좋게 할 수 있어요.

 

 

지도에디터의 

/map_components/tpl/popup_maps.html 파일의 열어 상단에 view port 를 지정한 것을 확인하실 수 있을 겁니다. 

이걸 다른 컴퍼넌트들의 popup.html 에도 똑같이 넣어주면 됩니다.! 간단하죠!

 

{@Context::addHtmlHeader('<meta name="viewport" content="width=device-width, user-scalable=no" />');}

전 이렇게 넣었어요..

 

 

이모티콘 popup.html 파일의 상단에 저것을 넣고 모바일에서 이모티콘을 사용해보세요. 훨씬 보기 좋은 모습으로 보일겁니다.

 

그런데 아마 하단에 "모바일에서 최적화보기 ?" 뭐 이런 버튼이 보일겁니다. 이 버튼 필요없지요. 없는게 좋습니다.

.css 파일을 여셔서.... 거기에 아래를 추가해 주세요.

 

div.xe_mobile {
    display:none !important;
}

 

이제 거의 완벽하게 모바일에서 사용하기 편리할 정도는 되었습니다.

 

그런데 저는 2가지 정도가 더 개선이 필요해서 작업을 했습니다. 

1.아이콘 종류(폴더)가 어느정도 있다면 모바일에서는 가로폭이 좁아져 헤더쪽이 2줄로 됩니다. 그러면서 아이콘 일부가 헤더에 가려집니다. 

 

.css 파일에 아래를 추가해주세요.

@media screen and (max-width: 728px){
#ct {

    margin-top: 40px;
}
}

 

가로폭 어느사이즈부터 마진을 줘서 아이콘을 가리지 않을 것인지는 적당히 테스트해보시고 조정하셔도 됩니다.

 

 

2.팝업창의 세로길이 최소치를 지정해 주고 싶었어요.

.css 파일에... 아래를 추가했습니다.

 

#emoticons{min-height:550px; clear:both;}

 

 

 

 

그리고 마지막으로는 이미티콘의 경우는 이모티콘 입력후 팝업창이 자동으로 사라지는 구조가 아니므로(사라지면 불편하죠 이모티콘을 여러게 넣을 수도 있는데 닫아버리면...) 창닫기 버튼을 적당한 곳에 만들어 주시면 모바일에서 닫기가 편합니다. 물론 모바일 뒤로가기 누르면 닫혀서 사실 필요 없습니다만... 저처럼 굳이 넣으실 분들은...

 

<a href="#" onClick=self.close() class="btn" style="background: aliceblue;">창닫기</a>

이런식으로 적당한 곳에 창닫기 버튼을 달아보세요.

 

 

 

Screenshot_20161230-110326.png

 

 

나머지 컴퍼넌트 에디터들도 이런식으로 고쳐보세요~~~

 

 

 

글쓴이 웹지기

profile

Atachment
첨부 1
  • ?
    진영 2016.12.30 12:43:54
    질문글에 있던 내용을 바로 올려주셨네요~! 추천! ㅎㅎ
  • profile
    Chronos 2016.12.30 15:52:41
    탭([Onion])이 두줄이 되어버리면 보기가 좋지 않아서 못쓰고 있다는 ㅜㅠ ㅎㅎ
  • profile
    웹지기 2016.12.30 15:54:18
    무슨 말씀인지 잘 모르겠습니다.
  • profile
    Chronos 2016.12.30 16:31:25
    예전에 올렸던 질문 글이요 ㅎㅎ;

    https://www.xetown.com/qna/221322
  • profile
    웹지기 2016.12.30 16:34:52
    원하시는대로 모든 탭을 한줄로 좁은폭에 다 표현하려면 엄청 작아지겠죠? 그걸 원하시는건 아닐거 같습니다.
    그렇다면 적당한 크기로 보여주면서 두줄로 내려오는것은 용인 하셔야 합니다.

    다만 두줄로 내려오면서 아이콘이 가린다면 제가 팁에 올린 내용대로 처리해주셔서 두줄일때 간격을 벌려 주셔서 사용상 전혀 불편없이 만들어 주시면 됩니다.
  • profile
    웹지기 2016.12.30 15:55:27
    .css 파일에 아래를 추가해주세요.
    @media screen and (max-width: 728px){
    #ct {
    margin-top: 40px;
    }
    }

    위 내용을 적용해 주세요.

    두줄이 되는 가로폭을 확인후 가로폭을 적용해 주시고 margin-top: 40px; 이 값에 의해 해당 가로폭보다 좁아져 두줄이 되면 아래로 내려줍니다.
  • profile
    보고하비 2016.12.30 16:04:47

    잘되네요 감사합니다.


List of Articles
번호 분류 제목 글쓴이 날짜
4967 질문/답변 라이믹스 버그인가요? 4 라그릿 2017.03.22
4966 질문/답변 iwinv 라이믹스 설치가 안되요!? 7 file 로보 2017.03.22
4965 질문/답변 게시물 첫글로 바로 들어갈수 없을까요? 7 착한악마 2017.03.22
4964 질문/답변 혹시 XE최신버젼에서 데이타이전툴 정상작동하나요? 2 영흥도우럭 2017.03.22
4963 질문/답변 후하니 님이 만드신 스티커 모듈 버튼이 안눌려져요 이상한 점두 생겼구요 27 file 순결 2017.03.22
4962 질문/답변 청와통닭 레이아웃중 3 명예찬 2017.03.22
4961 질문/답변 위젯을 내용 직접 추가로 생성하면 안보여요 3 피피포 2017.03.21
4960 불편/개선 요청 XE 본문 에디터 소소한 불편한 점... 1 Blues 2017.03.21
4959 질문/답변 소셜로그인 문제 입니다 ㅠ file 낙타 2017.03.21
4958 질문/답변 모바일에서 글쓰기 하면 에디터 나오는데 이거 어떻게 없애나요 10 file 가이더 2017.03.21
4957 질문/답변 쉬운설치>>코어 업그레이드 시 "서버 접속이 원활하지 않습니다" 3 lis**** 2017.03.21
4956 질문/답변 원래 어드민 모듈도 스킨 설정할 수 있지 않았나요..? 5 하늘희 2017.03.21
4955 질문/답변 본문내 이미지 클릭시 확대 이미지 1 똑띠 2017.03.21
4954 질문/답변 게시글 작성자의 댓글에만 색상박스가 되게.. 6 라그릿 2017.03.21
4953 질문/답변 원래 관리자 페이지에서 대댓글은 여러개 삭제못하나요? 라그릿 2017.03.21
4952 질문/답변 모바일에서요 2 트리플라워 2017.03.21
4951 질문/답변 sitemaplite 모듈 사이트맵 언제 생성되나요? 15 웹지기 2017.03.21
4950 아이디어 제안/공유 대댓글 페이지네이션 1 file Jack 2017.03.21
4949 질문/답변 청와통닭 레이아웃과 위젯에서 에러가 발생합니다. 마시마로 2017.03.21
4948 질문/답변 레이아웃 라이센스 문구 질문이있어서 보다 든 생각인데 3 라그릿 2017.03.21
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 253 Next
/ 253
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...