조회 수 5000 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
기본 레이아웃 스킨을 이용해서 사용자 편의에 맞게 수정합니다.
수정은 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 파일을 보면서 수정하면 될 듯 합니다.

List of Articles
번호 제목 글쓴이 날짜 조회 수 추천 수
공지 홈페이지 사용법 file 갈매빛 / 崠駐 2009.05.01 29421 0
101 도감의 긴다람쥐꼬리 종속명 오자 수정 국가표준식물목록 위원회의 오자 수정에 따라 도감 수정 긴다람쥐꼬리의 Lycopodium integrifolium: 종소명 오자 수정intergrifolium -> integrifolium 갈매빛 / 崠駐 2012.05.11 6987 0
100 노트북 수리 file 갈매빛 / 崠駐 2013.03.13 7005 0
99 안녕하세요?^^ 제가 누구게~요~~ 헤헤 휴대폰으로 글을 써요... 컴보다 글자가 한박자 늦게 보여요 저희집 개들은 잘크고 있어요... 저는 목이 아프고 다리도 안좋아서 병원와서 쉬어요...후미추... 3 산과나무 2013.04.21 7034 0
98 홈페이지 업그레이드 중 홈페이지 엔진 업그레이드 중입니다. 현재 호환성등 수정중입니다. 갈매빛 / 崠駐 2011.10.07 7151 0
97 식물도감(Flora of Korea) 사진자료 일괄처리 식물도감(Flora of Korea)의 이미지를 갤러리에 등록 되면 연동 되도록 함 1. 갤러리에 사진이 등록 되면 도감의 같은 식물명 이미지부분에 표출하고 클릭시 새창... 4 갈매빛 / 崠駐 2013.02.16 7155 0
96 산개고사리(Athyrium vidalii (Franch. & Sav.) Nakai) 학명. 속명 변경 도감의 산개고사리(Athyrium vidalii (Franch. & Sav.) Nakai)의 학명 및 속명을 아래와 같이 수정 Asplenium vidalii (Franch. & Sav.) Naka 에서 Athyr... 갈매빛 / 崠駐 2012.03.19 7282 0
95 Community 메인페이지 추가 정회원 메뉴인 Community 메인페이지를 새로 추가했습니다. Community 메뉴를 바로 클릭하여 사용하시면 됩니다. 갈매빛 / 崠駐 2011.06.29 7347 0
94 홈피 sgphoto.co.kr photoman 11474 갈매빛 / 崠駐 2006.09.01 7488 0
93 2개 도메인 사용 아시는 분들은 아시겠지만 제 홈페이지에 접속하실때 도메인이 2개를 사용하여 적속하실 수 있습니다. 전에 3개를 사용하였으나 1개는 폐쇄조치하고 2개로 사용합... 갈매빛 / 崠駐 2011.07.26 7501 0
92 확장변수에 html 사용하기 /xe/classes/extravar/Extravar.class.php 126번째 라인부터 다음과 같이 수정합니다. //case '+ 'date' : //case 'email_address' : //case 'text' : default : ... 갈매빛 / 崠駐 2011.02.12 7516 0
91 XE 1.5 → XE1.4로 다운그레이드 설정 file 갈매빛 / 崠駐 2011.10.10 7753 0
90 불만은 세상을 바꾼다 불만은 세상을 바꾼다. 걸어 다니기 싫어하는 사람들이 자동차를 만들고 땅으로만 다니는 것이 답답한 사람들이 창공을 나는 비행기를 만들었다. 높은데 걸어 오... 갈매빛 / 崠駐 2009.10.01 7799 0
89 네임서버 설치 1차네임서버 와 2차 네임서버 설치 galphoto.co.kr 도메인 추가 등록 galy.kr 회원테스트용 홈페이지 셋팅 670.galy.kr 갈매빛 / 崠駐 2009.04.01 7834 0
88 장애 복구 알림 3월26일 ~3월27일 09시까지 서버의 장애로 인한 홈페이지가 열리지 않았습니다. 서버장애는 복구 완료하고 정상화 되었습니다. 갈매빛 / 崠駐 2011.03.29 7926 0
87 비전을 가지라는 말은 공부하라는 말과 같다 비전을 가지라는 말은 공부하라는 말과 같다'리더는 비전을 가져야 한다'는 말을 많이 한다. 나는 비전을 가지라는 말은 공부하라는 말을 더 그럴싸하게 표현해 ... 갈매빛 / 崠駐 2009.10.01 7947 0
86 Homepage Renewal file 갈매빛 / 崠駐 2011.02.20 7986 0
85 홈페이지 업그레이드 코어 업그레이드 (XE_1.4.5.2) 각게시판 업그레이드 에드온, 위젯 업그레이드 웹도감 업그레이드 기타 관련 코드 수정 업그레이드 후 속도향상이 되었습니다. 갈매빛 / 崠駐 2011.04.08 8029 0
84 웹식물도감 오픈 file 갈매빛 / 崠駐 2011.01.08 8322 0
83 비움은 새로운 가치를 끌어들인다 비움은 새로운 가치를 끌어들인다잡동사니를 처분하게 되면 기분이 좋아진다. 처분한 만큼 새로운 공간이 마련된다. 그 공간으로 새로운 가치나 물건 새로운 에너... 갈매빛 / 崠駐 2009.10.01 8333 0
82 홈페이지 사진을 올릴때... 홈페이지에 사진은 가입하신분은 자유롭게 올릴 수 있습니다. 단, 홈페이지의 최적화는 가로 길이 1200 픽셀 이상로 되어 있습니다. 올릴실 사진은 1200픽셀 이상... 갈매빛 / 崠駐 2011.04.13 8416 0
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 12 Next
/ 12