본문 사이즈 넓히기

이전에 포스팅 해두었던 가로 사이즈 수정하기도 참고하시면 도움이 될 겁니다. 동영상으로 만들어두었는데요. 본문을 넓히려고 문의하는 분들이 계시니 자세히 설명을 드리도록 하겠습니다.

우선 CSS를 확인할 수 있는 GitHub에 올려둔 티스토리 스킨을 보시면서 따라해보세요. CSS에서 레이아웃 부분부터 살펴보면 container - content - alpha - beta 로 제작되어 있습니다.

본문이 alpha(알파)에 해당됩니다. 본문을 넓히고 싶으시다면 alpha의 width(가로)의 크기를 높게 해주시면 됩니다. 디폴트(기본)으로 alpha는 580px로 되어있습니다. 580 픽스에 100 픽스 만큼 가로 사이즈를 넓힌다면 #alpha { width 680px; }

그리고 #alpha-inner에도 마찬가지로 #alpha-inner { width:660px; }로 수정해주시면 됩니다. 즉 100 픽스 만큼 넓힌다면 다음과 같습니다.

#alpha {

              width 680px;
}
#alpha-inner {
               width:660px;
}

위와 같이 고쳐주시면 됩니다. 그런데 문제는 본문 부분만 넓히면 어찌될까요? 전체를 감싸주는 contanier의 크기가 820px로 설정되어 있기 때문에 본문을 제외한 다른 부분은 본문에 밀려서 beta(베타) 메뉴가 밑으로 내려가게 됩니다. 때문에 #container-inner의 크기  820px에도 100px를 더해주셔야 합니다.

#container-inner {
               width:920px;
}

위와 같이 920px가 되겠습니다. 마찬가지로 #beta(메뉴)의 크기도 수정하고 싶다면 #beta와 #beta-inner의 width의 값을 바꾸고, 변경된 값만큼 #container-inner의 width 값을 알맞게 맞춰주어야합니다.

더불어 본문과 함께 header(윗부분)와 footer(아랫부분)의 크기도 동일한 디폴트 값을 가지고 있습니다. 본문의 가로 값 width에 100px 씩 더해주었으니 header와 footer의 width 값에도 100px 씩 더해주면 좋습니다. (아마도 header와 footer를 신경쓰지 않으셔도 사용하는데 불편한 점은 없을 것입니다)

그런데 #alpha 하나만 있어도 되는데, 왜 #alpha-inner를 따로 만들어두어서 번거럽게 했으냐 물으실 수도 있을 겁니다. 그에 대한 대답은 Default XHTML+CSS 두번째 글에 포스팅해둔 이미지를 보시면, 각 영역별로 간격이 있는 것을 보실 수 있을 겁니다. 각 영역마다 간격을 다르게 할 수도 있다는 것을 뜻합니다.

어려울 수도 쉬울 수도 있을 텐데, 어렵게 느끼시는 분은 한 번 도전해보세요. ^^


 




(720p HD 재생시 버퍼링이 심하면 로딩이 다 끝난후 재생해서 보세요.)