Flatinum 스킨 글영역 크기 조절하기, 가로 넓이 조절하기

안녕하세요. 이번에도 역시 Flatinum 스킨에 관해 다루겠습니다.

Flatinum 스킨은 기타 다른 스킨들과는 조금 다르게 부트스트랩을 이용하여 스킨을 만들었습니다. 부트스트랩이 솔직히 뭔지는 모르겠고... 그냥 HTML/CSS를 활용하여 더 효과적으로 좋은 것을 만들때 쓰이는 툴이라고 생각하고 있습니다.

어쨌든 특이하게 부트스트랩을 사용하다보니 다른 스킨과는 방식이 좀 다릅니다. 솔직히 말하자면 좀 많이 다르더라구요. 그렇기 때문에 글 넓이 조절하는것도 사실 좀 힘들었는데요. 부트스트랩의 코드 규칙만 안다면 생각보다 아주 간단하게 수정을 할수 있습니다.

무엇보다 부트스트랩은 반응형 웹사이트 제작에 지향하는 툴이다보니... 여러모로 기능도 많다고 하더라구요.

Flatinum 스킨은 기본적으로 블로그 전체 영역이 생각보다 좁은편입니다. 때문에 사진을 크게 넣으시거나 하실때는 수정이 필요합니다. 그 방법은 다음과 같습니다.

먼저 블로그 관리 -> HTML/CSS 편집 -> CSS로 가줍니다. 대부분의 스킨 변경은 CSS에서 해결할수 있습니다.

스크롤을 내려서 가장 아랫부분으로 가시기 바랍니다. 그럼 @media로 시작하는 코드들이 있는데 이것이 바로 블로그 영역을 조절하는 부분입니다. 

이해를 돕도록 간단히 설명을 하자면 첫번째는 사용자 컴퓨터의 가로 픽셀이 최소 768px에서 최대 991px 일경우입니다.

두번째는 최소 992px에서 최대 1199px일경우이며 마지막은 1200px를 넘을경우입니다.

1200px이라 하니까 엄청 큰것 같지만 전혀 크지 않습니다. 왜냐하면 요즘 기본 모니터들도 풀HD를 지원하기 때문에 모니터의 가로픽셀이 기본 1920px 입니다.(해상도가 1920*1080 이므로...) 

심지어 해상도가 상당히 낮은 제 노트북도 가로픽셀은 1366px 입니다.

따라서 대부분의 사용자는 1200px 이상에 해당한다는 것입니다. 그 아래의 해당하려면 옛날 커다란 CRT 모니터 쓸때나 정도에 해당합니다.

모바일의 경우 모바일 웹을 쓰면 아예 다른 스킨으로 굴러가기 때문에 전혀 해당사항이 없습니다. 

따라서 마지막인 min-width: 1200px 안에서만 설정을 해줘도 되지만 혹시모르니 모두 설정정도는 해두시는게 좋습니다.

.container

#jbContentColumn

#jbSidebarColumn

이 세가지가 있는데 이것은 아래와 같습니다.

각 영역입니다. 즉 .container = #jbContentColumn + #jbSidebarColumn 입니다.

저 같은 경우 블로그 전체 영역 가로 넓이를 1250px를 주었고 글 영역 부분 980px, 사이드바 영역을 270px 주었습니다.

이렇게 조절하시면 Flatinum 스킨에서 원하는 크기대로 조절하실수 있습니다.

이것으로 포스팅 마치겠습니다.