웹개발자라면 알아야될 css tip(?)

Source : http://seye2.egloos.com/2294991

 

1.CSS Reset
2.IE6 CSS Bugs and Fixes Explained
3.Block and Inline Elements Explained
4.100% Height using CSS, Fixed Footer
5.CSS Rounded Corners
6.Float and Clear: A Comparison of CSS Clearing Techniques
1. CSS Reset
    -  크게 7가지로 정리해 볼 수 있을거 같습니다.
    1. The CSS Reset
        모든 엘레멘트에 margin값과 padding값을 초기화 시켜 줍니다.

   1: html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; }

   2: img, fieldset { border: 0; }

    2. Formatting

   1: body, select, input, textarea { font: 100%/1.2 "lucida sans", verdana, arial, helvetica, sans-serif; }

        font의 size와 line-height를 100%/1.2를 선언한 이유는 이러한 속성은 모든 폰트들의 적절한 공백을 줍니다.
        기본 폰트인 lucida sans는 각자 맞게 변경해도 됩니다.
    3. The Container
        body 태그 밑에 div엘레멘트로 만들어진 container 박스가 있다면 이것으로 컨텐츠의 너비와 font-size를 다음과 같이 적절하게 조정할 수 있습니다.

   1: #container { font-size: 0.8em; width: 760px; margin: 0 auto; }

    4. Headings

   1: h1, h2, h3, h4, h5, h6 { padding-bottom: 0.8em; }

        heading 태그의 간격등과 같은 것은 위와같이 선언하여 주고

   1: h1 { font-size: 2em; }

   2: h2 { font-size: 1.8em; }

   3: h3 { font-size: 1.6em; }

   4: h4 { font-size: 1.4em; }

   5: h5 { font-size: 1.2em; }

   6: h6 { font-size: 1em; }

        각 태그에 맞게 글꼴을 선언하여 준다.
    5. paragraph

   1: p { padding-bottom: 1.2em; }

    6. Reusable CSS Classes
    다른곳에서도 재사용 가능한 클래스명을 사용한다.

   1: .error { .. }

   2: .confirmation { .. }

    7. Fieldset과 Legend

   1: <form method="get" action="css-reset.html">

   2:   <div class="fieldset">

   3:     <fieldset>

   4:       <legend><span>Legend</span></legend>

   5:     </fieldset>

   6:   </div>

   7: </form>

   8: div.fieldset { border: solid 1px #999; padding: 1em; margin: 1em 0; }

   9: legend span { display: block; font-weight: bold; font-size: 1.4em; color: #000; }

        ie6에서는 fieldset에 배경색을 주게 되면 보겠지만 fieldset의 영역이 정상적으로 잡히지 않는다.
        즉, 이러한 문제는 position:relative나 기타 여백같은 것들이 다른 브라우져들과 동일하게 보이지 않는 문제가 생길 수 있다.
        이러한 문제를 해결하기 위해서 div태그를 감싸서 사용하고 있고 legend내 span태그의 사용은 legend태그는 오직 inline contents를 포함 할 수 있다.
        이런한 문제 때문에 fieldset과 legend태그의 스타일은 전부 제거하고 대체하는 div와 span 태그에 스타일을 적용하여 준다.
        html validation은 유효하다.
2. IE6 CSS Bugs and Fixes Explained
    1. 웹표준을 사용하여 만든다.
        - Doctype을 사용하여 여러브라우져들에 생길 수 있는 문제들을 최소화 시킬 수 있다.
    2. Double Margin Bug
        - #navigation { float: left; width: 200px; margin-left: 10px; display: inline; }
        - #content { float: right; width: 500px; margin-right: 10px; display: inline; }
        float속성과 margin값을 써줄 경우 ie6에서 Double Margin Bug가 발생한다. 이것을 막기 위해서는 display:inline 속성을 작성하여 주면 된다.
    3. hasLayout
        - 이것은 ie/win에만 존재하는 속성이다. 이러한 속성으로 인하여 css를 적용할때 특이한 버그 들이 많이 발생한다. 여기서는 자주 발생하는 박스 모델과 관련해서 설명할 것이다.

   1: #container { background-color: #CCC; overflow: hidden; }

   2: * html #container { height: 1%; } 

   3: #navigation { float: left; width: 200px; margin-left: 10px; display: inline; }

   4: #content { float: right; width: 500px; margin-right: 10px; display: inline; }

            Container 속성에 overflow:hidden 속성을 주어 container내의 navigation과 content의 float속성을 제거하려고 한다. 대부분의 브라우저들이 잘 적용이 되지만 ie6에서는 해제가 되지 않는다.
            float을 제거하는 방법은 여러가지가 있지만 float을 적용시킨 컨텐츠를 감싸고 있는 태그에 너비나 높이 값을 줌으로써 해결 할 수 있다. 하지만 이것은 사이즈를 고정시키는 효과를 나타내기 때문에 원하지 않는 해결방법일 것이다.
            대신 min-height와 같은 속성을 줌으로써 해결 할 수 있다.
            ie6에서만 적용되도록 *핵을 사용하여 height:1% 최소한의 높이를 줌으로써 float과 관련된 hasLayout 버그를 해결 할 수 있다.
    4. Small Height Bug
        - 이 버그의 이름을 정확하게 명칭해서 부를 수는 없지만 경험에 의해서 이름을 붙여보았다.

   1: #corner { width: 10px; height: 2px; background-color: #C00; }

          이렇게 height:2px만큼만 높이를 주고 싶지만 ie6에서는 높이값에 의해 컨텐츠의 높이가 정해지는것이  아니라 font-size에 의해서도 변동이 있다. 즉 ie에서도 위와같이 적용하고 싶다면 아래와 같이 속성을 추가해주면 된다.
          혹은 font-size대신 overflow:hidden; 속성으로 적용시킬 수 있다. (타브라우져에서도 문제는 없었다.)

   1: #corner { width: 10px; height: 2px; background-color: #C00; font-size: 0; }

   2: #corner { width: 10px; height: 2px; background-color: #C00; overflow:hidden; }

3. Block and Inline Elements Explained
        1. Block Elements
            - 페이지의 전체 너비나 자연스럽게 새로운 라인으로 보여준다. 
            <div>, <h1>.<h6>, <p>, <table>, <ul>, <ol>, <dl>, <li>, <dd>, <form>, <blockquote>,<pre>, <address>, <fieldset>
        2. Inline Elements
            - 컨텐츠가 필요한 만큼의 너비만 요구하고 새로운 라인을 강제하지 않는다. Inline Elements 내에서는 Block Elements를 같이 쓸 수 없다.
            <dt>, <span>, <img>, <a>, <strong>, <em>, <br>, <input>, <textarea>, <abbr>, <acronym>
        3. Not Displayed
            - 몇몇 태그들은 보여지지 않고 문서의 head태그 사이에 위치한다.
            <meta>, <style>, <script>
            - Block과 Inline엘레멘트 예제

   1: <ul>

   2:   <li><a href="#">Home</a></li>

   3:   <li><a href="#">About</a></li>

   4:   <li><a href="#">Services</a></li>

   5:   <li><a href="#">Portfolio</a></li>

   6:   <li><a href="#">Contact</a></li>

   7: </ul>

            다음의 예를 보면 메뉴바를 구현하기 위한 HTML코드이다. 위에서 말했다시피 li는 블럭엘레멘트이다.
            그리고 semantic markup을 위해서는 다음과 같이 순서가 없는 리스트로 메뉴를 만드는것이 맞다.
            하지만 위에서 얘기한것처럼 블록엘레멘트는 새라인으로 변경되게하는 특성이 있다.
            그럼 의미에 맞는 마크업을 하기 해야하는데 li엘레멘트들을 inline형태처럼 옆으로 붙게 작업을 해주어야하는데 그렇게 하기 위해선 css로 조정이 가능하다.
            li{ display:inline; list-style-type:none; } display:inline; 속성을 주면 block Elements들을 css 속성으로 inline Element처럼 보여지게 해주는 속성이다. 즉 태그는 의미에 맞게 작성해주고 css로 block, inline Element의 경계를 넘나들 수 있게 해주는 것이다.
            하지만 역시 너비와 높이 값을 줄 수 없는 문제가 발생하기 때문에 li{ float:left; list-style-type:none; } display:inline속성 대신 float:left;속성을 주어 왼쪽 정렬을 시킬 수 있도록 해준다. float속성을 주게되면 해당 엘레멘트는 block이건 inline Element건 block 속성으로 보여지게 하는 능력이 있다.
            inline태그인 a태그 또한 위와 같이 Block요소처럼 속성을 줄 수 있다.
            a태그에 다음과 같이 css속성인 float속성 혹은 display:block속성을 주면 된다.
4. 100% Height using CSS, Fixed Footer

   1: #container {

   2:  background-color: #DDD;

   3:  border-left: 2px solid #666;

   4:  border-right: 2px solid #666;

   5:  width: 676px;

   6:  position:relative; /* needed for footer positioning*/

   7:  margin:0 auto; /* center, not in IE5 */

   8:  height:auto !important; /* real browsers */

   9:  height:100%; /* IE6: treaded as min-height*/

  10:  min-height:100%; /* real browsers */

  11: }

  12: Add these declarations to your CSS:

  13: #header {

  14:  height:100px;

  15:  background:#999;

  16: }

  17: #content {

  18:  padding-bottom:50px; /* bottom padding for footer */

  19: }

  20: #footer {

  21:  position:absolute;

  22:  width:100%;

  23:  height:50px;

  24:  bottom:0; /* stick to bottom */

  25:  background:#999;

  26: }

  27:  

  28: <body>

  29:   <div id="container">

  30:     <div id="header"></div>

  31:     <div id="content"></div>

  32:     <div id="footer"></div>

  33:   </div>

  34: </body>

        { height:auto ! important; height:100%; }속성을 줄 경우 핵을 사용할 필요 없이 높이를 잡게 된다.
        또한 따라다니는 푸터 를 작업할 경우 쉽게 작업 할 수 있다.
        이 방법이 문제가 있다면

   1: html, body { 

   2:   height: 100%;

   3: }

   4: .wrapper {

   5:   min-height: 100%;

   6:   height: auto !important;

   7:   height: 100%;

   8:   margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */

   9: }

  10:   

  11: .footer, .push {

  12:    height: 142px; /* .push must be the same height as .footer */

  13: }

  14:   

  15: <div class="wrapper">

  16:   <div class="header">

  17:     <h1>CSS Sticky Footer</h1>

  18:   </div>

  19:   <div class="push"></div>

  20: </div>

  21: <div class="footer"></div>

        이방법을 써보길 권장한다.

   1: body {

   2:   margin: 0;

   3:   padding: 0;

   4: }

   5: #yourbox {

   6:   width: 300px;

   7:   height: 200px;

   8:   position: absolute;

   9:   left: 50%;

  10:   margin-left: -150px;

  11:   top: 50%;

  12:   margin-top: -100px;

  13: }

        yourbox라는 block Elements를 위, 아래, 양옆 정렬 방법이다.
