Tistory CSS를 이용하여 img 사이즈 조절하기

 Tistory 블로그를 운영하면서 사진을 크게 적용하여 사용하였습니다.; 너무 사진을 크게 하다보니 읽기가 불편하신분들이 있다는 피드백을 받고 이미지를 한번에 줄이기 위한 방법을 찾게되었습니다. 바로 CSS를 통한 이미지 수정입니다.

본문에 해당되는 태그 확인

 우선 tistory에 작성하는 본론 글에 대한 HTML 태그를 살펴보았습니다. 이유는 간단합니다. 본문에 해당하는 이미지만 크기를 줄여야 하기 때문이죠. 크롬 개발자 도구를 사용하여 적용된 HTML을 확인하였습니다. 

 <span> 태그 다음 <img> 태그가 적용되어 있습니다.

이번에는 제 블로그 오른쪽에 적용된 사이드바의 이미지입니다. 모든 부분은 아니고 일부분을 살펴봤습니다.

 <div>태그 안에 <img>태그가 적용되어 있거나, <div> 태그 안에 <a> <img> 태그의 순서로 적용 된 경우도 있습니다.

img 최대값을 이용한 사이즈 조정

 img 태그에 css를 적용하려고 합니다. 적용 태그는 아래와 같습니다. 최대 넓이를 지정해주게 되면 본론에 적용되는 img가 모두 변경되게 됩니다. 가운데 정렬을 기본으로 하고, margin도 간단히 적용하였습니다.

span img의 순서대로 적용이 이루어집니다. 그래서 span 태그 안에 있는 img에만 아래 사이즈 적용태그가 적용됩니다.

 - resize에 관한 자세한 글은 아래 링크를 참고해주세요.

   http://www.css3.info/preview/resize/

span img {
   resize: both; /* 이미지 최대 사이즈에 적용 */
   float: center; /* 가운데 정렬 */
   max-width: 500px; /* 넓이를 지정 */
   height: auto; /* 높이를 지정 */
   margin: 5px 0; /* 여백을 적용 4가지 조건이 가능 위쪽, 오른쪽, 아래쪽, 왼쪽 순서 */
}

결과

 본문에만 적용되었고, 추후에 <span><img>의 순서가 아니더라도 해당 태그의 머릿 부분만 변경하면 쉽게 적용이 가능합니다.

마무리

 적용하실려는 부분이 항상 <span><img>의 순서가 아닐 수도 있기에 찾아보시고 적용하셔야 합니다. 이렇게 적용함으로써 각 이미지를 수정할 필요 없이, css코드로 전체 이미지를 수정할 수 있게 되었습니다.