이전
목록
다음
a

날나리 강좌. ㅋ 레이아웃 짜기 footer 밑에 놓기

aequum
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-01-02 (월) 16:08:18 · 3935 · 4
김군 왈, "자~ 그럼 이제 밑에 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 없이도 가능하겠고.. 그러하겠지? "

김군 왈, " 아하...  역시.. . 그렇군" 

< 예제 결과 : 폭은 다시 조절하였음.  > 
6677815989_b835f01f1c_z.jpg

----- 다음 시간에 이어.. 휘리리릭~
#퍼블리셔팁 #퍼블리셔 #팁자료실 #html
|

댓글 4개

박박가
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-01-06 (금) 11:10:25
강좌감사합니다! 잘따라한것같은데 안되네요 ㅜ.ㅜ 제꺼 소스는..뭐가문제인지봐주세요..
<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;
}
aaequum
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-01-06 (금) 13:01:16
html {height:100%} 있어야 해용 ^.^

height %는 부모의 값이 있어야 이를 가지고 자신의 height를 계산
박박가
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-01-06 (금) 13:23:06
답변감사합니다! ^^
그런데 하단으로 내려가긴 했는데 스크롤을 올리면 같이 올라가네요 ㅜ.ㅜ..
aaequum
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-01-06 (금) 15:18:21
#wrapper에 min-height가 제대로 적용되지 못해서 그래요

min-height:100%;
height:auto;

를

min-height:100%;
height:auto !important;

와 같이 !important를 붙여야 해요. :)

---
이러한 min-height 처리, ie6 적용 관련 설명은 앞강좌에 나와 있어용.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-01-22 조회 3,522
12-01-21 조회 2,799
12-01-19 조회 4,816
12-01-18 조회 2,821
12-01-18 조회 2,790
12-01-18 조회 2,998
12-01-17 조회 2,772
12-01-17 조회 3,014
12-01-14 조회 1.1만
12-01-14 조회 3,573
12-01-14 조회 3,891
12-01-11 조회 3,241
12-01-11 조회 3,077
12-01-11 조회 3,073
12-01-11 조회 3,097
12-01-11 조회 3,410
12-01-11 조회 2,669
12-01-10 조회 3,021
12-01-10 조회 2,808
12-01-10 조회 2,810
12-01-09 조회 2,802
12-01-08 조회 2,846
12-01-07 조회 2,781
12-01-06 조회 2,644
12-01-06 조회 2,763
12-01-05 조회 2,764
12-01-02 조회 2,917
11-12-29 조회 2,826
11-12-28 조회 2,824
11-12-28 조회 2,791
11-12-27 조회 2,996
11-12-23 조회 2,732
11-12-23 조회 2,762
11-12-21 조회 3,869
11-12-21 조회 2,908
11-12-19 조회 2,810
11-12-14 조회 4,169
11-12-08 조회 3,276
11-12-08 조회 4,042
11-12-07 조회 4,326
11-12-06 조회 4,228
11-12-06 조회 3,583
11-12-05 조회 3,218
11-12-05 조회 4,834
11-12-04 조회 3,163
11-12-03 조회 3,539
11-12-02 조회 3,368
11-12-02 조회 3,457
11-12-02 조회 2,790
11-12-01 조회 2,755
11-12-01 조회 3,656
11-12-01 조회 2,742
11-11-29 조회 5,633
11-11-23 조회 3,567
11-11-23 조회 3,908
11-11-22 조회 3,884
11-11-22 조회 2,947
11-11-21 조회 3,489
11-11-21 조회 2,773
11-11-18 조회 3,870
11-11-18 조회 3,043
11-11-17 조회 2,937
11-11-17 조회 2,937
11-11-17 조회 4,506
11-11-11 조회 2,803
11-11-11 조회 2,803
11-11-11 조회 3,937
11-11-11 조회 4,642
11-11-08 조회 2,911
11-11-06 조회 3,356
11-11-06 조회 3,648
11-10-21 조회 2,454
11-10-21 조회 2,359
11-10-19 조회 2,409
11-10-19 조회 3,913
11-10-08 조회 2,464
11-10-06 조회 4,145
11-10-01 조회 2,489
11-09-30 조회 2,545
11-09-29 조회 2,544
11-09-26 조회 2,401
11-09-23 조회 2,398
11-09-23 조회 2,173
11-09-22 조회 2,760
11-09-09 조회 3,042
11-08-30 조회 3,934
11-08-23 조회 2,185
11-08-12 조회 2,361
11-08-04 조회 3,951
11-07-01 조회 2,920
11-06-09 조회 2,562
11-05-17 조회 2,668
11-05-07 조회 2,942
11-04-21 조회 2,608
11-04-12 조회 2,473
11-04-11 조회 3,569
11-02-11 조회 2,700
11-02-08 조회 2,156
11-01-11 조회 2,526
10-11-26 조회 3,890
글쓰기