모바일 상단 이미지 크기

사이트 이동기의 요점은 유저한테 이동 기능을 제공하는데. 일단 신뢰도를 줘야 한다.

이 놈들이 이상한 사이트로 낚시하지 않는다는 이미지를 제공하고 오랬동안 사이트가 유지됨으로서 신뢰도를 쌓아가는것이다. 그런 관점에서 다음 블로그 기본 제공 웹 디자인의 모바일 웹 디자인을 볼 때.

여기서 상단 이미지가 매우 커서 로딩시 자동으로 눈에 들어오는 본문 내용을 가리는 것은 매우 부적절하다.

 

그렇다고 아예 이미지가 없는것은 더욱 사용자의 신뢰를 하락시킬 것이다. 따라서 여기서는 구글 개발자 모드에서 해당 이미지를 역추적해 이 부분이 article-header라는것을 확인하고 정보를 흭득했다.

 

여기서 크기가 px vw라고 나와 있는데 픽셀은 상식으로 아는 그 픽셀이겠고 vw의 개념을 처음 접하게 되었다.

https://www.w3schools.com/cssref/css_units.asp

 

아 그렇군 반응형이라는것은 이런 것이구나. html이 5 이상으로 버전업 되면서 유저의 뷰 크기인 브라우져 크기에 대응하여 폰트나 이미지의 크기를 자동 조정할 수 있다는 말이다. 구글 디벨롭퍼 콘솔은 구글답게 그 자리에서 수치를 마우스로 조절해서 변경하면서 실시간으로 html의 변화점을 확인할 수 있었다. 이로 기존 설정값 400 -> 200px로 변경을 결정했다.

 

이러니 이미지는 위로 올라가는데 본문 글의 시작 지점은 그대로인 문제가 생겼다.

 

200 -> 250px로 재변경

 

main의 패딩을 470px -> 270으로 변경