브라우저의 크기에 상관없이 footer를 하단에 고정시키는 것을 검색해 봤더니
별 희안한 소스들이 많이 널려있더군.
footer에 position:absolute;만 줘서 고정시켜버리는 사람도 있는 반면
약~간은 편법을 써서 하는 사람들도 있긴 하던데...
그럴경우 컨텐츠 영역에서 글이 길게 써지면 컨텐츠 영역이 footer를 뚫고 밑으로 길게 늘어나는 현상이 발생.
그래서 정리해 보았다!!
가로 1단 footer하단고정 레이아웃!!
<!DOCTYPE HTML> <html lang="kor"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>zioyou그룹웨어 CSS만들기</title> <script> if(/*@cc_on!@*/false){ document.documentElement.className+='ie ie' + getInternetExplorerVersion(); } function getInternetExplorerVersion() { var rv = -1; if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } return rv; } </script> <style> * {margin:0; padding:0;} html,body {height:100%; margin:0; padding:0; } body {margin:0; height:100%; font-size:12px; color:#666; line-height:14px;}
/*레이아웃*/ div#wrapper {position:relative; width:100%; min-height:100%; margin-bottom:-132px;} div#wrap {padding-bottom:132px;} div#footer {width:100%; height:132px; margin:0 auto; background:red;} </style> </head> <body> <div id="wrapper"> <div id="wrap"> <p>* 컨텐츠영역 입니다.</p> <p> <script> for(var i=0; i<150; i++){ //document.write(i + '<br/>'); } </script> </p> </div> </div> <div id="footer"> <p>* 하단영역 입니다.</p> </div> </body> </html> |
위에서부터 설명하자면
<script> if(/*@cc_on!@*/false){ document.documentElement.className+='ie ie' + getInternetExplorerVersion(); } function getInternetExplorerVersion() { var rv = -1; if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } return rv; } </script> |
이 스크립트를 간단히 설명하자면
ie(인터넷 익스플로러)일 경우 <html> 태그에 class를 넣어준다.
"ie"라는 클래스와 "ie브라우저버전" 이렇게 두개..
보통 크롬이나 파폭등의 css가 적용되는것과 익스에서 적용되는 것이 조금 다르다보니..
ie핵이라는 것들을 많이 쓰시는데..
난 아직 그정도 스킬이 없어놔서..
걍 스크립트로 브라우저 버전을 class로 박아 버렸다.
인터넷 익스플로러 F12를 누르면(개발자도구) html 구조가 보인다.
스크립트 적용 후 소스를 보면 class가 추가가 된것이 보인다.
이럴경우 css작성할때 조금 편하다. (주관적으로!)
.contensText {margin-top:20px;}
.ie .contensText {margin-top:12px;} /* IE일 경우 전부 적용됨 */
.ie.ie10 .contensText {margin-top:10px;} /* IE10일 경우만 적용 */
.ie.ie9 .contensText {margin-top:7px;} /* IE9일 경우만 적용 */
.ie.ie8 .contensText {margin-top:5px;} /* IE8일 경우만 적용 */
.ie.ie7 .contensText {margin-top:3px;} /* IE7일 경우만 적용 */
이런 식으로 브라우저 버전마다 적용 할 수 있다.
글자가 뚫고 나가는것을 확인하기 위해 몇번이고 <br>태그를 넣어서 쓰기 귀찮다.
또한 몇번째에서 잘리고 있는지 잘리는지 안잘리는지를 확인하기 위해선 숫자 번호만큼 좋은게 없다.
가끔 똑같은 텍스트를 주~욱 늘릴 경우 이게 잘린건지 안잘린건지 확인이 안된다.
<script> for(var i=0; i<150; i++){ document.write(i + '<br/>'); } </script> |
글이 들어가는 부분에 위의 스크립트 소스를 넣어주면
자동으로 글을 뿌려준다.
위에 150이라는 숫자는 0부터시작해서 149번까지 숫자를 뿌려준다는 것이다.
뭐 i=1; i<=150; 이렇게 바꾸면
1부터 시작해서 150으로 끝난다.
뭐 일단 css내용추가는 조금있다 하고..
일단은 저장..
일하자.
'Develop > CSS' 카테고리의 다른 글
| CSS3 Animation - 에니메이션 (0) | 2015.08.10 |
|---|---|
| 텍스트에어리어(textarear) 가로 100%에 맞추기 (0) | 2014.08.25 |