jQuery Mobile 아이콘을 마음대로 변경해보자!

시간이 조금이라도 날때 블로그에 글을 남겨볼까합니다. 사실 또 깜빡하면 넘어갈것 같아서 정리차원에서 글을 좀 적어볼까하는데요.

 

이전에 제이쿼리에 관련된 글을 좀 적었던것 같습니다. 심도있는 글은 아니었지만 조금이나마 도움이 되었다면 좋겠는데요.

 

2015/12/21 - [퍼블리싱] - 제이쿼리 모바일 시작하기 data-role 이란?

 

오늘은 제이쿼리 모바일을 시작하고 아이콘을 적용하면서 부터 문제가 생기기 시작하였습니다. 아이콘 크기가 고정이 되어서 바뀌지가 않는 문제가 생겼습니다.

 

 

 

왼쪽 상단의 메뉴 아이콘이 크기가 고정이 되어 있는데 로고가 바뀌면서 문제가 생기기 시작하였습니다.

 

여기서 해결할 수 있는 방법은 2가지로서 jQuery Mobile 아이콘 크기를 변경하거나, 아이콘을 커스텀으로 다시 만드는 방법이었는데요. 저는 후자를 택하였습니다.

 

 

 

 

 

 

왜냐하면 일단 제이쿼리 기본 디자인이 싫었습니다. 메뉴바 검정에 아이콘은 기본적으로 쓸수 이는 아이콘이 몇개 없습니다.

 

<a href="#" data-role="none" ><img src="이미지경로" alt="menu" style="margin-top:30px;margin-right:10px; width:30px; height:30px;"/></a>

 

CSS 스타일을 내부태그에 잡아주는건 아주 안좋은 습관인데요. 이렇게 해 놓으면 나중에 문제가 생겼을때 찾기가 아주 힘들어집니다.

 

우선 마진으로 위와 왼쪽의 간격을 띄웠습니다. 그리고 아이콘의 크기를 30으로 고정을 시켰어요. 그래서 크기가 바뀌고 위치가 변경이 되는것입니다. 메뉴의 헤드에 있는 부분이라 크기가 변경될일도 없기 때문에 문제는 없을것 같습니다.

 

제이쿼리 모바일에서는 data-role 이 header인 경우 a태그는 강제적으로 기본 속성을 가지게 됩니다. 버튼형식으로 만들어지게 되는데요. 그것이 싫으시면 위에 제가 적은 방식으로 활용하시는 것도 나쁘지 않은것 같습니다.

 

핵심은 data-role="none" 이라는 문구로서 data-role을 쓰지 않겠다라는 내용입니다.

 

jQuery Mobile 아이콘 바꾸는 법에 대해서 여기까지 마무리 하겠습니다. 수고하셨어요.