티스토리 반응형 스킨 #2 이미지 가로에 꽉 차게 나오게 하는 방법

바로 이미지를 보는 게 이해하기 쉽겠지!

1.

이미지를 가로에 꽉 차게 한 스타일

2.

기존처럼 평범한 스타일

짜잔!

전자가 훨씬 예쁘지 않은가?

물론 사진에 따라서, 이미지의 용도에 따라서 어떤 이미지의 방식이 포스팅에 어울릴 지는 조금씩 다를 수 있겠지만 여행 사진 쪽은 전자처럼 가로를 꽉 채우는 이미지 업로드 방식이 훨씬 예쁘지 않을까 싶다.

안타깝게도 우리의 티스토리는 지나치게 친절하여 일일이 개인이 설정을 해 줘야 한다. 고오맙다....

이렇게 가로 화면 가득 이미지를 채우는 방법은 두 가지다.

먼저 첫 번째 방법은

글 작성을 할 때마다 건들여주는 방법인데... 너무 귀찮으니 비추한다. 그냥 이런 방법도 있구나- 하고 넘어가길.

일단 티스토리 모바일 앱 에디터로는 불가능하다. 정말 티스토리 모바일 앱은 똥이다, 똥.

모바일에서 굳이 하고 싶다면, 티스토리 모바일 앱을 버리고 크롬같은 인터넷 어플에서 데스크탑 모드로 글을 써야 한다. 거기서 기본모드가 아닌 HTML모드에 진입해서 건들여줘야 한다. 그러니까, 소위 alt 속성을 일일이 이미지에 넣어줄 때 처럼 건들여줘야 한달까.

HTML모드에서 보는 이미지

HTML모드에서 보이는 이미지는 이런 스타일의 코드를 갖고 있다. 아무리 width사이즈가 커도 화면 가득 보여주지 않는다. 그렇기에 여기서 data-ke-mobilestyle="widthOrigin"의 widthOrigin을 widthFull로 바꿔주면 끝. 여기를 건들여준다면 가로폭이 조금 짧은 사진도 가로끝까지 늘려줄 것이다.

만일 포스팅 속에 가로 끝까지 늘려주고픈 사진이 많다?

음 ... 뭐 ... 찾기 + 바꿔넣기 신공을 하는 수 밖에 .... 툴에 따라 한 번에 할 수도 있기야 하겠지만 귀찮은 건 매한가지니까 .... 음 ....  화이팅 .......

그렇기에 두번째 방법을 강력 추천한다.

바로 이미지의 정렬 자체에다 명령어를 집어넣는 방법.

스킨 편집 - html 수정 - css 탭에 들어가서 코드를 입력해두면 된다. 이런 코드는 언제나 하단에 주석과 함께 넣어두는게 정리해서 보기 편하니 css하단에 넣어두길.

/* 이미지를 가로 꽉 차게 나오게 하는 방법 */

.contents_style .alignLeft{
float: None !important;
left: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
max-width: 100vw !important;
position: relative !important;
right: 50% !important;
width: 100vw !important; }

첫번째 방법에서 widthOrigin을 widthFull로 바꾸었듯이 .alignLeft 즉, 좌측 정렬을 widthFull로 바꿔놓은 것이다.

나는 어차피 이미지를 업로드 할 때에 따로 정렬을 건들지 않으므로(기본적으로 이미지는 업로드하면 가운데 정렬로 되어 있다) 좌측 정렬에 설정해놓았으니 필요에 따라 저 부분을 바꿔서 쓰길.

좌측정렬 - .alignLeft
가운데정렬 - .alignCenter
우측정렬 - .alignRight

아, 이번엔 놀랍게도 데스크톱 에디터 말고도 티스토리 앱 에디터에서도 가능하다.

저걸로 좌측 / 우측 정렬을 설정해서 하면 된다.

여담으로.

코드의 맨 첫 부분인 .contents_style 이것. 이것은 티스토리 반응형 스킨 #2에 해당하는 코드이기 때문에 본인의 스킨이 반응형 스킨 #2가 아니라면 개인의 스킨에 알맞는 코드를 찾아야한다.

이건 크롬에서 스킨 편집에 진입하여 html/css 편집을 건들 때, F12를 활성화 시켜서 찾아내면 되는데 ... 으음 ... 이 부분은 까막눈인 나보다는 다른 사람들의 블로그에서 찾아보는 게 좋을 것이다. 화이팅...

아참.

두번째 방법은 무척 감사하게도 이 분의 블로그에서 알게 되었다. 감사합니당!!!

티스토리에 Full-Width 이미지 쉽게 넣기