바디 칼럼 넓이 조절방법 CSS에서 첫째. 아래와같은 구문을 찾아서 붉은색 수치를 원하는 넓이로 바꿉니다. 둘째. 컬럼 구획선을 표시하는 판란색글자부분의 그림을 바꿔 줘야합니다. 이미지는 넓이 120, 150, 160, 180, 200(기본) 이렇게 5가지를 만들어 넣어 놨으므로 이미지파일의 숫자부분만 바꾸면 됩니다. 셋째. 바디부분의 기본선표시를 오른쪽으로 했는데 왼쪽으로 돌리고 싶으면 초록색 부분을 left로 바꾸고 아래 보라색 부분의 구문을 복사해서 #columnRight 의 끝부분에 붙이고 #columnLeft 에서는 삭제를합니다, 네째. 좌우 넓이 값이 바뀌면 중간 컬럼 넓이값도 변경을 해주어야합니다 전체넓이(980)-(좌 +우+ 좌우의 마진값) = 중간넓이값
/* Site Layout - Content Body */ #contentBody { position:relative; width:980px; padding-bottom:0px; overflow:hidden; background:url(../images/default/bgContentBody160.gif) repeat-y right top; border-bottom:1px solid #dddddd;}
/* Site Layout - Column Left */ #columnLeft { position:relative; width:181px; float:left; margin-right:5px; padding-bottom:80px; background:url(../images/default/bgContentBody180.gif) repeat-y right top;border-bottom:1px solid #dddddd; } #columnLeft .mask { width:181px; height:5px; background:#ffffff display:block; clear:both;}
3컬럼짜리 레이아웃 올립니다.
바디 칼럼 넓이 조절방법
CSS에서
첫째. 아래와같은 구문을 찾아서 붉은색 수치를 원하는 넓이로 바꿉니다.
둘째. 컬럼 구획선을 표시하는 판란색글자부분의 그림을 바꿔 줘야합니다.
이미지는 넓이 120, 150, 160, 180, 200(기본) 이렇게 5가지를 만들어 넣어 놨으므로 이미지파일의 숫자부분만 바꾸면 됩니다.
셋째. 바디부분의 기본선표시를 오른쪽으로 했는데 왼쪽으로 돌리고 싶으면 초록색 부분을 left로 바꾸고
아래 보라색 부분의 구문을 복사해서 #columnRight 의 끝부분에 붙이고 #columnLeft 에서는 삭제를합니다,
네째. 좌우 넓이 값이 바뀌면 중간 컬럼 넓이값도 변경을 해주어야합니다
전체넓이(980)-(좌 +우+ 좌우의 마진값) = 중간넓이값
/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:0px; overflow:hidden; background:url(../images/default/bgContentBody160.gif) repeat-y right top; border-bottom:1px solid #dddddd;}
/* Site Layout - Column Left */
#columnLeft { position:relative; width:181px; float:left; margin-right:5px; padding-bottom:80px; background:url(../images/default/bgContentBody180.gif) repeat-y right top;border-bottom:1px solid #dddddd; }
#columnLeft .mask { width:181px; height:5px; background:#ffffff display:block; clear:both;}
/* Site Layout - Column Middle */
#columnMiddle { width:630px; float:left; overflow:hidden;}
#visualArea { width:630px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}
/* Site Layout - Column Right */
#columnRight { position:relative; width:161px; float:left; margin-left:5px;}
#columnRight .mask { width:161px; height:5px; background:#ffffff; display:block;}
===================================================================
/* Site Layout - Column Left */
#columnLeft { position:relative; width:181px; float:left; margin-right:5px; padding-bottom:80px; background:url(../images/default/bgContentBody180.gif) repeat-y right top;border-bottom:1px solid #dddddd; }
ㅋ 다른데서 작성해서 여기에 붙여 넣기 해야하느데 쫍은데서 작성하려니까 위 작성된게 안보여서.. 어렵네요..