클릭할 수 있는 요소가 서로 너무 가까움 문제 해결하는 방법 (태그)

▣ 클릭할 수 있는 요소가 서로 너무 가까움 문제 해결하는 방법 (태그)

 

며칠 전에 구글에서 메일이 왔습니다. 사이트에서 새로운 모바일 사용 편의성 문제가 발견되었습니다. 사이트에서 발견된 문제는 클릭할 수 있는 요소가 서로 너무 가깝다고 합니다.

 

잊고 있다가 오늘에 해결을 했습니다. 가끔 이렇게  클릭할 수 있는 요소가 서로 너무 가깝다고 메일이 온 적이 있습니다. 그러면 해당 글을 수정하고 유효성 검사를 했습니다.

 

그런데 태그에서 클릭할 수 있는 요소가 서로 너무 가깝다고는 처음 받아서  좀 의아했습니다. 태그는 자체 블로그에서만 검색하기 쉽게 하기 위해서 태그를 설정하는데요. 또 어디를 수정해야 하는지 어렵더군요. 그래서 좀 고민을 하다가 결국은 해결을 했습니다.

 

그럼 해결하는 방법을 공유하도록 하겠습니다. 혹시 저처럼 이런 구글 메일 받은 분들께 도움되길 바라면서 글을 이어가겠습니다.

 

 

 

구글 서치콘솔에서 모바일 사용 편의성 문제가 발견되었습니다. 이런 문자를  받았습니다.

 

 

실제 페이지 테스트를 합니다. 

 

 

클릭할 수 있는 요소가 서로 너무 가깝다고 합니다.

 

 

그래서 수정을 하고 유효성 검사를 합니다.

 

 

페이지가 모바일 친화적이라고 합니다. 이 페이지는 휴대기기에서 사용하기 쉽습니다. 이렇게 문제 해결을 했습니다. 그럼 해결방법을 구체적으로 적어 보겠습니다.

 

 

티스토리 블로그 관리로 들어갑니다. 블로그 관리로 들어가서 스킨 편집으로 들어가세요. html 편집을 합니다. css에서 수정을 해야 하는데요.

 

ctrl + f을 눌러서 찾기를 합니다. tag의 line - height를 찾습니다. 위의 사진에서 처럼 2.5로 수정을 해주세요. 어떤 분은 2로 하라는 분도 계시더군요. 

 

저는 2로 수정을 하니 안되더군요. 2.5로 수정을 하니까 문제 해결이 되었습니다. 그리고 적용을 눌러 주시면 됩니다. 해결하고  보니 어렵지는 않습니다. 

 

블로그 관리 → 스킨 편집 → html → css → ctrl + f → line - height → 2.5로 수정합니다.

 

이렇게 수정을 하니까 '페이지가 모바일 친화적이다'라고 합니다. 그리고 구글 서치 콘솔에서 사이트의 모바일 사용 편의성 문제가 해결되었는지 확인 중입니다. 이렇게 이메일이 옵니다. 확인하는 거는 며칠 걸리기도 합니다. 이상 마치도록 하겠습니다.