주말은 즐겁게 보내셨나요? 전 주말을 비몽사몽간에 보낸 것 같아요.
얼마전부터 포스팅을 하려고 마음 먹었었는데 댓글로 관련 질문을 하신 분이 계셔서 겸사겸사 포스팅을 해봅니다.
제목을 보면 아시겠지만 본문 가로크기와 관련된 포스팅을 할거에요.
이미지 리사이징?
포스팅을 할 때 이미지가 들어가는 경우가 많죠.
저의 경우는 대부분의 포스트에 이미지가 들어갑니다.
제가 업로드하는 이미지의 종류는 블로그 팁을 위한 캡처 이미지와 직접 찍은 (풍경이나 음식, 인물)사진 등 크게 두가지의 종류로 나눌 수 있는데요.
사진의 경우 대부분 가로 1200px크기의 사진을 업로드 한답니다.(파노라마 제외)
이때 본문크기가 1200px보다 훨신 작기때문에 그냥 업로드하게 되면 아래와 같은 현상이 나타나게 됩니다.
그런데 위엔 사진이 작으면서 전체 풍경이 제대로 나오고 아래는 사진이 크긴한데 풍경이 잘려서 나오네요.
차이가 나는 이유는 업로드 하면서 첫번째 사진은 본문크기에 맞춰서 가로크기를 670px로 줄였구요.
두번째 사진은 1200px 그대로 업로드 했기 때문에 다르게 보이는 거랍니다.
리사이징이란 말 그대로 이미지의 사이즈를 다시 지정하는 것이죠.
주로 위와 같은 현상이 생길 수 있기 때문에 리사이징을 한답니다.
그렇다면 큰 사이즈의 이미지를 올릴 때마다 번거롭게 리사이징을 해야 하나요?
그에 대한 답은 No 입니다.
스킨의 본문 크기 확인부터!!
우선 자신의 스킨은 본문 크기가 어떻게 설정되어 있는지 알아야겠죠?
이에 대한 내용은 아래 포스트를 참고하시고 내 스킨은 본문크기가 어떻게 되는지 확인 하시길 바랄게요.
[IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포] - 티스토리 블로그 스킨 설명 - 1. 각 부분의 크기 조절
확인 한 바에 따르면 제 스킨의 본문 가로크기는 670px입니다.
그런데 왜??? 도대체 왜????
위에서 설명한 사진처럼 잘려서 나올 수가 있을까요?
본문가로크기에 따른 글쓰기화면 차이
위에서 설명한 본문크기(style.css)와는 별도로 관리모드에서의 본문가로크기 조절이 필요합니다.
확인을위해 관리모드(단축키: 알파벳 Q) -> 스킨 -> 화면출력 설정으로 이동하세요.
어라!!! 본문 가로크기 1000px ????? <-- 요건 설정..ㅋㅋ
저는 예전에 바꿨기 때문에 포스팅을 위해서 희생정신(??)을 발휘해서 크게 바꿨다는.......
요런 현상은 크게 이상할게 아니구요. 스킨을 바꿨었다거나 다른 이유로 이렇게 자신의 스킨크기와 맞지 않는 경우가 있으니 꼭 확인 해보시길 바랍니다.
그럼 이 상태에서 글쓰기 화면은 어떻게 보여질까요?
그림을 보면 아시겠지만 글쓰기 화면의 크기가 1000px로 보이고 이미지(원본 1200px)의 크기도 1000px로 자동 설정이 되죠.
그러면 이번에는 위의 관리모드의 수치를 변경해보겠습니다.
본문가로크기를 CSS의 크기와 동일하게 670px로 변경했습니다.
이번에는 글쓰기 화면의 크기도 줄었고 이미지(원본 1200px)의 크기도 670px로 설정됩니다.
확실한 비교를 위해 나란히 놓고 보실까요?
차이가 확실히 보이시죠?
위의 방법대로 변경하는 것은 별로 어렵지 않으실거에요!!
추가포스팅 - CSS와 관리모드 수치의 연관성
이 부분에 대해 궁금해 하시는 분을 위해서 부연설명을 해볼까해요.
CSS와 관리모드의 본문크기에 따라 본문글과 이미지가 어떻게 변하는지 설명드려볼게요.
▷전제조건◁
이미지 리사이즈 여부를 위해 이미지의 가로크기는 설정값보다 큰 1200px
1. CSS의 수치보다 관리모드의 수치가 더 클때(CSS: 670px < 관리모드: 1000px)
- 본문글은 엔터가 입력되지 않더라도 CSS의 수치(670px)를 벗어나지 않음
- 이미지는 관리모드 수치(1000px)만큼 리사이즈됨, CSS의 수치만큼만 보여지기 때문에 잘려서 나옴
2. CSS의 수치보다 관리모드의 수치가 작거나, 같을때(CSS: 670px >= 관리모드: 660px)
- 본문글은 관리모드 수치(660px)를 벗어나지 않음
- 이미지는 관리모드 수치만큼 리사이즈됨, 잘리는 영역없이 보여짐
▷정리◁
본문글은 어떤 경우라도 틀을 벗어나지 않고 전부 보여지게 됩니다.
하지만 이미지는 항상 관리모드의 수치만큼 리사이즈 되며 이때 CSS의 크기가 그보다 작다면 잘려서 보여지게 됩니다.
그래서 CSS와 관리모드의 수치관계는 항상
CSS >= 관리모드
를 만족해야 합니다.
이처럼 포스팅할때마다 이미지가 잘려서 나온다면 이 방법을 유심히 살펴보시구요.
그렇지 않다면 굳이 머리아프게 보실 필요는 없지만 나중을 위해서 알아두시는 것도 좋을 것 같아요.
처음부터 같은 스킨을 계속 써오셨다면 CSS와 관리모드의 차이가 없을거에요.
그렇더라도 이미지를 업로드하면 테두리나 여백때문에 약간 잘림현상이 생기는 스킨도 있으니까
되도록이면 CSS의 수치보다 10px정도 작게 설정하시는게 좋은 것 같더라구요.
제 경우 CSS의 본문크기는 670px, 관리모드의 가로크기는 660px로 설정했답니다.
그렇더라도 이미지를 업로드하면 테두리나 여백때문에 약간 잘림현상이 생기는 스킨도 있으니까
되도록이면 CSS의 수치보다 10px정도 작게 설정하시는게 좋은 것 같더라구요.
제 경우 CSS의 본문크기는 670px, 관리모드의 가로크기는 660px로 설정했답니다.
