블로그 본문 큰 이미지가 잘린다면...

안녕하세요. 행복을 노래하는 초매입니다.

이번 포스팅에서는 티스토리를 사용하시는 분들을 위해 잠깐의 팁을 소개해드리려구요.

바로 블로그 본문 크기보다 이미지 크기가 큰 경우는 우측쪽에 잘리는 경우가 있는데요.

수동으로 하나씩 이미지 크기를 줄인다면 상관없겠지만, 그럼 엄청 많이 올렸던 기존 이미지는요?

 

▶ 블로그 너비를 조정하다

평소 블로그 너비가 너무 큰 것 같아서 조정하기로 마음 먹었고, 바로 실행에 옮겼죠. 

이것 저것 해 본 결과 일단 제 마음에 드는 710px 로 결정했습니다. ^^ㆀ

하지만, 기존 틀에서 작성되어졌던 글자와 이미지 크기가 말썽이었죠.

그래서 폰트 크기를 13px → 15px 로 수정해서, 어느 정도 정보 표시될 수준으로만 맞췄지만,

... ... ... 이미지는??

너비 750px 에 맞춰진 이미지는 기본 사이즈가 750px에 가까운 크기여서 끝이 많이 잘리네요.

▲ 좌측 이미지 및 테두리가 잘렸음을 볼 수 있습니다.

▶ 이미지를 하나씩 수정하다.

솔직히 무식하게 이미지 모든 것을 크기 조정하자!!!! 라는 생각으로 하나씩 하려하니...

본문에 꽉 차서 이뻤던 사진들이 크기를 줄이니, 마음에 들지가 않았습니다.

그래서 CSS 를 수정하기로 마음 먹고, 찬찬히 들어다 보기 시작했습니다. ( 어려워... OTL... )

▶ CSS 를 수정하다

CSS 를 수정하려면 이미지에 대한 최소한의 정보를 알아야 수정할 수 있는데, 

전 아무런 정보를 가지고 있지 않았죠. 그래서 소스 보기를 해서 그 부분을 찾기 시작했습니다.

이미지 아래 텍스트로 검색을 해서 찾았습니다... ^^v

위 이미지는 소스보기를 텍스트 편집기에 보기 좋게 다시 정렬한 모습입니다. 

여기서 볼 수 있는 것은 이미지는 img 태그를 통해서 표시되며, img 태그는 span 태그에 의해서

또 한번 감싸졌다는 사실을 알 수 있었죠. 

그래서 imageblock 을 HTML/CSS 편집의 CSS 내용 에서 찾았습니다.

▲ CSS 중 그림에 대한 부분

아마 어떤 스킨을 사용하느냐에 따라 위와 같은 class 명이나 내용들이 다르게 표시될 수 있으니,

개개인별로 판단해서 보시기 바랍니다. 위 이미지는 제가 최종적으로 수정한 이미지입니다.

.imageblock 은 본문 이미지에 대한 테두리 스타일을 설정하는 클래스이며,

.imageblock img 는 imageblock 클래스를 가진 HTML 자식 중에 img 태그에 대한 스타일을 지정하기

위해 추가한 내용입니다. ( 말이 좀 어렵죠?! 저도 실력이 썩~ 좋진 않답니다...^^ㆀ ) 

여기서 중요한 것은 max-width 입니다. 저장할 당시에 이미지 정보는 750 px 로 저장했으며, 

소스보기의 내용을 보더라도 img width="750" 으로 되어 있는 것을 확인하실 수 있습니다.

그래서 width 를 수정하면, 본문 이미지 너비가 똑같이 되기 때문에 max-width 를 사용하여,

최대한 늘어날 수 있는 한계치만 설정하는 것입니다. 

그렇게 되면 큰 이미지라도 너비가 700px로 고정되어 표시될 것입니다.

하지만!!!!!!! 여기서 더 큰 문제는 이미지의 height 값도 예전에 저장된 값으로 기억하고 있기 때문에

css 에 명시적으로 적어줘야 한다는 거죠. 그래서 height는 auto 로 설정해서, width 값에 따라 

정상적으로 변할 수 있게 해야 합니다.

▲ 이미지 및 테두리가 정상적인 모습으로 표시됩니다.

▶ 글자 폰트에 대한 생각

저는 너비를 710px, 폰트를 맑은 고딕, 15px 로 수정을 했습니다. 이렇게 수정을 하니, 기존 글들이

하나 둘씩 밀리기 시작했죠. 이제 시간 있을 때 조금씩 수정을 해야 겠지만, 새로 글을 작성할 땐

어디를 기준으로 글을 작성하는 것이 효율적일까?

그래서 고민을 해 본 결과 아래 이미지와 같이 작성하면 되겠다라는 결론을 냈죠.

▲ "가나" 버튼을 기준으로 줄을 나누면 되겠다고 생각했습니다.

▲ "가나" 버튼에 맞춰서 작성했을 때 본문 너비와 비슷하게 맞춰집니다.

▲ 모바일에서 본 블로그

지금까지 설명한 것은 제 블로그 기준으로 설명을 했지만, 응용해서 각자 로에 적용 시킬 수 있을 

것 같아서, 이렇게 키보드에 손을 올려 놓게 되었습니다.

방문객 : 왜 필요도 없는 정보를 올려서 낚시질 하는 거야?

초매 : 궁금해요? 궁금해요? 궁금하면 댓글 500개...  달면 말해주죠...^^

이상, 다음 VIEW 순위 1등이 되고 싶은 초매였습니다... 된다면... ^^ㆀ