티스토리 레이아웃 조정 (2) - 컨텐츠와 사이드바 사이의 간격 조정

이전글 : http://danggun.tistory.com/entry/티스토리-레이아웃-조정-1-전체-크기


1. 기존의 문제
사실 이전글은 위자드가 해주는 작업을 수동으로 한것에 불구하다. 컨텐츠의 크기도 같이 조정 했기 때문이다.

우리가 해야 할것은 저 100픽셀 정도 되는 빈공간까지 컨탠츠 영역으로 사용 하는 것이다.

이제 다시 본론으로 와서 컨텐츠의 크기를 조정해보자


2. 새로운 문제
이전 글을 참조하여 컨탠츠 영역을 750px로 해보았다.

컨탠츠 영역이 넓어지면서 사이드바가 내려갔다!!!!!
그런데...

밑으로가서 사이드바와 컨텐츠의 간격을 보면

여유공간이 있음을 알수 있다.



3. 여백의 간격
저 이유는 여백설정 때문에 실제 컨텐츠의 크기보다 차지하는 크기가 커서 생기는 문제이다.
이것은 padding값을 수정하여 고칠수 있다.

위에 빨간색 칸이 컨탠츠 영역의 여백을 설정하는 곳이다.
padding라는 값을 넣을때는 여러가지 방법이 있는데

{padding : 속성값(top)  속성값(right)  속성값(bottom)  속성값(left)}
이렇게 4가지를 다 넣는 방식

{padding : 속성값(top, bottom)  속성값(left, right) }
이렇게 2가지만 넣는 방식

{margin : 속성값(전체)}
이렇게 1가지만 넣는 방식

그리고 한가지 값을 생략하는 방식등이 있다.

어찌됬건 위의 값을 보면 알겠지만 라이트가 42px나 잡아먹고 있음을 알수 있다 ㅡ,.ㅡ;
저걸 10px로 바까주면

정상적으로 컨텐츠와 사이드바의 간격이 조정 되었다.