5. CSS Rounded Corners
    나는 항상 라운드 박스를 만들때 고민이 된다. (나만 그럴지도 모르겠다)
    쉬운 작업 방식은 위부분과 아래부분을 잘라서 너비는 고정으로 만들면 작업이 편하기 때문이다. 그러나 라운드 박스가 유동적으로 가야한다면

    1. 아래와 같이 위,아래, 양 옆에 있는 끝부분을 잘라 조그마한 동그란 이미지로 만든다.

   1: <div id="container">

   2:   <span class="tl"></span><span class="tr"></span>

   3:   <h1>CSS Rounded Corners Revisted</h1>

   4:   <p>안녕 라운드박스야</p>

   5:   <span class="bl"></span><span class="br"></span>

   6: </div>

   7: * { padding: 0; margin: 0; }

   8: #container { background-color: #247CBA; font-size: 0.75em; overflow: hidden; }

   9: * html #container { height: 1%; }

  10: .tl {

  11:   background-image: url(circle.gif); 

  12:   width: 10px;

  13:   height: 10px;

  14:   float: left;

  15:   font-size: 0;

  16: }

  17: .tr {

  18:   background-image: url(circle.gif);

  19:   background-position: 10px 0px;

  20:   width: 10px;

  21:   height: 10px;

  22:   float: right;

  23:   font-size: 0;

  24:  }

  25: .bl {

  26:   background-image: url(circle.gif);

  27:   background-position: 0px 10px;

  28:   width: 10px;

  29:   height: 10px;

  30:   float: left;

  31:   font-size: 0;

  32: }

  33: .br {

  34:   background-image: url(circle.gif);

  35:   background-position: 10px 10px;

  36:   width: 10px;

  37:   height: 10px;

  38:   float: right;

  39:   font-size: 0;

  40: }

     container 바깥으로 네개의 span태그가 있고 float을 써서 양끝단에 이미지들을 위치시킨다. 단 높이값과 너비값을 주고 ie에서 영역이 틀리게 잡히는 버그를 고치기 위해 font-size:0으로 설정하고 background-position을 이용하여 각 끝단에 맞는 영역을 위치 시킨다. 이렇게 하면 ie6,7, ff, opera, safari에서 이상없이 동작이 된다.
