티스토리 사이드바 가로 크기, 본문 가로 크기 조절 방법

티스토리 사이드바 가로 크기, 본문 가로 크기 조절 방법입니다.

제가 아직 티스토리 초보라 전부는 잘 모르고,

사이드바에 광고 넣으려다가 , 이것저것 만져 보면서 기록해 놓은 것입니다.

 

 

 

 

저는 반응형 위 스킨을 사용합니다.

스킨마다 CSS 소스가 다르니 참고하세요.

 

 

 

 

관리 메뉴에서 -> 스킨 편집 선택

 

 

 

 html편집 선택

 

 

CSS 클릭

 

 

CSS 본문 클릭한 다음 ctrl+F 키를 눌러

#sidebar를 검색

 

또는 제가 쓰는 위, 반응형 스킨 경우

 

마우스 휠을 돌려 소스를 밑으로 찾아 보면

sidebar 부분을 금방 찾을 수 있습니다.

 

사이드바 가로 크기와 본문 가로 크기 조절을

위해선 CSS의 소스를 봐야 하는데,

html을 몰라도 그 다지 상관은 없는 것

같습니다.

 

 

위는 제가 사이드바 소스를 만져 보면서 기록해 놓은 것입니다.

 

사이드바 가로 크기 조절을 위해선 다른 건 볼 필요 없고

51번째 줄 빨간 줄 표시 사이드바 가로 크기만 보면 됩니다.

위 그림은 300px 로 되어있는데

이것을 줄이면 사이드바 가로 크기가 줄어들고

늘리면 사이드바 가로 크기가 늘어나게 됩니다.

 

---

 

사이드바 가로 크기만 바뀌면 안되니 

아래 보면 사이드바 크기에 맞추어 본문 가로 크기도 맞추어 줍니다.

 

본문 가로 크기 조절하는 부분입니다

 

제가 쓰는 반응형 스킨 같은 경우 80 번째  빨간 줄 표시에

본문 시작 위치 값이 적혀 있습니다. 380px 부분.

 

위,위의 그림의 51번째 줄 사이드바 가로 크기가 300px 이고

여기 80번째 줄 본문 시작 위치는 380px입니다.

 

고로 사이드바와 본문 사이의 공백은 80px 넓이가 되겠네요..

이 두 값을 조절해서 사이드바 크기와 본문 시작 위치를 정하면 되겠습니다.

 

51 번째 사이드바 가로 크기 를 250px 으로 했다면,

80번째 줄 이 값은 250px 이상으로 하면 되겠지요.

 

---

 

그리고 밑에 81번째 줄 초록색 줄은 본문 가로 크기입니다.

기본 1030px입니다.

만일 사이드바 크기를 50px 줄인다면 이 값을 50px 늘리면 됩니다.

 

81 번째 줄 마지막 파란 표시는

본문 오른쪽, 스크롤 바와 본문 사이 공백입니다.

 

설명 많이 하는 하는 것보다.

한 번 직접 값들을 바꾸어 보시고 적용해 보시면 , 금방 이해가 될겁니다.^^