본문 바로가기
웹관련/HTML-CSS

[CSS] 아이폰에서만 숫자부분이 파란색으로 보일때..

by 착한덕환 2017. 8. 22.



분명 CSS를 정상적으로 다 적용을 했는데... 아이폰만 적용한 글짜색이 적용이 안될때 간혹 있을겁니다.


예를 들어 검은색 배경에 글짜색을 흰색으로 바꿨는데... PC에서 볼때는 정상인데

아이폰에서만 보면 글짜색이 내가 적용한 CSS가 아닌 기본색인 파란색으로 보일때가 있습니다

특히 전화번호같은걸 적어놓으면 파란색으로 보이는 경우가 있죠....


이것은 아이폰특징으로.... 전화번호를 자동으로 링크로 인식을 하여 링크 기본색상인

파란색으로 인식을 하는부분입니다.


예를 들면 아래와 같습니다.


<style>

.Num { color:#fff; }

</style>


<span class='Num'>010-1111-1111</span>


이렇게 주면 PC에서는 정상적으로 글씨가 하얀색으로 바뀝니다...

하지만 아이폰에서 본다면 글짜색상이 파란색으로 보입니다....


이건 아이폰에서 010-1111-1111 이걸 전화번호로 인식을 하여 자동으로 a태그로 감싸서

발생하는 부분입니다.


이걸 해결하기위해선 CSS에다 a 태그에 대한 부분을 한줄 더 작성을 해야합니다.


<style>

.Num { color:#fff; }

.Num a { color:#fff; }

</style>


<span class='Num'>010-1111-1111</span>


위에 CSS처럼 a 태그에다가 색상을 한번 더 주면 아이폰에서 정상적으로 색상이 바뀌는걸

볼수 있습니다....



이 간단한걸... 알면 쉽게 해결하지만.... 모른다면... 계속 헤메게 되고 시간은 흘러만 갑니다...

참고하시면 좋을껏 같습니다.

댓글