티스토리 블로그 반응형 이미지 설정하기

안녕하세요. 도정진입니다. 저는 항상 블로그 글을 작성할 때 원노트로 선 작성 후, 보내기 기능을 이용하여 글을 올립니다.

   

현재는 군 복무중이라 어쩔 수 없이 웹 원노트로 접속하여 작성하고 보냅니다.

   

http://www.onenote.com/

   

   

위 처럼 작성 후 PC 원노트와 연동하여 보내기를 통해 블로그로 보냅니다.

   

   

원노트를 사용하는 큰 이유는 PC 버전에서는 단축키를 통해서 필요 즉시에 스크린샷이 가능하고 그냥 문서 작성하듯이 스크린샷 사진을 복사 붙여넣기가 가능합니다.

   

무려 웹 원노트에서는 그냥 사진을 컨트롤 C / 컨트롤 V 로 업로드가 가능합니다. ㄷㄷ

   

만약 티스토리 기본 웹 에디터를 사용한다면 스크린샷을 따로 저장해 두고 파일 첨부를 통해서 본문에 배치시키는 등의 귀찮은 작업을 해야됩니다.

   

   

컴퓨터 활용방법이나 리눅스 서버에 관한 글을 많이 작성하다보니 스크린샷이 매우 많이 들어가는데 하나 하나 포토업로더를 통해서 업로드 하면 굉장히 귀찮을 것입니다. (예전에 네이버 카페 할 때에는 그림판으로 큰 사진을 만들어 두고 그 안에 모든 사진을 넣어 게시글을 사진 한장으로 게시하기도 하였습니다.)

   

그런데 원노트를 사용하면 한가지 큰 단점이 있습니다. 사진 사이즈를 얼마정도로 해야하는가 결정에 대한 문제입니다.

   

스크린샷을 크게 찍으면 사진을 원노트에 붙여넣고 블로그에 올리게 되면 사진이 짤리거나 혹은 아래에 스크롤바가 생깁니다.

   

   

어제 작성한 글인데 사진이 짤려버립니다.

   

현재 스킨을 반응형 웹 스킨을 사용하고 있는데 원노트로 작성한 글은 적용이 되지 않습니다. ㅠ

   

   

네이버로 글 복사를 할 경우에는 스크롤바가 생김.

   

   

   

그래서 작성을 할 때 사진 싸이즈를 임의로 줄여서 작성하고는 했었습니다만..

   

반응형으로 제작되어 있는데 모바일에서 보면 사진이 반쯤 짤려 보이는 것 때문에 티스토리 기본 모바일 스킨을 사용하고는 했었습니다.

   

그러나 이 문제는 티스토리 스킨 에디터를 통해 CSS 에 img 태그 설정을 조금만 추가해 주면 해결이 되는 문제였습니다.

   

블로그 관리자 페이지로 이동하여 HTML/CSS 편집으로 이동합니다.

   

   

그리고 CSS 탭을 누르고 아래의 내용을 추가합니다.

   

   

/* responsive image css */ img { max-width: 100%; height: auto; }

   

저장을 하고 나면 아래처럼 가로폭이 변해도 사진 싸이즈가 그 폭에 맞게 변합니다.

   

게시글 폭 가로 사이즈를 벋어나서 벽에 부딪히던 사진도 아래와 같이 가로폭에 맞게 조정되어 표시됩니다.

   

   

모바일 버전으로 볼 때도 맞게 표시됩니다.

   

   

네이버 카페에 본문 복사를 해서 올려도 그 폭에 맞게 표시됩니다.

   

   

물론 스킨에 따라서 해당 코드가 들어 있어서 자동으로 반응형으로 변하는 것도 있습니다.

   

항상 사진 싸이즈 때문에 고민이였는데 말끔하게 해결이 되었습니다.

   

   

이제 원노트로 작성할 때, 어디까지 사진 크기를 맞출까 고민을 하지 않아도 되었습니다.

   

저는 매일 작성할 때, 공유버튼 쪽에 사진크기를 맞추고는 하였습니다.

   

   

감사합니다. ㅎㅎ