김군 왈, "자~ 그럼 이제 밑에 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;
}
<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;
}
게시글 목록
| 번호 | 제목 |
|---|---|
| 12357 | |
| 12356 |
MySQL
MySQL php함수 정리 입니다.
|
| 12355 |
MySQL
MySQL php오류 정리 입니다.
|
| 12354 |
MySQL
연산자 관련함수 정리 입니다.
|
| 12353 |
JavaScript
폼 유효성검사해주는 자바스트립트 라이브러리
|
| 20387 | |
| 12352 |
MySQL
수학 관련함수 정리 입니다.
|
| 12351 |
MySQL
문자열 관련함수 정리 입니다.
|
| 12350 |
MySQL
날짜 관련 함수 정리 입니다.
|
| 12349 | |
| 12348 |
jQuery
Ajax 화면 전환 시 애니메이션 효과
|
| 12347 |
MySQL
Query의 기본사용 정리 입니다.
|
| 12346 | |
| 12345 |
MySQL
콘솔 기본명령어 정리 입니다
|
| 12344 |
PHP
암호화 SHA-256
|
| 12343 |
MySQL
mysql 인덱싱 하는 방법 입니다.
|
| 12342 |
MySQL
MySQL 덤프방법(dump) 입니다.
|
| 12341 |
MySQL
여러데이터베이스 사용하는 방법 입니다.
|
| 12340 |
PHP
이미지에 글자쓰기
|
| 12339 |
MySQL
백업&복구(전체/부분/테이블) 하기 입니다.
|
| 12338 |
MySQL
db sql문 정리 입니다.
|
| 12337 | |
| 12336 |
JavaScript
라디오버튼, 체크박스 테두리 없애기 입니다.
|
| 12335 |
JavaScript
현재 페이지 저장하기 입니다.
|
| 12334 |
JavaScript
프린트 출력 자바스크립트 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기