티스토리 북클럽 스킨 본문 & 사이드바 넓이 수정

티스토리 북클럽 스킨의 가로 사이즈는 1080px다. 다음과 같이 수정할 예정이다.

① 본문 넓이 : 740px ▶ 670px

② 사이드바 넓이 : 230px ▶ 300px

전체 가로 사이즈 1080px는 동일하기에 수정하지 않는다. (본문 +70, 사이드바 -70)

③ 브라우저 크기 1080px ~ 768px, 사이드바 넓이 : 300px ▶ 250px

④ 사이드바 구분선 겹치는 현상 수정

 

1. 본문 넓이 (가로폭) 수정

경로 : 블로그관리홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS

① (검색) Ctrl + F :  #content 검색
(337) #content {
(338) float: left;
(339) width: 68.518518518518519%;
(340) padding: 72px 0 60px;

② (339) 68.518518518518519% ▶ 62.037037037037038% 수정

670 / 1080 x 100 = 62.037037037037038

2. 사이드바 넓이 (가로폭)  수정

경로 : 블로그관리홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS

① (검색) Ctrl + F : #aside 검색

(351) #aside { float: right;
(352) width: 21.296296296296296%;
(353) padding: 75px 0 32px;
(354) box-sizing: border-box; }

② (352) : 21.296296296296296% ▶ 27.777777777777778% 수정

300 / 1080 x 100 = 27.777777777777778

3. 사이드바 구분선 수정

경로 : 블로그관리홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS

본문과 사이드바 넓이를 수정하면 본문과 사이드바를 구분하는 구분선이 사이드바와 겹치게 된다.

다음과 같이 수정한다.

① Ctrl + F : #container .content-wrap:before 검색

(319) #container .content-wrap:before {
(320) content: "";
(321) position: absolute;
(322) top: 0;
(323) left: 50%;
(324) z-index: 10;
(325) width: 1px;
(326) height: 100%;
(327) margin-left: 255px;
(328) background-color: #eee;
(329) }

② (323) margin- left: 25px ▶ 185px 수정 (적절한 값을 찾아 수정)

4. Media Screen 수정

경로 : 블로그관리홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS

1) 브라우저 크가가 1080 보다 작을때 사이드바 넓이를 250px로 수정

① Ctrl + F : @media screen and (max-width:1080px) 검색

② # asid 추가

#aside { float: right;
width: 23.148148148148148%;
padding: 75px 0 32px;
box-sizing: border-box;
}

250 / 1080 x 100 = 23.148148148148148

2) 사이드바 겹치는 현상 수정

① Ctrl + F : @media screen and (max-width:1080px) 검색

(2374) #container .content-wrap:before {
(2375) left: 72.7%;
(2376) margin-left: 0;
(2377) }

② (2375) left: 72.7%; ▶ 68.518518518518518% 수정 (적절힌 깂을 찾아 수정)

티스토리 기본 설정