KCP API결제 버전 배포 - exec() 불가 환경 대응KCP exec() 불가 대응 버전 배포
이전
목록
다음
a

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

aequum
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-01-02 (월) 16:08:18 · 4011 · 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-08-29 조회 4,142
12-08-07 조회 3,807
12-08-03 조회 3,629
12-07-31 조회 3,731
12-07-30 조회 3,680
12-07-16 조회 3,887
12-07-15 조회 3,718
12-07-07 조회 3,571
12-07-06 조회 3,778
12-07-03 조회 3,742
12-06-29 조회 3,346
12-06-22 조회 3,725
12-06-17 조회 3,979
12-05-21 조회 3,903
12-05-02 조회 3,436
12-05-02 조회 4,234
12-05-02 조회 3,352
12-04-30 조회 3,543
12-04-30 조회 3,227
12-03-17 조회 4,091
12-03-10 조회 3,425
12-03-08 조회 3,950
12-03-03 조회 3,659
12-02-27 조회 5,072
12-02-17 조회 4,373
12-02-16 조회 4,641
12-02-03 조회 3,325
12-01-31 조회 3,229
12-01-24 조회 3,222
12-01-17 조회 3,928
12-01-05 조회 3,470
11-12-30 조회 3,203
11-12-23 조회 4,764
11-12-08 조회 3,519
11-12-07 조회 4,491
11-11-27 조회 3,907
11-11-25 조회 4,235
11-11-23 조회 3,682
11-11-22 조회 3,550
11-11-09 조회 3,253
11-10-23 조회 3,183
11-10-19 조회 3,141
11-10-08 조회 2,834
11-10-04 조회 2,833
11-10-04 조회 5,285
11-09-01 조회 4,360
11-08-13 조회 2,546
11-08-06 조회 3,223
11-07-11 조회 3,614
11-06-27 조회 2,987
11-06-21 조회 2,649
11-06-13 조회 2,453
11-06-07 조회 2,461
11-05-26 조회 2,424
11-04-20 조회 2,753
11-03-21 조회 2,846
11-03-18 조회 2,540
11-03-11 조회 2,559
11-02-07 조회 2,385
11-01-18 조회 2,714
11-01-12 조회 2,429
11-01-06 조회 2,527
10-12-10 조회 2,782
10-12-09 조회 2,635
10-12-08 조회 5,068
10-11-29 조회 2,906
10-11-28 조회 2,808
10-11-28 조회 2,650
10-11-19 조회 2,834
10-11-04 조회 2,711
10-10-21 조회 2,436
10-10-19 조회 3,393
10-10-12 조회 2,715
10-10-07 조회 2,547
10-09-30 조회 3,505
10-09-17 조회 3,919
10-09-17 조회 3,864
10-05-31 조회 3,571
09-12-31 조회 3,693
09-07-23 조회 5,029
08-09-16 조회 3,233
08-09-06 조회 2,980
08-09-04 조회 3,398
08-08-16 조회 4,436
08-08-15 조회 3,305
08-08-14 조회 4,515
08-08-12 조회 3,987
08-07-23 조회 2,803
08-07-10 조회 3,751
08-07-04 조회 2,972
08-06-27 조회 7,617
08-06-19 조회 4,918
08-05-27 조회 5,533
08-05-25 조회 5,366
08-05-23 조회 3,438
08-05-23 조회 4,602
08-05-21 조회 4,951
08-05-20 조회 4,078
08-05-20 조회 3,302
08-04-18 조회 4,357
글쓰기