모바일 작업 중 간혹 느끼실 수 있는 현상인 ‘안드로이드 링크영역’ 관련하여 정리 하였습니다.
아마 아래와 같은 리스트형태를 많이들 보셨을 겁니다.
대 부분 위와 같은 코드를 보면 아래와 같이 되어 있습니다.
자세히 보면 <a>태그안에 비어있는 <div>가 보이실 겁니다.
그럼 이제 한가지 의문점이 생길 수 있습니다.
더성 : “<div>“를 빼도 될 것같은데요?? 굳이 있을 필요가 있나??
네 빼도 상관없습니다.
하지만, 굳이 빈 “<div>를 감싸주는 이유는 따로 있습니다.
1. 증상&원인
모바일에서는 링크영역을 대부분 가로 100%(풀사이즈)로 잡는 것을 권장하고 있기 때문에
이 부분에서 iOS와 Android에서의 영역표시 방법의 차이가 납니다.
바로 Android(2.2.x~2.3.6)에서 나타나는 현상입니다.
Android(2.2.x~2.3.6)에서는 영역을 표시할 때 텍스트(내용이있는) 부분(touch1)에 터치를 해야 전체영역이 잡히는걸 보실 수 있습니다.
하지만 <div>로 한번 감싸주게되면, 텍스트 옆 영역부분에(touch2) 터치를 해도 링크영역이 잡히는 것을 보실 수 있습니다.
이와 같은 안드로이드 버그를 해결할 수 있는 몇가지 방법이 있습니다.
2. 해결방법
1. <a>태그 내부에 블록요소인 <div>를 두어 해결
주의할 점은 <div>가 아닌 다른 블럭요소일 경우에는 해결되지 않습니다.
그리고 이러한 마크업방식은 HTML5에서만 허용되기 때문에 HTML4.01이나 XHTML에서는 사용할 수 없습니다.
또한, 특정 안드로이드 버전의 버그이기 때문에 새버전이 나올 때 마다 지속적으로 테스트가 필요한 방법입니다.
참고 URL : <a> HTML5 명세 (ClearBoth)
2. 자바스크립트를 이용하여 해결
빈 여백이어도 터치된 요소에 반응이 오도록 하여 지정된 경로로 이동할 수 있습니다.
3. 별도의 아이콘이나 텍스트로 터치유도하는 방법.
빈공간을 그대로 방치하는 것 보단 “더보기” 혹은 “>”와 같은 아이콘으로 터치를 유도 후 영역이 감지 되도록 하는 방법이 있습니다.
상황마다 어울리는 디자인으로 수정이 필요할 수 있습니다.
아래 예제를 통해 테스트 해보시기 바랍니다.
-
1. <a>내부에 <div>를 감싸지 않은 형태
-
2. <a>내부에 <div>를 감싼 형태
-
3. 스크립트를 이용한 터치영역 설정
-
4. 별도의 아이콘이나
텍스트로 터치 유도더보기
3. 추가내용
block으로 구성된 링크에는 항상 텍스트나 이미지와 같은 실제 콘텐츠 요소가 포함되어야 합니다.
구조에 따라 “ ”와 같은 공백문자로 대체할 수도 있겠지만
이 방법은 의미없는 콘텐츠를 추가하는 것이다보니 권장하지 않습니다.
4. 마치며
모바일은 PC와 다르게 대응해야하는 범위가 넓습니다.
그 만큼 OS버전별로 틈틈히 확인하여 대응해야 할 것 같다 느꼈지만,
시대가 급속도로 발전하는 만큼, 새로운 기기들과 버전들이 튀어나오는 현재로써는 무리가 될 것같네요ㅠㅠ
그래도 큼직큼직한 이슈&버그 발견 시,
왜 일어나는건지, 원인을 정확히 알고 대응한다면 100%는 아니어도 100% 가까이 해결할 수 있지 않을까 싶습니다^^
이상 안드로이드 하위버전에 대한 “링크영역 오류” 해결 법이었습니다^^
감사합니다.