본문 바로가기

손이 즐거운 이야기(作)

[팁TIP] 티스토리 블로그에서 사진 이미지가 너무 커서 잘릴 때 어떻게 하나요??



 티스토리에서 블로그를 포스팅하기 시작하면서 생겨난 문제 중 하나가 바로 사진과 같은 이미지 파일의 크기문제입니다. 

 사진을 그냥 올리다보니 프레임의 가로를 넘어가면 사진이 잘려져버려 정확한 사진을 보지 못하는 경우가 많아졌어요. 

 네이버 블로그 같은 곳에서는 사진을 올릴 때 일괄적으로 네이버 블로그용 사진으로 사이즈를 변환하는 기능이 있어서 

 클릭 한 번으로 간단히 바꿀 수 있는데, 티스토리에서 사진을 올릴 때에는 제가 아직 잘 몰라서 기능을 활용하지 못하기 때문인지

 사진을 올리는 게 많이 번거롭더라구요. 

 익숙해지면 좀 나아지려나...

 

 특히 티스토리 블로그의 스킨을 바꾸면 본문 프레임의 가로폭도 바뀌어버려서 기존에 올렸던 사진의 크기가 맞지않게 되는데,

 기존의 포스팅을 찾아들어가서 일일이 사진의 크기를 수정한다는 건 거의 불가능에 가까운 일이죠. 

 

 이 때, 간단히 문제를 해결할 수 있는 방법이 있습니다. 

 바로 style.css를 수정하는 방법입니다. 


 하나하나 차근히 시작해 볼까요?

 

 먼저 style.css를 수정하기 위해서는 편집화면으로 진입해야겠지요?

 티스토리 블로그의 관리자 ADMIN화면으로 들어갑니다. 

 좌측에 메뉴가 나타나는데 여기서 HTML/CSS 편집 메뉴로 들어갑니다. 




 HTML/CSS 편집 메뉴로 들어가면 아래와 같은 화면이 나옵니다. 

 코드를 수정할 수 있는 창이 두 개 나오는데요, 하나는 skin.html 창이구요. 

 다른 하나가 바로 오늘 수정할 style.css 창입니다. 





 

 이곳에 다음의 코드를 복사해서 넣어줍니다.


===============================================

   img {max-width: 100%; height: auto;}

  span.imageblock {max-width: 100%; height: auto;} 

===============================================


 이 코드는 이미지 파일의 가로 길이를 100%로 설정하고 가로세로 비율을 원래 이미지의 비율대로 유지하라는 코드입니다. 

 그리고 저장을 눌러주면 끝~! 

 쉽죠? 

 

 ^^


 잘 활용하셔서 좋은 포스팅 많이 작성해 보세요~ ^^



 FIN.