그누보드

[HTML][CSS][그누보드]그누보드에서 새로운 층 생성

개발하자구 2023. 2. 8. 09:18

그누보드는 기본적으로 hd, wrapper, ft 층이 있다.

 

근데 새로운 층을 누구라도 만들 수 있다.

그렇게 층을 생성해야 css 적용하기 편하고, 홈페이지 만들기 편하다.

일단 banner층이라는 층을 hd층과 wrapper층 사이에 삽입한다.

 

<div id="hd"> </div> 밖으로 벗어나서 새로운 층인 <div id="banner"> </div>층을 만든다.

 

 

 

그리고 나서 default.css에서

/* 레이아웃 크기 지정 */ 안에 #banner_wrapper를 추가해 주고,

 

/* 상단 레이아웃 */안에 #banner_wrapper {margin:0 auto;zoom:1}를 주면 1200px만큼 가운데 정렬이 된다.

 

 

 

 

추가설명)

 

1. width100%인 층을 만들기 위해 div에 아이디를 생성

 

div로 아이디를 준 것을

/* 레이아웃 크기 지정 */

에 추가한다. 이유는 페이지를 줄였을 때 최소 폭이 1200px을 유지하게하기 위해.

 

 

ex)

/* 레이아웃 크기 지정 */

#hd, #wrapper, #ft, #banner, #img-banner {min-width:1200px}

 

 

2. 1200pxdiv를 만들기 위해 하위 div를 생성

그리고 default.css에 가서 방금 생성한 것에 여러 설정함

 

여기 옵션에서 가장 중요한건 {width:1200px; margin: 0 auto;}

위의 옵션이 없으면 가운데 정렬 안됨

 

예를들어

.img-wr {width:1200px; margin:0 auto; padding: 0px; margin:0px;}