초보 레이아웃 스킨 고치기 1 - CSS 편
2010.03.31 13:28
기본 레이아웃 스킨을 이용해서 사용자 편의에 맞게 수정합니다.
수정은 default.css 파일을 이용하여 수정합니다.
(기본적인 레이아웃 수정은 css 파일 수정만으로 변경할 수 있습니다.)
1. 본문 기본 정렬
기본 센터 정렬입니다.
왼쪽편에 붙이고자 하시면
default.css 파일 11번째 줄 ,
#bodyWrap { position:absolute; width: 980px; margin:0 auto; padding:0 0 0 0;}
position : absolute 로 고칩니다.
※ 기타 참고
width : 넓이
margin : 마진값
padding : 여백 (상 우 하 좌 순서, 순서는 마진값도 동일함)
2. 윗쪽 메뉴, 로고 부분의 높이 조정하기
14번째 줄,
#header { width:980px; height:60px; background:url() no-repeat right top; margin-bottom:10px; z-index:99;}
height : 120px 가 기본입니다. 알맞게 수정하세요. 저는 보시다시피 60px로 고쳤습니다.
여기서 넓이, 배경그림, 배경그림 위치, 여백 등을 수정할 수 있습니다.
※ 주의하실 점은 여기서 height 값은 윗쪽 메뉴 부분의 높이까지 포함하는 높이이므로
'로고 + 메뉴 높이' 까지 생각하셔서 수정하십시오.
※ 배경그림 역시 마찬가지입니다. 상위 메뉴 부분의 배경은 따로 처리하는 레이어가 없으므로,
#header 에서 메뉴 부분의 배경까지 처리할 수 있도록 상위 메뉴 부분의 높이까지 고려하여
배경그림을 만들어서 삽입하십시오.
※ 관리자 레이아웃 설정에서도 배경그림을 삽입할 수 있습니다.
이 때 설정한 배경그림은 가장 밑 바닥에 깔리고
css에서 설정한 배경그림이 그 위에 우선하게 됩니다.
이를 주의하여 배경을 처리해야할 것입니다.
3. 로고 위치 조정하기
15번째 줄,
#header h1 { position:absolute; top:0px; left:25px;}
top, left 값을 이용하여 수정할 수 있습니다.
4. 전체검색 및 언어 변경 부분 수정하기
4-1 언어 변경 레이어
언어 변경 레이어의 이름은 #language 입니다.
필요하신 분은 이 값을 찾아서 수정하면 됩니다.
#header 바로 아래 16번째 줄 부터입니다.
그런데 보통은 언어 변경 부분이 필요없으므로
저는 보이지 않게 설정하였습니다.
#language { position:absolute; top:18px; right:19px; z-index:100; display : none;}
display : none 만 추가하면 됩니다.
(visibility : hidden; 해도 됩니다. )
4-2. 전체 검색 폼 위치 수정하기
검색 폼의 이름은 #isSearch 입니다.
(첨에 #language 아래 24번째 줄에 있는 #it_search_form 인 줄 알고 혼동을 좀 했습니다. 저 같은 착각 하지 마시길 ^^; )
#isSearch { position:absolute; top:35px; right:15px; width:214px; text-align:right;}
저는 top: 48px 를 35px 정도로 수정했습니다.
사용자 입맛에 맞게 다른 부분을 수정하시면 됩니다.
ps. #it_search_form 은 뭔지 모르겠군요. -_-;
5. 상위 메뉴 위치 등 수정하기
현재 제로보드 사이트에서 HOME 제로보드XE 제로보드4 .. 이 부분입니다.
레이어명은 #gnb 입니다.
#gnb { position:absolute; top:60px; left:0; height:30px; overflow:hidden; white-space:nowrap; margin-bottom:10px;background:#000;}
원하시는 입맛에 맞게 위치 및 색상을 수정하면 됩니다.
#gnb li a { display:block; float:left; padding:8px 15px 0 15px; height:25px; color:#e8e8e8; white-space:nowrap; text-decoration:none; font-family:"Arial", "Verdana", "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;font-size:11px;}
메뉴 부분의 색상이나 크기 등의 스타일시트는 이 항목에서 수정하면 됩니다.
※ 다시 주의할 점, 여기서 각각 메뉴 하나의 배경은 처리할 수 있습니다만
전체 한 줄을 가득 메우는 배경은 위에 2번에서 말했다시피 #header에서 처리하거나
관리자 설정에서 배경그림 부분에서 설정해주어야 합니다.
(방법이 아주 없지는 않겠습니다만 일반적으로 이렇습니다. 그러니 이를 주의하여 배경을 #header에서 처리하십시오.)
6. 이제 상단 레이아웃 디자인은 이렇게 수정이 가능하니 이 것으로 마치고,
나머지 회원정보 부분, 하위메뉴, 본문 스타일시트 가 남아있는데
이는 이 정도면 CSS 파일을 보면서 수정하면 될 듯 합니다.
수정은 default.css 파일을 이용하여 수정합니다.
(기본적인 레이아웃 수정은 css 파일 수정만으로 변경할 수 있습니다.)
1. 본문 기본 정렬
기본 센터 정렬입니다.
왼쪽편에 붙이고자 하시면
default.css 파일 11번째 줄 ,
#bodyWrap { position:absolute; width: 980px; margin:0 auto; padding:0 0 0 0;}
position : absolute 로 고칩니다.
※ 기타 참고
width : 넓이
margin : 마진값
padding : 여백 (상 우 하 좌 순서, 순서는 마진값도 동일함)
2. 윗쪽 메뉴, 로고 부분의 높이 조정하기
14번째 줄,
#header { width:980px; height:60px; background:url() no-repeat right top; margin-bottom:10px; z-index:99;}
height : 120px 가 기본입니다. 알맞게 수정하세요. 저는 보시다시피 60px로 고쳤습니다.
여기서 넓이, 배경그림, 배경그림 위치, 여백 등을 수정할 수 있습니다.
※ 주의하실 점은 여기서 height 값은 윗쪽 메뉴 부분의 높이까지 포함하는 높이이므로
'로고 + 메뉴 높이' 까지 생각하셔서 수정하십시오.
※ 배경그림 역시 마찬가지입니다. 상위 메뉴 부분의 배경은 따로 처리하는 레이어가 없으므로,
#header 에서 메뉴 부분의 배경까지 처리할 수 있도록 상위 메뉴 부분의 높이까지 고려하여
배경그림을 만들어서 삽입하십시오.
※ 관리자 레이아웃 설정에서도 배경그림을 삽입할 수 있습니다.
이 때 설정한 배경그림은 가장 밑 바닥에 깔리고
css에서 설정한 배경그림이 그 위에 우선하게 됩니다.
이를 주의하여 배경을 처리해야할 것입니다.
3. 로고 위치 조정하기
15번째 줄,
#header h1 { position:absolute; top:0px; left:25px;}
top, left 값을 이용하여 수정할 수 있습니다.
4. 전체검색 및 언어 변경 부분 수정하기
4-1 언어 변경 레이어
언어 변경 레이어의 이름은 #language 입니다.
필요하신 분은 이 값을 찾아서 수정하면 됩니다.
#header 바로 아래 16번째 줄 부터입니다.
그런데 보통은 언어 변경 부분이 필요없으므로
저는 보이지 않게 설정하였습니다.
#language { position:absolute; top:18px; right:19px; z-index:100; display : none;}
display : none 만 추가하면 됩니다.
(visibility : hidden; 해도 됩니다. )
4-2. 전체 검색 폼 위치 수정하기
검색 폼의 이름은 #isSearch 입니다.
(첨에 #language 아래 24번째 줄에 있는 #it_search_form 인 줄 알고 혼동을 좀 했습니다. 저 같은 착각 하지 마시길 ^^; )
#isSearch { position:absolute; top:35px; right:15px; width:214px; text-align:right;}
저는 top: 48px 를 35px 정도로 수정했습니다.
사용자 입맛에 맞게 다른 부분을 수정하시면 됩니다.
ps. #it_search_form 은 뭔지 모르겠군요. -_-;
5. 상위 메뉴 위치 등 수정하기
현재 제로보드 사이트에서 HOME 제로보드XE 제로보드4 .. 이 부분입니다.
레이어명은 #gnb 입니다.
#gnb { position:absolute; top:60px; left:0; height:30px; overflow:hidden; white-space:nowrap; margin-bottom:10px;background:#000;}
원하시는 입맛에 맞게 위치 및 색상을 수정하면 됩니다.
#gnb li a { display:block; float:left; padding:8px 15px 0 15px; height:25px; color:#e8e8e8; white-space:nowrap; text-decoration:none; font-family:"Arial", "Verdana", "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;font-size:11px;}
메뉴 부분의 색상이나 크기 등의 스타일시트는 이 항목에서 수정하면 됩니다.
※ 다시 주의할 점, 여기서 각각 메뉴 하나의 배경은 처리할 수 있습니다만
전체 한 줄을 가득 메우는 배경은 위에 2번에서 말했다시피 #header에서 처리하거나
관리자 설정에서 배경그림 부분에서 설정해주어야 합니다.
(방법이 아주 없지는 않겠습니다만 일반적으로 이렇습니다. 그러니 이를 주의하여 배경을 #header에서 처리하십시오.)
6. 이제 상단 레이아웃 디자인은 이렇게 수정이 가능하니 이 것으로 마치고,
나머지 회원정보 부분, 하위메뉴, 본문 스타일시트 가 남아있는데
이는 이 정도면 CSS 파일을 보면서 수정하면 될 듯 합니다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 | 추천 수 |
---|---|---|---|---|---|
공지 | 홈페이지 사용법 | 갈매빛 / 崠駐 | 2009.05.01 | 29314 | 0 |
217 | 홈페이지 개선작업 | 갈매빛 / 崠駐 | 2007.09.01 | 9948 | 137 |
216 |
2007년 사진전
![]() | 갈매빛 / 崠駐 | 2007.02.01 | 10373 | 116 |
215 | 홈페이지 일부 수정 | 갈매빛 / 崠駐 | 2008.05.01 | 10326 | 109 |
214 | 사진전 합니다.!!!! | 갈매빛 / 崠駐 | 2006.04.01 | 10197 | 109 |
213 |
야생화클럽사진전
![]() | 갈매빛 / 崠駐 | 2007.11.01 | 15372 | 100 |
212 | 홈페이지 운영방안 | 갈매빛 / 崠駐 | 2006.01.01 | 11244 | 95 |
211 | 홈페이지에 에디트 기능 추가 | 갈매빛 / 崠駐 | 2008.07.01 | 9816 | 93 |
210 | ND필터의 용도 | 갈매빛 / 崠駐 | 2008.04.01 | 16191 | 88 |
209 |
전주 오모가리탕
[1] ![]() | 갈매빛 / 崠駐 | 2008.04.01 | 17405 | 80 |
208 | Raw파일과 라이트룸 이미지 색공간에 따른 색감 변화 | 갈매빛 / 崠駐 | 2008.07.01 | 18158 | 76 |
207 |
신문기사
![]() | 갈매빛 / 崠駐 | 2008.04.01 | 15304 | 66 |
206 | KR 사진전 준비 | 갈매빛 / 崠駐 | 2007.11.01 | 14493 | 63 |
205 | 1차도메인 변경 | 갈매빛 / 崠駐 | 2008.09.01 | 10273 | 58 |
204 | 야생화클럽 [1] | 갈매빛 / 崠駐 | 2006.01.01 | 17200 | 51 |
203 | 아이프레임 높이 자동으로 늘어나는 자바 스크립트 | 갈매빛 / 崠駐 | 2007.10.01 | 16228 | 48 |
202 | 새롭게 마련한 홈피개설 축하! [1] | 박동구 | 2006.04.01 | 10736 | 46 |
201 | ^^* ~ 홈피 구경 잘 하고 갑뉘다~* | skynote(진식) | 2007.10.01 | 14499 | 46 |
200 | 지난주에 가족이 멀리 갔나봐여 | 윤채무 | 2006.04.01 | 10549 | 43 |
199 | 잠시 쉬었다 갑니다. | 박찬억 | 2007.10.01 | 14451 | 42 |
198 |
두바이에 잘 다녀왔습니다.
[1] ![]() | 윤채무 | 2006.05.01 | 10580 | 41 |