6. Float and Clear: A Comparison of CSS Clearing Techniques

   1: .f_clear:after {

   2:   clear:both;

   3:   content:".";

   4:   display:block;

   5:   height:0;

   6:   visibility:hidden;

   7: }

   8: * html 

   9: .f_clear {

  10:   height:1px;

  11: }

  12: .f_clear {

  13:   display:block;

  14:   min-height:1px;

  15: }

  16: .menuSidebar {

  17:   float:left;

  18: }

  19: .cointentsSidebar {

  20:   float:left;

  21: }

  22: <div class="container">

  23:   <div class="sidebar f_clear">

  24:     <div class="menuSidebar"></div>

  25:     <div class="contentsSidebar"></div>

  26:   </div>

  27:   <div class="footer"></div>

  28: </div>

     menuSidebar와 contentsSidebar에 float:left속성을 주었을때 기존의 해결 방법은

   1: <div class="container">

   2:   <div class="menuSidebar"></div>

   3:   <div class="contentsSidebar"></div>

   4:   <div class="clear"></div>

   5:   <br class="footer" />

   6: </div>

     이런식으로 태그를 하나 더 써서 해결하는 방식으로 적용을 했었다.
    하지만 이렇게 작업을 하였을때 단점
    1.매번 float속성을 해제해 주기 위하여 br 태그를 하나 더 쓰게 된다는 것
    2.현재 br태그로 설정되어 있지만 ie8에서는 inline태그로는 float을 해제시킬 수 없다.
       즉 새로운 브라우저가 나왔을때 br로 설정해준 태그들을 전부 바꿔줘야한다는것.