본문 사이즈 넓히기
2010. 6. 30. 23:00이전에 포스팅 해두었던 가로 사이즈 수정하기도 참고하시면 도움이 될 겁니다. 동영상으로 만들어두었는데요. 본문을 넓히려고 문의하는 분들이 계시니 자세히 설명을 드리도록 하겠습니다.
우선 CSS를 확인할 수 있는 GitHub에 올려둔 티스토리 스킨을 보시면서 따라해보세요. CSS에서 레이아웃 부분부터 살펴보면 container - content - alpha - beta 로 제작되어 있습니다.
본문이 alpha(알파)에 해당됩니다. 본문을 넓히고 싶으시다면 alpha의 width(가로)의 크기를 높게 해주시면 됩니다. 디폴트(기본)으로 alpha는 580px로 되어있습니다. 580 픽스에 100 픽스 만큼 가로 사이즈를 넓힌다면 #alpha { width 680px; }
그리고 #alpha-inner에도 마찬가지로 #alpha-inner { width:660px; }로 수정해주시면 됩니다. 즉 100 픽스 만큼 넓힌다면 다음과 같습니다.
위와 같이 고쳐주시면 됩니다. 그런데 문제는 본문 부분만 넓히면 어찌될까요? 전체를 감싸주는 contanier의 크기가 820px로 설정되어 있기 때문에 본문을 제외한 다른 부분은 본문에 밀려서 beta(베타) 메뉴가 밑으로 내려가게 됩니다. 때문에 #container-inner의 크기 820px에도 100px를 더해주셔야 합니다.
위와 같이 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 재생시 버퍼링이 심하면 로딩이 다 끝난후 재생해서 보세요.)
우선 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 재생시 버퍼링이 심하면 로딩이 다 끝난후 재생해서 보세요.)
'Customize' 카테고리의 다른 글
헤더에 이미지 넣는 방법 (0) | 2010.11.06 |
---|---|
Layout Project 소개 (0) | 2010.09.02 |
폰트 색상 변경 방법 (0) | 2010.06.15 |
관리자 로그인시 글 관리 메뉴가 출력 (0) | 2010.05.09 |
맑은고딕과 나눔고딕 폰트 적용하는 방법 (0) | 2010.05.09 |