모바일 웹 에서 A 태그의 터치되는 영역의 배경색을 전체로 잡아주는 방법

나같은 경우 모바일웹을 따로 공부한 적이 없기 때문에, 항상 여러테스트를 거쳐서 모바일 웹을 제작하곤한다. 많은 사람들이 모바일웹은 따로 구현된 HTML 코드나 JQUERY,CSS 등을 필수적으로 이용하여 제작하는걸로 아는데, 그런건 절대 아니다. 단지 구현된 하나의 프레임워크라 해야하나? 그이상도 아니고 그이하도 아니다. 나같은 경우는 오히려 불편해서 사용을 잘 안하는 편이다. 

모든건 직접 테스트 해가면서 하는게 젤 좋은 방법이다. 이런 방법은 내가 늘 공부해온 방식이니, 참고만 하길 바란다. 

일단 A 태그의 기본적인 사용 예제를 살펴보자. 

 일반적인 a요소 사용 예제

---

<a href="http://b.redinfo.co.kr" title="Dreamload 블로그 이동" target="_blank" style="padding:5px;"> 아롱다옹</a>

모바일에서 위의 태그를 클릭하면 어떻게 될까? 뭐 padding 을 주었으니, 영역은 5px 만큼 넓어졌을 것이다. 하지만, 모바일은 터치를 할 시 display 값이 inline 에 속하는 요소는 터치되는 영역이 padding 으로 준 5px 이 아닌 글자의 크기 영역으로 잡혀버린다. 이말이 무슨말인가 하면 아래의 그림과 같다.

(모바일 웹에서 a 태그를 터치했을 시 영역)

위와 같이 아무리 padding 값 또는 height, width 값을 크게 잡아주어도 모바일웹에선 터치되는 영역이 글자의 크기로 잡혀버린다. 이걸 해결하기위해선 아래와 같이 display 값으로 inline-block 을 추가해 주면된다.

 모바일 터치 영역에 맞게 수정한 a요소 예제

---

<a href="http://b.redinfo.co.kr" title="Dreamload 블로그 이동" target="_blank" style="padding:5px; display:inline-block">아롱다옹</a>

(위의 예제를 적용한 후)