너비별 사이드바 크기 고정 방법 북클럽 스킨 css 수정

이전 글에 북클럽 스킨을 어떻게 변경했는지 설정법에 대한 글을 작성했는데, 사이드바 설정을 새롭게 바꿔서 그 설정법에 대해 기록해둔다.

북클럽 수정 내용 확인하기

https://rasdin.tistory.com/593

이전에는 웹페이지 좌우 폭에 맞춰서 사이드바와 본문의 너비가 일정한 비율로 변하게 설정했는데, 광고 크기는 200px, 250px, 300px, 350px로 정해져 있는 것이 많다보니 계속 신경이 쓰였다.

그래서 어떻게 사이드바 크기만 고정시키고 남는 공간에 맞춰서 본문의 너비가 조절되는 방법을 알면 좋겠다는 생각에 계속 방법을 찾아보다가 기회가 닿아 그 방법을 알낼 수 있었다.

현재 블로그 설정은

좌우 폭 너비      사이드바 크기

768px               없음

1080px              200px

1200px              250px

1680px              300px

1920px              350px

위와 같이 사이드바 크기가 고정되도록 설정했다.

위와 같이 웹페이지 좌우 너비에 따라 노출되는 사이드바의 크기를 다르게 고정시키기 위해서는 CSS에서 /*Medea Screen*/ 부분을 찾아 다음과 같이 추가해주어야 한다.

비율과 고정 픽셀의 해결방법은 바로 [calc]라는 명령어였다. 해당 명령어를 통해 일정한 비율에서 고정 픽셀 값을 제외한 값을 계산하도록 설정한 덕분에 사이드바 크기는 고정이 되면, 본문의 좌우 폭은 웹페이지 크기에 따라 증감하도록 설정 할 수 있었다.

2363	/* Media Screen */
2364	@media screen and (max-width:1680px) {
2365		#content {
2366		float: right;
2367		width: calc(100% - 300px);
2368		padding: 20px 20px 60px;
2369		box-sizing: border-box;
2370	}
2371		#aside {
2372	float: left;
2373	width: 300px;
2374	padding: 75px 20px 32px;
2375	box-sizing: border-box;
2376
2377	@media screen and (max-width:1280px) {
2378		#content {
2379		float: right;
2380		width: calc(100% - 250px);
2381		padding: 20px 20px 60px;
2382		box-sizing: border-box;
2383	}
2384		#aside {
2385	float: left;
2386	width: 250px;
2387	padding: 75px 20px 32px;
2388	box-sizing: border-box;
2389	}
2390	@media screen and (max-width:1080px) {
2391		#content {
2392		float: right;
2393		width: calc(100% - 200px);
2394		padding: 20px 20px 60px;
2395		box-sizing: border-box;
2396	}
2397		#aside {
2398	float: left;
2399	width: 200px;
2400	padding: 75px 20px 32px;
2401	box-sizing: border-box;
2402	}

좌우 폭이 모바일 기기에 해당하는 768픽셀 미만인 경우에는 다음과 같이 설정되어있다. 북클럽 스킨의 기본 설정과 동일한데, 기본 설정에서 좌우 여백이 0으로 되어 있는 것을 20px로 수정해뒀다.

2441	@media screen and (max-width:767px) {
2442		#content {
2443		padding: 20px 20px 60px;
2444		box-sizing: border-box;
2445	}

위 내용들을 통해 좌우 너비 1680픽셀까지는 사이드바 크기를 설정할 수 있었는데, 이상하게 1680픽셀을 초과하면 사이드바가 사라지는 문제가 나타났다.

최대 1920픽셀까지 인식하도록 되어있는데, 사이드바 크기를 350픽셀로 설정해도 사이드바가 사라지는 것이다. 해결방법은 의외로 간단했는데, 해당 구간은 고정값이 아닌 비율로 처리해서 해결했다.

사이드바의 크기를 페이지 너비의 19%, 본문 너비를 81% 로 설정했다.

※ 300 < 19%*1681, 350 < 19%*1920

1920픽셀보다 좌우 폭이 넓은 경우는 따로 설정하지 않았기 때문에 그 이상으로 폭을 넓혀도 사이드바나 본문의 폭이 늘어나지는 않는다.

마음 같아서는 사이드바에 있는 광고의 크기도 사이드바 크기에 따라 크기가 변하도록 하고 싶은데, 플러그인이 아니어서 적용되지 않는지 적용할 수 없었다. 스킨 편집을 통해서 가능할지 생각 중.

337	#content {
338		float: right;
339		width: 81%;
340		padding: 20px 20px 60px;
341		box-sizing: border-box;
342	}

 

351	#aside {
352		float: left;
353		width: 19%;
354		padding: 75px 20px 32px;
355		box-sizing: border-box;
356		background-color: #ececec;
357	}