[Blog&iPhone]/팁&정보

[#2] 티스토리 반응형 스킨 #2 본문 폭 조절하기 / CSS 수정

김껨순 2016. 4. 28. 22:44
반응형

안녕하세요! 저는 현재 Tistory에서 제공하고 있는 반응형 스킨 #2를 사용하고 있는데요, 웹서핑을 할 때에도 듀얼창으로 띄우는게 습관이 되어 있어서, 화면을 반 나누어 창을 두개씩 띄워둔답니다. 그래서 주로 블로그를 보게 되는 사이즈는 Middle 사이즈로, Tablet용 화면을 PC에서도 사용하죠. 당연히 포스팅도 Tablet용에 맞추어 작성하구요.

 

그러던 어느 날 전체 화면 상태에서 포스팅을 보게 되었는데요! 띠로리! 한줄에 두 장씩 들어가게 사이즈 맞춰서 넣어놓은 사진들이 모두 한줄에 하나씩밖에 못들어가서 죄다 밀려 있더라구요.

 

원인은 바로 본문 폭이었는데요. Tablet 상태의 본문 폭 보다 전체화면인 PC 상태의 본문 폭이 좁아서 사진이 모두 밀려 나오는 것이었어요. 그런데 아무리 찾아봐도 본문 폭에 대한 팁이 없어 스킨 설명 페이지에 댓글도 남겨 봤으나 아무런 피드백도 받지 못하여 ㅠㅠ 혼자 이것저것 만지던 와중에 발견해서 공유드려요 > _<)/

 

HTML이라고는 예전에 나모 웹 에디터 시절에 만져본 이후로 처음이라... 결국은 구글 웹마스터에게 도움을 받았네요 ;)

 

반응형 스킨 #2의 본문 폭 혹은 본문 너비 조절 방법은! 

 

CSS에서 /*헤더*/ 부분에 있는 article_skin의 width를 변경해주시면 되요. 사진의 노란색으로 처리되어 있는 부분이요!

 

저는 두 개의 사진을 나란히 둘 때 각 사진의 폭을 주로 400px로 설정하는데요. 왜인지는... 아마도 싸이월드 시절부터 400X300에 길들여져서 인듯 해요 ㅋㅋㅋ 그래서, 더도 말고 덜도 말고 사진 두개 나란히 둘 수 있는 900px로 폭을 설정했답니다.

 

이거 해결하고나니 얼마나 속이 시원한지! 사이다 원샷 느낌이예요 ;) 누군가에게 사이다가 되길 바래요!

 

댓글공감은 언제나 힘이 됩니다

아래에 있는 하트를 꾹 눌러주세요!

반응형