높이 100% 컨텐츠 만들기

HTML Source

<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
     <header>
           header
     </header>
     <!-- Wrapper -->
     <div id="wrap">
           <div id="container">
                 container
           </div>
     </div>
     <!-- //Wrapper -->
     <footer>
           footer
     </footer>
</body>
</html>


CSS Source


html, body{height:100%}
header{height:50px}
#wrap{min-height:100%;margin:-50px 0 -100px}
* html #wrap {*height:100%}
#container{padding:51px 0 100px}
footer{height:100px}

이 글은 스프링노트에서 작성되었습니다.

Posted by 멀더끙

2011/10/08 17:18 2011/10/08 17:18
Response
0 Trackbacks , 0 Comments
RSS :
http://mulder21c.woobi.co.kr/main/rss/response/5

Trackback URL : http://mulder21c.woobi.co.kr/main/trackback/5

스킨 코딩 컨벤션

HTML 문서 

인코딩   :   UTF-8
네이밍   :   카멜표기법 따름
편집기   :   EditPlus

 

Markup Convention

  • <html>에 lang 속성 선언
  • <head>

    • meta > ittle > link > script > style
    • meta    :    encoding > script-type > style
    • link    :    rel > type > href
    • script    :    type > src
  • <body>

    • input    :    type > name > id
    • textarea    :    cols 30 이상, rows 5 이상
    • button    :    type 반드시
    • a    :    href > title
    • img    :    src > width> height > title > alt
  • Script 완전 분리
  • Library Script 는 <head>에 선언, 그 외 Script는 </body> 바로 위에서 선언

 

CSS Convention

  • Reset CSS, Customizing CSS, TextCube CSS 3개 파일로 구성

    • CSS Reset   :    Eric Meyer 방법을 따름
    • Customizing CSS    :    스킨 제작에 쓰일 Style 정의
    • TextCube CSS    :    TextCube에서 미리 정의된 class 및 에디터에서 생성되는 style 정의
  • 들여쓰기 안함
  • 파일용량은 최소한으로 줄임
  • 마지막 쎄미콜론(;)은 제거
  • IE 핵은 * 만 사용
  • 속성 선언 순서

    • display
    • overflow
    • float
    • position
    • width & height
    • margin & padding
    • border
    • background
    • font
    • text
    •  

이 글은 스프링노트에서 작성되었습니다.

Posted by 멀더끙

2011/10/07 23:08 2011/10/07 23:08
Response
0 Trackbacks , 0 Comments
RSS :
http://mulder21c.woobi.co.kr/main/rss/response/3

Trackback URL : http://mulder21c.woobi.co.kr/main/trackback/3


블로그 이미지

백업 블로그 자료 복구용

- 멀더끙

Archives

Authors

  1. 멀더끙

Recent Comments

Recent Trackbacks

Calendar

«   2011/10   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Site Stats

Total hits:
3684
Today:
1
Yesterday:
8