날나리 강좌. ㅋ 레이아웃 짜기 footer 밑에 놓기
김군 왈, "자~ 그럼 이제 밑에 footer를 항시 착착 붙어있게 해줘, 머 position 만지면 되는 것 아니야?"
A군 왈, "일단 네가 원해서 하긴 하고 있지만, 또한 공부할 겸 몇개 익히는 것이지. 여러가지 하려는 것이 오히려 촌스럽고 사람들이 보기에 좀 어색한 경우가 많아. 일단 이제는 제대로 지난번에 한 것 까지 모두 합쳐서 하나로 만들어봐"
<!doctype html>
<head>
<style>
html, body {height:100%}
body {margin:0}
#wrapper {
width:960px;
margin: 0 auto;
min-height:100%;
height:auto !important;
height:100%;
}
#header {
height:200px;
}
#footer {
height:200px;
}
#content {
}
</style>
<body>
<div id="wrapper">
<div id="header"> HEADER </div>
<div id="content"> CONTENT </div>
<div id="footer"> FOOTER </div>
</div>
</body>
</html>
A군 왈, " 이젠 position 프로퍼티를 이해가 필요해. position은 absolute와 relative, static, fixed의 값을 갖을 수 있는데 이중에서 absolute만을 다룰께, 좀더 설명이 필요한데 일단은 필요한 범위내에서만 다루마.
position과 relative의 큰 차이는 사용되는 좌표계의 방식이야. relative는 본래 자신의 위치를 그대로 차지한듯 내버려둔채 해당 위치에서 이동이며, absolute는 상위의 부모 요소를 대상으로 죄표계로 이용해. 이때 부모가 좌표계가 될려면 자신의 position이 static이 아닌 다른 값일때 기준으로 작동하지만, 이러한 부모가 하나도 없으면 문서 전체를 대상으로 좌표계가 작동해.
또한 absolute로 설정하면 좌우로 꽉채우려는 블록적 속성을 잃고 이때 만일 width 값이 auto이면 0인것처럼 처리를 해. 0일때 작동은 내부 컨텐트의 단어 하나 정도, 다른 내부 요소의 크기의 width를 갖는 것이 법칙이나 이러한 경우로 염두하고 width를 이용하지 않고 대부분 absolute를 사용하면 width의 값을 직접 설정하기 마련이야.
마지막으로 absolute는 마진의 병합이 발생하지 않는 예외적인 부분이고, 이러한 예외는 최상의 요소 다시 말해 <HTML> 요소와 <BODY> 간에 있는 점도 일단 나온 김에 예외 2가지를 알아두자. 몰라도 나중에 설명할 때가 있으니까. 일단 암기 강요. ㅎ
그리고 absolute를 사용할 경우, 반드시 어떠한 부모를 좌표계를 쓸 것인지를 염두해 둬야 해. 문서 전체를 좌표계로 쓰고 싶지 않다면, 해당 부모를 찾아가 position 속성을 relative, absolute, fixed에서 하나를 설정해야 돼. 대게 기준이 되는 부모가 자신의 위치를 변경하고 싶지 않기에 이때는 relative로만 쓰면 돼... "
김군 왈, "오... 몬가 깨달음이 온 듯한데.. 한번 만들어 볼께"
<!doctype html>
<head>
<style>
html, body {height:100%}
body, html {padding:0;margin:0}
#wrapper {
width:960px;
margin: 0 auto;
min-height:100%;
height:auto !important;
height:100%;
background:yellow;
position: relative; /* footer 좌표계 기준임 */
}
#header {
height:100px;
background:green;
}
#content {
}
#footer {
position:absolute;
bottom:0;
height:100px;
background:red;
width:100%;
}
</style>
<body>
<div id="wrapper">
<div id="header"> HEADER </div>
<div id="content"> CONTENT </div>
<div id="footer"> FOOTER </div>
</div>
</body>
</html>
A군 왈, "얼~ 잘했다. 마치 무슨 콩고 국기 누워 놓인 것 같다. ㅎㅎㅎ 수고했다. 안녕..빠빠 ㅋㅋㅋ"
김군 왈, "저기... 갑자기 왜 갈려 하지.. 또 모가 있나.. 기달려봐... 역시나 이거 footer가 viewport가 작아지면 위로 올라오잖아.. 이상해. 안돼 이렇게 못써... "
A군 왈, "나.. 갈래.."
김군 왈, "또 가? 또 삐져어?....어려운거야? "
A군 왈, "아니... 왠지 그냥 한번 해보고 싶었어.. 재미있네.. ㅎ.ㅎ"
김군 왈, " ㅡ.ㅡ; 가르쳐줘"
A군 왈, "아니.. 그건 어렵지 않은 것인데... 일단 생각 좀 해봐... FOOTER 부분이 위치 할 공간이 position이 absolute이니까 따로 정해진 영역이 없으니까 Content 영역 위로 올라가는 것이지. 그럼 어떻게 할까? "
김군 왈, "그럼 content영역에 아래 padding을 footer 크기 만큼 주면 되겠네.. 기달려봐. 가지마.. 흐흐"
<!doctype html>
<head>
<style>
html, body {height:100%}
body, html {padding:0;margin:0}
#wrapper {
width:960px;
margin: 0 auto;
min-height:100%;
height:auto !important;
height:100%;
background:yellow;
position: relative; /* footer 좌표계 기준임 */
}
#header {
height:100px;
background:green;
}
#content {
padding-bottom: 100px; /* footer 영역 위치할 여백 공간임 */ }
#footer {
position:absolute;
bottom:0;
height:100px;
background:red;
width:100%;
}
</style>
<body>
<div id="wrapper">
<div id="header"> HEADER </div>
<div id="content"> CONTENT </div>
<div id="footer"> FOOTER </div>
</div>
</body>
</html>
A군 왈, "얼 수고했어. ㅎㅎ 그런데 꼭 방법이 정해진 것이 아니야. 연구해보면 여러가지 방법이 나올 수도 있겠지? 가령 wrapper 없이 content 영역의 min-height를 100%로 잡고 header와 footer의 크기 만큼 위, 아래 음수 마진을 쓰면 position 없이도 가능하겠고.. 그러하겠지? "
김군 왈, " 아하... 역시.. . 그렇군"
< 예제 결과 : 폭은 다시 조절하였음. >
----- 다음 시간에 이어.. 휘리리릭~
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 4개
<wrapper>
<header>
<content>
<footer>
</wrapper> 이런 단순한구조입니다 ㅜ.ㅜ
----------------css----------------------------------
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height:100%;
margin:0;
}
#wrapper {
margin: 0 auto;
width: 1000px;
position:relative;
min-height:100%;
height:auto;
height:100%;
}
#header {
width: 1000px;
color: #3b3b3b;
height: 85px;
background:url(topbg.jpg)
}
#content {
width: 1000px;
color: #fff;
background: #3c3c3c;
padding:10px 0px 40px 0px;
}
#footer {
background: #3b3b3b;
overflow: hidden;
position: absolute;
bottom: 0;
height: 40px; width:100%; text-align: center;
margin-left:0px; margin-bottom:-1px;
}
#box {
bgcolor:#fff;
padding:10px 0px 0px 0px;
}
#link {
width:140px;
height:50px;
float:right;
}
height %는 부모의 값이 있어야 이를 가지고 자신의 height를 계산
그런데 하단으로 내려가긴 했는데 스크롤을 올리면 같이 올라가네요 ㅜ.ㅜ..
min-height:100%;
height:auto;
를
min-height:100%;
height:auto !important;
와 같이 !important를 붙여야 해요. :)
---
이러한 min-height 처리, ie6 적용 관련 설명은 앞강좌에 나와 있어용.