2008년 02월 10일
[얼음집 꾸미기]#5 본문 크기 키우기
오늘도 정신없이 올려봅니다...
이번에는 이글루스 본문의 크기를 1024x768 사이즈에 맞춰 늘려보겠습니다.
요즘 들락날락 거려서 많이 친근해졌을 css편집으로 이동합시다.
여기서 내용을 살펴보도록 하겠습니다.
(아래는 저의 스킨 css 정보에서 발췌했습니다..)
css편집에서 위의 빨간 글씨처럼 바꿔주시면 간단하게 1024x768에 맞춰지게 됩니다.
이제 위의 수치에 대해 알아보도록 하겠습니다.
1은 #body의 폭입니다.
#body는 앞서 말씀드렸듯이 일반적으로 그림자 효과를 주기 위해 쓰입니다. 하지만 저는 찢어진 내지 표현을 위해 사용했으므로 1024x768해상도의 모니터에서 전부 보이게 하기 위해 1024의 크기로 맞추었습니다.
변경방법은 css란의 #body 내부에 있는 width: ~~px; 옵션을 수정해 주시면 됩니다.
2는 #container와 #header, #footer의 폭입니다.
#body와 #container의 폭의 차이를 통해 내지가 찢어진 표현을 넣을 예정이므로 #body보다 #container가 좀 더 작습니다. 저는 양쪽 폭에 약 7픽셀 가량의 효과를 넣을 예정이므로 도합 14픽셀이 작은 1010픽셀에 맞추었습니다.
변경방법은 css란의 #container와 #header, #footer의 내부에 있는 width: ~~px; 옵션을 수정해 주시면 됩니다.
#header, #footer의 폭은 레이아웃에 따라 각기 다르게 변동될 수도 있습니다. 저는 #container와 #header, #footer 모두 같게 맞춰주면 되는 레이아웃을 선택했으므로 동일하게 1010으로 맞춰 주었습니다.
3은 #sidebar의 폭입니다.
#sidebar는 레이아웃에 따라 #container의 좌, 우측 또는 전체에 맞춰서 정렬됩니다. #sidebar의 폭을 조절해 줄 수도 있지만 #sidebar안에 들어가는 메뉴들의 폭은 고정되어 있으므로 손대지 않는것을 추천합니다.
4는 #content의 폭입니다.
우리가 이글루스의 본문 크기를 늘리려면 바로 이 #content의 폭을 늘려야 합니다. #content와 #sidebar 두 항목의 폭의 합이 #container의 폭을 넘어가면 #sidebar가 하단으로 숨어버리는 사태가 일어납니다. 이점 유의하셔서#container의 폭 = #content와 #sidebar의 폭의 합 이 되도록 조정해 주세요.
변경방법은 css란의 #content 내부에 있는 width: ~~px; 옵션을 수정해 주시고,
/* content 스타일 시작 */ 란의 내부에 있는 항목 중
#content div.post div.content {
width: 780px;
overflow: hidden;
}
에서 width: ~~px;항목 또한 수정해 주셔야 합니다.
/* content 스타일 시작 */ 란의 폭을 수정하시지 않으면 본문이 표현되는 폭은 변하지 않습니다.
수고하셨습니다^^
이번에는 이글루스 본문의 크기를 1024x768 사이즈에 맞춰 늘려보겠습니다.
요즘 들락날락 거려서 많이 친근해졌을 css편집으로 이동합시다.
여기서 내용을 살펴보도록 하겠습니다.
(아래는 저의 스킨 css 정보에서 발췌했습니다..)
body {
margin: 0;
padding: 0;
text-align: center;
background: #000000 url(http://pds7.egloos.com/pds/200802/10/25/yoco01.png) 0% 100% no-repeat fixed;
font-size: 12px;
line-height: 1.5em;
}
a:link {}
a:visited {}
a:hover {}
a:active {}
margin: 0;
padding: 0;
text-align: center;
background: #000000 url(http://pds7.egloos.com/pds/200802/10/25/yoco01.png) 0% 100% no-repeat fixed;
font-size: 12px;
line-height: 1.5em;
}
a:link {}
a:visited {}
a:hover {}
a:active {}
hr.line { display: none; }/*system class*/
#body {
width: 1024px;
margin: 0 auto;
padding: 0;
text-align: center;
background: url(http://pds8.egloos.com/pds/200802/10/25/body1024-2.png) repeat-y;
}
* html #body { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=http://pds8.egloos.com/pds/200802/10/25/body1024-2.png); ;}/*for IE*/
width: 1024px;
margin: 0 auto;
padding: 0;
text-align: center;
background: url(http://pds8.egloos.com/pds/200802/10/25/body1024-2.png) repeat-y;
}
* html #body { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=http://pds8.egloos.com/pds/200802/10/25/body1024-2.png); ;}/*for IE*/
#container {
width: 1010px;
margin: 0 auto;
text-align: left;
background: url(http://pds9.egloos.com/pds/200802/10/25/clear4.png);
}
width: 1010px;
margin: 0 auto;
text-align: left;
background: url(http://pds9.egloos.com/pds/200802/10/25/clear4.png);
}
#header {
width: 1010px;
height: 240px;
position: relative;
margin: 0 auto;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_01.png) right no-repeat;
}
width: 1010px;
height: 240px;
position: relative;
margin: 0 auto;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_01.png) right no-repeat;
}
#content {
float: right;
width: 820px;
text-align: center;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_03.png) top right no-repeat;
}
float: right;
width: 820px;
text-align: center;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_03.png) top right no-repeat;
}
#sidebar {
float: left;
width: 190px;
text-align: center;
line-height: 1.2em;
margin-bottom: 50px;
padding-top: 20px;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_02.png) top right no-repeat;
}
float: left;
width: 190px;
text-align: center;
line-height: 1.2em;
margin-bottom: 50px;
padding-top: 20px;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_02.png) top right no-repeat;
}
#footer {
clear: both;
width: 1010px;
height: 20px;
}
clear: both;
width: 1010px;
height: 20px;
}
..중략..
/* content 스타일 시작 */
#content div.post {
margin: 0 0px;
text-align: left;
}
#content div.post h2.postdate {}
#content div.post h3.posttitle {}
#content div.post p.postadmin {}
#content div.post div.content {
width: 780px;
overflow: hidden;
}
..중략..
/* content 스타일 시작 */
#content div.post {
margin: 0 0px;
text-align: left;
}
#content div.post h2.postdate {}
#content div.post h3.posttitle {}
#content div.post p.postadmin {}
#content div.post div.content {
width: 780px;
overflow: hidden;
}
..중략..
css편집에서 위의 빨간 글씨처럼 바꿔주시면 간단하게 1024x768에 맞춰지게 됩니다.
이제 위의 수치에 대해 알아보도록 하겠습니다.
1은 #body의 폭입니다.
#body는 앞서 말씀드렸듯이 일반적으로 그림자 효과를 주기 위해 쓰입니다. 하지만 저는 찢어진 내지 표현을 위해 사용했으므로 1024x768해상도의 모니터에서 전부 보이게 하기 위해 1024의 크기로 맞추었습니다.
변경방법은 css란의 #body 내부에 있는 width: ~~px; 옵션을 수정해 주시면 됩니다.
2는 #container와 #header, #footer의 폭입니다.
#body와 #container의 폭의 차이를 통해 내지가 찢어진 표현을 넣을 예정이므로 #body보다 #container가 좀 더 작습니다. 저는 양쪽 폭에 약 7픽셀 가량의 효과를 넣을 예정이므로 도합 14픽셀이 작은 1010픽셀에 맞추었습니다.
변경방법은 css란의 #container와 #header, #footer의 내부에 있는 width: ~~px; 옵션을 수정해 주시면 됩니다.
#header, #footer의 폭은 레이아웃에 따라 각기 다르게 변동될 수도 있습니다. 저는 #container와 #header, #footer 모두 같게 맞춰주면 되는 레이아웃을 선택했으므로 동일하게 1010으로 맞춰 주었습니다.
3은 #sidebar의 폭입니다.
#sidebar는 레이아웃에 따라 #container의 좌, 우측 또는 전체에 맞춰서 정렬됩니다. #sidebar의 폭을 조절해 줄 수도 있지만 #sidebar안에 들어가는 메뉴들의 폭은 고정되어 있으므로 손대지 않는것을 추천합니다.
4는 #content의 폭입니다.
우리가 이글루스의 본문 크기를 늘리려면 바로 이 #content의 폭을 늘려야 합니다. #content와 #sidebar 두 항목의 폭의 합이 #container의 폭을 넘어가면 #sidebar가 하단으로 숨어버리는 사태가 일어납니다. 이점 유의하셔서#container의 폭 = #content와 #sidebar의 폭의 합 이 되도록 조정해 주세요.
변경방법은 css란의 #content 내부에 있는 width: ~~px; 옵션을 수정해 주시고,
/* content 스타일 시작 */ 란의 내부에 있는 항목 중
#content div.post div.content {
width: 780px;
overflow: hidden;
}
에서 width: ~~px;항목 또한 수정해 주셔야 합니다.
/* content 스타일 시작 */ 란의 폭을 수정하시지 않으면 본문이 표현되는 폭은 변하지 않습니다.
수고하셨습니다^^
# by | 2008/02/10 21:26 | ▶얼음집 꾸미기 | 트랙백 | 덧글(3)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
사진이 짤려서 보기 안좋았었거든요....