티스토리 뷰
<div id=divLayout style=" ">
내용
</div>
### 설명 ###
● STYLE
position : absolute | relative
- absolute ( 절대적 위치 ) : 브라우저를 기준으로 위치를 지정 / z-index ( top | left | right | bottom )
- relative ( 상대적 위치) : 객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상태값을 정함
ex )
position : absolute;
top : 0px;
left : 0px;
============================================================================================
■ HTML 가운데 정렬하기
● STYLE
body { margin : 0px; }
#frameMain {
position : absolute;
overflow : hidden;
top : 50%;
left : 50%;
width : 1024px; margin-left : -512px; /* 가로길이에서 반 만큼 왼쪽으로 빼준다 */
height : 800px; margin-top : 400px; /* 세로길이에서 반 만큼 위쪽으로 빼준다 */
}
<div id="frameMain">웹표준 중앙정렬???</div>
============================================================================================
■ DIV 로 높이 100% 만들기
참고 : http://blog.naver.com/sudatown?Redirect=Log&logNo=130071916467
표현하고싶은 형태
http://postfiles4.naver.net/20110812_51/minineko_1313109341249SmLvt_GIF/div_height100_img_sudatown.gif?type=w2
상단의 Header 부분은 height 가 100px 로 고정사이즈이고
하단의 Contents 부분은 상단 Header 의 100px 만큼을 제외한 나머지 전체 사이즈를 갖는다.
<html>
<head>
<style type="text/css">
html,body { height:100%; margin:0; padding:0; }
#header { position:relative; height:100px; background-color:#CCCCCC; }
#contents { min-height:100%; background-color:#EBEBEB; }
*html #contents { height:100%; margin:-100px 0 0 0; }
#box { padding:100px 0 0 0; }
</style>
</head>
<body>
<div id="header"></div>
<div id="contents">
<div id="box">내용</div>
</div>
</body>
</html>
● 설명
html,body { height:100%; margin:0; padding:0; }
: div 의 height 의 100% 는 부모 height 값의 영향을 받는다.
-> div 겉에는 항상 html 와 body 태그가 있기 때문에 html,body 에 height 를 100% 으로 주었다.
#header { position:relative; height:100px; background-color:#CCCCCC; }
: position 은 relative 로 ~
-> 상단 Header 부분의 position 은 반드시 relative 여야 한다.
#contents { min-height:100%; background-color:#EBEBEB; }
*html #contents { height:100%; margin:-100px 0 0 0; }
: min-height 는 익스플로러에서 적용되지 않는다.
-> 최소 높이 ( min-height ) 를 100% 로 주었고, 익스플로러에서 min-height 가 적용되지 않기 때문에 *html 라인처럼 핵을 써서 height 를 100% 로 주었다.
div 에 height 를 100% 로 주면 화면에 보이는 부분이 100% 가 되는 것이 아니라 모니터 해상도의 height 사이즈가 100% 가 된다. 그래서 height 를 100% 로만 주게 되면 Header 부분에서 height 를 100px 로 주었기 때문에 Header 와 Contents 의 총 높이 사이즈는 100% ( 모니터의 height 사이즈 ) + 100px 이 된다. 그래서 스크롤바가 생기게 된다. 스크롤바는 화면의 내용이 넘어갈 때만 생겨야 하기 때문에 Contents 부분의 height 를 화면에 보이는 부분에서 Header 의 height 를 뺀만큼만 갖게 하기 위해 margin 의 상단 부분에 -100px 값을 주었다. 이러면 Contents 는 위로 100px 만큼 올라가게 된다.
#box { padding:100px 0 0 0; }
-> Contents 를 상단으로 100px 만큼 올려서 Header 부분에 가려졌기 때문에 Contents 안에 Box 라는 div 를 하나더 만들어서 상단의 padding 값에 100px 을 주었다. 그러면 원래 위치에 내용이 보이게 된다.
'Language > HTML' 카테고리의 다른 글
| [ HTML ] TEXTAREA (0) | 2016.01.02 |
|---|---|
| [ HTML ] TD 글자 위치 이동 (0) | 2016.01.02 |
| [ HTML ] div - text-overflow (0) | 2016.01.02 |
| [ HTML ] 부드러운 페이지 이동 - Explorer 에서만 가능 (0) | 2016.01.02 |
| [ HTML ] 배경화면 바둑판 처럼 반복 하지 않기 (0) | 2016.01.02 |