[티스토리 공부] 티스토리 모바일 이미지 잘려보이는 현상 수정하기 ♩

[티스토리 공부] 티스토리 모바일 이미지 잘려보이는 현상 수정하기 ♩

 

HTML 초초초 초보자가 티스토리 블로그 운영하면서 기억할겸&공유하기위해 기록하는 티스토리공부! 스스로 잊어버리지 않기 위한 기록이기도하다. 아무튼! 이번에 소개하는 것은 모바일 이미지 잘려보이는 현상 수정하기. 요즘 티스토리 블로그 스킨은 대부분이 '반응형' 이기 때문에 PC/모바일 상관없이 올리는 이미지나 텍스트가 포맷에 맞춰 반응하면서 어색함 없이 보인다. 하.지.만 가끔!!!! 오류로 인해 PC에서는 제대로 보이는 이미지가 모바일에서 잘려 보이는 현상이...

 

바로 이렇게....! 요거트볼 만들어먹은 사진을 PC로 올렸는데 모바일에서 이미지가 잘려보인다. 열심히 편집해서 올린 글인데.. 모바일에서 사람들이 더 많이 볼텐데!! 이미지가 잘려보이면 읽는 사람도 불편... 원래 제대로 보이려면 오른쪽 이미지처럼 보여야한다. 잘리지 않고! 

오류를 당장 해결하지 못할경우 수동(?)으로 반응형으로 만들어주는 방법을 소개하려고 한다.

 

 

먼저, 블로그 글 수정에서  HTML 모드로 변경한다. 

 

 

 

HTML에서 사진의 너비와 높이 찾아주기! 높이 > height, 너비 > width. data-origin-width="1654" data-origin-height="2206"|||_##] (이미지 코드의 일부고, 높이와 넓이 부분만 가져왔다) 지금 너비는 1654으로 되어있는데, 여기를 100%로 수정해준다. 이렇게 소스를 변경하는 이유는 화면이 잘리지 않고 꽉차게 보여준다는 의미!

 

 *수정후* data-origin-width="100%" data-origin-height="2206"|||_##]

 

완료 버튼을 누르면 모바일에서도 이미지가 잘리지않고 제대로 보이는 것을 확인할 수 있다. 다시 한번 말하지만! 대부분의 티스토리 스킨은 반응형이라, PC/모바일 모두 제대로 보이겠지만 간~혹 글마다 잘리는 오류가 생기는 일이 있어서 그때마다 놀라지말고 너비를 100%로 수정해주면된다는 것! 제대로 마스터 하려면 멀고도 험한 티스토리 블로그. 그래도 한땀한땀 이것저것 만져보는 재미가 있다. 가끔 제대로 안되면 열받게도 만드는 신기한 재주를 가진 블로그..! 이렇게 저렇게 만들다보면 언제든 마스터가 될 수 있겠지.. 다른 블로그에 비해 정말 깔끔한 UI 를 가지기도 했고, 내 마음대로 디자인하고 옵션도 만들 수 있으니 맨땅에 헤딩이기도하지만? 아무튼 나는 티스토리를 더 잘해보고 싶다구요 -! 티스토리 공부에 대한 기록도 차곡차곡 해봐야겠다.

 

#티스토리공부 #티스토리이미지 #티스토리모바일이미지