이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[simple gray 3.0] 블로그 가로 길이 변경 방법


※ 이 가이드는 simple gray 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다.




현재 Simple Gray 3.0은 가로 길이가 다음과 같이 되어있습니다.


simple gray 블로그 가로 길이


1. 총 가로길이 : 1000px

2. 본문 가로길이 : 780px

3. 사이드바 가로길이 : 200px

#. 본문과 사이드바 사이 여백 : (총 가로길이) - (본문 + 사이드바) = 20px


크기를 조절하는 방법은 사람에 따라 여러 가지 방법이 있겠지만 저는 두 가지를 적어봅니다.



본문 크기 줄이고 사이드바 크기 늘리기

본문 크기를 700으로 줄이고, 사이드바 크기를 280으로 만들어 보겠습니다.


#1. 본문 크기 줄이기

images 폴더 안을 보면 simplegray.css 파일이 있습니다.


그 파일을 편집기로 열고 79번째 줄에 있는

#content { float: left; width: 780px; padding: 15px 10px; box-shadow: 0 0 10px #ddd; background: #fff; }

width: 780px; 값을 조절해주세요.


우리는 700으로 줄여야 하니 width: 700px; 로 설정합니다.


#2. 사이드바 크기 늘리기

simplegray.css 파일에서 밑으로 내려오다 보면 258번째 줄에 있는

#sidebar { float: right; width: 200px; text-shadow: 1px 1px #eee; }

이곳에서도 width: 200px; 값을 수정해줘야 합니다.

이곳엔 내부 여백 설정이 없으니 200px 그대로 출력됩니다.


280으로 설정합니다.


#3. IE7 대응

IE7에서는 box-sizing: border-box; 속성이 먹히지 않아 내부 여백이 그대로 가로 길이로 계산됩니다.

즉, width: 700px; 을 주고 좌, 우에 내부여백 10px 을 주면 IE7에서는 가로 길이를 720px 로 인식합니다.


이걸 맞춰주기 위해 images 폴더 안에 ie7.css 라는 파일이 있습니다. 편집기로 열어주세요.


5번째 줄에 있는

#content { width: 760px; border-top: 2px solid #555; border-bottom: 1px solid #ddd; }

에서 width: 760px; 값을 수정해줘야합니다.

우리는 700으로 맞췄으니 680px 을 입력하면 됩니다.



작업을 모두 저장하고 업로드 하면 다음과 같은 화면이 나옵니다.


본문 크기 줄이기줄어든 본문, 늘어난 사이드바.



물론 반대로도 가능합니다. :)


전체 크기를 늘려 본문과 사이드바 둘 다 늘리기

이 부분이 애매합니다.


지금 소스는 모든 길이가 px로 고정되어있는데요.


만약 블로그 총 가로길이를 1200px로 바꾸고 그에 맞게 본문, 사이드바 길이에 px값을 준다면


해상도가 1200px 미만의 모니터에선 블로그가 잘리거나 가로 스크롤 또는 사이드바가 밀려 내려가는 문제가 발생합니다.


이를 막기 위해선 모든 모니터에 맞게 일일이 px값을 만들어줘야 하는데 힘드니까 % 값을 주는 걸로 합시다. (라파엘 스킨이 이렇게 적용 되어있습니다)


총 가로길이를 1200px 로 한다는 가정 하에 설명하겠습니다.



#1. 전체 크기 늘리기

simplegray.css 파일을 편집기로 열어주세요.


55, 56번째 줄에 있는

#inner-wrap,
#footerbar { max-width: 1000px; }

max-width: 1200px; 으로 수정합니다.


Q. 1200px로 하면 1024 모니터에선 잘리는게 아닌가요?

A. max-width 속성 자체가 '최대 가로 길이'를 정하는 속성입니다. 1200은 넘지 않되 작으면 화면에 꽉 차게 줄어듭니다.



#2. 본문 값 바꾸기

79번째 줄의 width: 780px;width: 73%; 로 변경합니다. (다른 % 값을 써도 됩니다)



#3. 사이드바 값 바꾸기

258번째 줄의 width: 200px;width: 25%; 로 변경합니다. (마찬가지로 다른 % 값을 줘도 됩니다)


주의할게 본문과 사이드바의 크기 합이 100%가 되지 않아야합니다. 최소 2%의 여백은 주세요.



#4. IE7 대응

ie7.css 파일을 열고 5번째 줄에 width: 760px;#2에서 적용한 width 값보단 1, 2% 정도 낮게 지정해주세요. width: 72%;



모든 수정본을 저장, 업로드 하면 다음이 나옵니다.


%값으로 대체화면을 줄이면 본문과 사이드바 크기가 유동적으로 변한다.



해상도 1024의 모니터에선 어떻게 나오나 볼까요?



1024 모니터깔끔하게 잘 나온다.




개인적으로 총 크기에 max-width 값을 주고 본문과 사이드바에 % 값을 주는 걸 좋아합니다.

스마트 기기가 계속 나오고, 그만큼 다양한 해상도가 쏟아져 나오고 있기에 고정된 값으로 모든 해상도에 대응하기는 힘들다고 생각합니다.

물론 실력 좋은 개발자분은 나름의 기술과 노하우가 있겠지만, 저 같은 하수는 아는 선에서 최대로 뽑아내야 하니까요. :)



여하튼 이상으로 블로그 가로 길이 변경 방법 가이드를 마칩니다.

혹시 다른 방법을 아는 분은 비밀글로 댓글 달아주시면 감사하겠습니다.

최근 댓글