이전
목록
다음
a

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

aequum
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-01-02 (월) 16:08:18 · 4031 · 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;
}
aequum
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-01-06 (금) 13:01:16
html {height:100%} 있어야 해용 ^.^

height %는 부모의 값이 있어야 이를 가지고 자신의 height를 계산
박가
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-01-06 (금) 13:23:06
답변감사합니다! ^^
그런데 하단으로 내려가긴 했는데 스크롤을 올리면 같이 올라가네요 ㅜ.ㅜ..
aequum
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 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-08 조회 3,017
12-01-07 조회 3,626
12-01-07 조회 3,084
12-01-07 조회 2,997
12-01-07 조회 2,967
12-01-07 조회 5,206
12-01-06 조회 2,734
12-01-06 조회 3,454
12-01-06 조회 2,954
12-01-06 조회 2,899
12-01-06 조회 2,906
12-01-06 조회 5,615
12-01-06 조회 3,644
12-01-06 조회 2,859
12-01-06 조회 2,974
12-01-05 조회 3,037
12-01-05 조회 3,056
12-01-05 조회 2,767
12-01-05 조회 2,849
12-01-05 조회 3,507
12-01-05 조회 5,349
12-01-04 조회 3,785
12-01-04 조회 2,801
12-01-04 조회 2,755
12-01-04 조회 2,962
12-01-04 조회 2,800
12-01-04 조회 2,891
12-01-04 조회 3,030
12-01-04 조회 2,791
12-01-04 조회 5,210
12-01-04 조회 5,084
12-01-04 조회 2,940
12-01-04 조회 3,392
12-01-04 조회 3,074
12-01-04 조회 2,886
12-01-04 조회 5,398
12-01-04 조회 4,566
12-01-04 조회 4,046
12-01-04 조회 3,908
12-01-04 조회 2,739
12-01-03 조회 3,625
12-01-03 조회 2,609
12-01-03 조회 2,640
12-01-03 조회 2,637
12-01-02 조회 3,132
12-01-02 조회 3,183
12-01-02 조회 4,032
12-01-02 조회 3,000
12-01-02 조회 3,211
12-01-02 조회 3,493
12-01-02 조회 3,485
12-01-01 조회 2,698
12-01-01 조회 4,157
12-01-01 조회 3,121
12-01-01 조회 3,500
11-12-31 조회 3,433
11-12-31 조회 3,766
11-12-31 조회 3,865
11-12-31 조회 3,116
11-12-31 조회 3,274
11-12-31 조회 3,688
11-12-30 조회 3,944
11-12-30 조회 3,239
11-12-30 조회 3,282
11-12-30 조회 3,931
11-12-30 조회 5,120
11-12-30 조회 4,216
11-12-30 조회 4,383
11-12-30 조회 3,836
11-12-30 조회 3,565
11-12-30 조회 3,584
11-12-30 조회 3,437
11-12-30 조회 2,632
11-12-30 조회 3,798
11-12-30 조회 7,076
11-12-29 조회 3,649
11-12-29 조회 3,321
11-12-29 조회 2,991
11-12-29 조회 3,195
11-12-29 조회 3,069
11-12-28 조회 2,684
11-12-28 조회 2,829
11-12-28 조회 2,959
11-12-28 조회 2,876
11-12-28 조회 3,738
11-12-27 조회 3,093
11-12-27 조회 2,858
11-12-27 조회 2,757
11-12-27 조회 2,888
11-12-26 조회 3,214
11-12-26 조회 3,117
11-12-26 조회 3,698
11-12-26 조회 3,316
11-12-26 조회 5,873
11-12-25 조회 3,039
11-12-23 조회 3,585
11-12-23 조회 3,536
11-12-23 조회 5,122
11-12-23 조회 4,770
11-12-23 조회 2,838
글쓰기