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

 

 

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

 

 

 

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
화제의 글 자료공유 시간표 위젯 1.1.2배포합니다. 15 file 착한악마 2017.01.10
화제의 글 자료공유 TinyMCE Plugin - imgur uploder 1 file prologos 2017.01.20
4267 질문/답변 추천하는 files 폴더의 퍼미션은? 1 new 스퀘어팜 00:50
4266 질문/답변 제작 의뢰 전에 실현 가능한지 한번 여쭤 보고 싶습니다. 2 newfile 현님v 2017.01.22
4265 질문/답변 클플에 인캡 씌우기 2 new 진지니 2017.01.22
4264 질문/답변 xe 1.8 이후로.. 유투브 썸네일 추출하는 방법 알려주세요.. new Overachiever 2017.01.22
4263 질문/답변 기진곰님 이미지 자동첨부 애드온과 카르마님 이미지프로세스 모듈 동시에 사용하시는 분 계신가요? 6 update 기븐 2017.01.22
4262 질문/답변 통합검색 확장모듈 나오는 순서 바꾸기.. file 네모세상 2017.01.22
4261 질문/답변 CONORY님 SSL 지원 애드온 외부이미지 관련하여 질문드립니다 2 기븐 2017.01.22
4260 질문/답변 검색모듈이 안되는데.. 5 희스깅 2017.01.22
4259 질문/답변 글쓴이 게시물 출력애드온 3 file 희스깅 2017.01.22
4258 질문/답변 xetown 처럼 검색광고 1 희스깅 2017.01.22
4257 질문/답변 선택적 SSL을 적용할 시, 로그인 위젯은 어떻게 해야 하나요? 2 Novelic 2017.01.21
4256 질문/답변 필터 대신 룰셋을 사용해서 얻는 이점이 있나요? 2 투정 2017.01.21
4255 질문/답변 포인트 모듈 질문드립니다. 2 쥐의동생 2017.01.21
4254 질문/답변 xe.min.css unload 하는 방법이 없을까요? 2 구름이 2017.01.21
4253 질문/답변 XE에서 일부만 인덱싱을 하는 방법이 있을까요? 2 투정 2017.01.21
4252 질문/답변 첨부파일 내림차순 아니면 오름차순 file 구미호 2017.01.21
4251 질문/답변 로그인하라는 메세지가 뜨지않습니다.. file 희스깅 2017.01.21
4250 질문/답변 sql 파일을 utf8mb4에서 utf8로 변경하는 방법을 여쭤 봅니다 8 나만의너 2017.01.21
4249 질문/답변 스티커모듈 권한설정.. 5 희스깅 2017.01.21
4248 질문/답변 Apple SD 고딕체? 4 Katze 2017.01.21
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 214 Next
/ 214
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...