안드로이드 웹뷰( WebView) CSS 적용 안될 때 해결방법

 HTML로 만든 작업물을 모바일로 옮길 때 많은 문제가 발생한다. 그중 하나가 CSS 문제인데, 웹에서는 잘 적용되는 스타일이 모바일상에서는 적용이 안 되는 경우가 있다. 

 CSS가 전부 다 적용 안 되는 것이 아니라, 다른 부분은 적용이 되는데 특정 부분만 적용이 안 되는 경우도 있다. 이럴 때 내가 쓰는 방법은, 선택자를 태그나 클래스가 아닌 id로 하는 것이다. 

 왜 이런 건지는 모르겠지만 이 문제로 한참을 헤매다 이렇게 해보니 됐다. 똑같은 것을 가리켜도 클래스로 하면 적용이 안되던 CSS가, id로 바꿔주니 제대로 적용이 된다.

 

 

예시)

 

<button class="left">왼쪽버튼</button>

→ CSS : 이 경우 button{내용} / .left{내용} 둘 다 적용이 안됐다.

 

<button id="left">왼쪽버튼</button>

→ CSS : #left{내용} 이렇게 하니 적용이 됐다.