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
번호 분류 제목 글쓴이 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 21 람보 2015.12.31
화제의 글 자료공유 광고제거 멤버십 애드온 v0.1 7 file ExtendKR 2017.02.13
4543 질문/답변 라이믹스 설치파일 질문입니다. 9 가이더 2017.02.21
4542 질문/답변 ck에디터에서 autoembed는 성공했는데, 이게 코드가 변경되어서 입력되어서 문제가 됩니다. 6 file 약사이다 2017.02.21
4541 질문/답변 혹시 회원탈퇴시 일정기간 있다가 탈퇴되거나 회원탈퇴 자체를 막는 모듈같은게 있을까요? 6 jylee7152 2017.02.21
4540 질문/답변 고르는것좀 도와주세요. 5 file SoyaMilk 2017.02.21
4539 질문/답변 라이믹스 세션관련 업데이트 이후로 로그인이 너무 자주 풀리는데.. 3 기븐 2017.02.20
4538 질문/답변 보안경고 긴급문의 1 준쓰 2017.02.20
4537 질문/답변 폼 문서에 마우스로 서명 그린 뒤 전송하는 방식 4 file 윤삼 2017.02.20
4536 질문/답변 ck에디터 autoembed 플러그인 추가하려는데, 도무지 안되네요 7 약사이다 2017.02.20
4535 질문/답변 포인트 소모용 게임 모듈은 판매하는 곳이 없을까요? 8 torrent 2017.02.20
4534 질문/답변 메뉴 새글 표시 모듈 문제 3 sar**** 2017.02.20
4533 질문/답변 ckeditor에서 이미지속성 6 sar**** 2017.02.20
4532 질문/답변 로그인 및 회원가입 창에서 오류 메세지가 나오질 않네요.... 1 JYRT 2017.02.20
4531 질문/답변 게시물 등록시 메세지 출력 및 특정 페이지로 이동 팁에 대한 도움요청 큰성565 2017.02.19
4530 질문/답변 게시판 관리 권한을 넘겼을때 스킨관리부분은 보이지 않도록 어떻게 하나요? file xetown998 2017.02.19
4529 질문/답변 ssl 적용 후 http-https리디렉션 문의 3 준쓰 2017.02.19
4528 질문/답변 게시판 공백 검색 3 이온디 2017.02.19
4527 질문/답변 도와주세요 ㅠㅠㅠ xe 홈페이지의 그림파일이 다 날아갔어요.. 5 file 인베인 2017.02.19
4526 질문/답변 파일 보안 6 데버 2017.02.19
4525 질문/답변 파비콘을 적용해봤는데요 3 xetown998 2017.02.19
4524 질문/답변 git merge 과정에서 오류가 발생했는데 어떻게 해결해야 하나요? 11 기븐 2017.02.19
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 230 Next
/ 230
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...