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

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값을 초기화 시켜 줍니다.

        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; }
        img, fieldset { border: 0; }

    2. Formatting
        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
        를 다음과 같이 적절하게 조정할 수 있습니다.
        #container { font-size: 0.8em; width: 760px; margin: 0 auto; }

    4. Headings
        h1, h2, h3, h4, h5, h6 { padding-bottom: 0.8em; }
        heading 태그의 간격등과 같은 것은 위와같이 선언하여 주고

        h1 { font-size: 2em; }
        h2 { font-size: 1.8em; }
        h3 { font-size: 1.6em; }
        h4 { font-size: 1.4em; }
        h5 { font-size: 1.2em; }
        h6 { font-size: 1em; }
        각 태그에 맞게 글꼴을 선언하여 준다.

    5. paragraph
    p { padding-bottom: 1.2em; }

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

    7. Fieldset과 Legend

        <form method="get" action="css-reset.html">
            <div class="fieldset">
                <fieldset>
                    <legend><span>Legend</span></legend>
                </fieldset>
            </div>
        </form>

        div.fieldset { border: solid 1px #999; padding: 1em; margin: 1em 0; }
        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를 적용할때 특이한
          버그 들이 많이 발생한다. 여기서는 자주 발생하는 박스 모델과 관련해서 설명할 것이다.

            #container { background-color: #CCC; overflow: hidden; }
            * html #container { height: 1%; }
            #navigation { float: left; width: 200px; margin-left: 10px; display: inline; }
            #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
        - 이 버그의 이름을 정확하게 명칭해서 부를 수는 없지만 경험에 의해서 이름을 붙여보았다.
          #corner { width: 10px; height: 2px; background-color: #C00; }
          이렇게 height:2px만큼만 높이를 주고 싶지만 ie6에서는 높이값에 의해 컨텐츠의 높이가 정해지는것이
          아니라 font-size에 의해서도 변동이 있다. 즉 ie에서도 위와같이 적용하고 싶다면 아래와 같이 속성을
          추가해주면 된다.
          혹은 font-size대신 overflow:hidden; 속성으로 적용시킬 수 있다. (타브라우져에서도 문제는 없었다.)
          #corner { width: 10px; height: 2px; background-color: #C00; font-size: 0; }
          #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엘레멘트 예제
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </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
        #container {
            background-color: #DDD;
            border-left: 2px solid #666;
            border-right: 2px solid #666;
            width: 676px;
            position:relative; /* needed for footer positioning*/
            margin:0 auto; /* center, not in IE5 */
            height:auto !important; /* real browsers */
            height:100%; /* IE6: treaded as min-height*/
            min-height:100%; /* real browsers */
        }

        Add these declarations to your CSS:
        #header {
            height:100px;
            background:#999;
        }

        #content {
            padding-bottom:50px; /* bottom padding for footer */
        }

        div#footer {
            position:absolute;
            width:100%;
            height:50px;
            bottom:0; /* stick to bottom */
            background:#999;
        }
        
        <body>
            <div id="container">
                <div id="header"></div>
                <div id="content"></div>
                <div id="footer"></div>
            </div>
        </body>
        { height:auto ! important; height:100%; }속성을 줄 경우 핵을 사용할 필요 없이 높이를 잡게 된다.
        또한 따라다니는 푸터 를 작업할 경우 쉽게 작업 할 수 있다.
        이 방법이 문제가 있다면

        html, body {
            height: 100%;
        }
        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
        }
        .footer, .push {
            height: 142px; /* .push must be the same height as .footer */
        }

        <div class="wrapper">
            <div class="header">
                <h1>CSS Sticky Footer</h1>
            </div>
            <div class="push"></div>
        </div>
        <div class="footer"></div>

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

        body {
            margin: 0;
            padding: 0;
        }

        #yourbox {
            width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -100px;
        }

        yourbox라는 block Elements를 위, 아래, 양옆 정렬 방법이다.

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

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





    <div id="container">
    <span class="tl"></span><span class="tr"></span>
    <h1>CSS Rounded Corners Revisted</h1>
    <p>안녕 라운드박스야</p>
    <span class="bl"></span><span class="br"></span>
    </div>

    * { padding: 0; margin: 0; }
    #container { background-color: #247CBA; font-size: 0.75em; overflow: hidden; }
    * html #container { height: 1%; }
    .tl {
        background-image: url(circle.gif);
        width: 10px;
        height: 10px;
        float: left;
        font-size: 0;
    }
    .tr {
        background-image: url(circle.gif);
        background-position: 10px 0px;
        width: 10px;
        height: 10px;
        float: right;
        font-size: 0;
    }
    .bl {
        background-image: url(circle.gif);
        background-position: 0px 10px;
        width: 10px;
        height: 10px;
        float: left;
        font-size: 0;
    }
    .br {
        background-image: url(circle.gif);
        background-position: 10px 10px;
        width: 10px;
        height: 10px;
        float: right;
        font-size: 0;
    }

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

6. Float and Clear: A Comparison of CSS Clearing Techniques
    .f_clear:after {
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    * html .f_clear {
        height:1px;
    }
    .f_clear {
        display:block;
        min-height:1px;
    }
    
    .menuSidebar {
        float:left;
    }
    .cointentsSidebar {
        float:left;
    }
    <div class="container">
        <div class="sidebar f_clear">
            <div class="menuSidebar"></div>
            <div class="contentsSidebar"></div>
        </div>
        <div class="footer"></div>
    </div>

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

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

덧글

[양희성]

1. Block Elements..
블럭 엘리먼트와 인라인 엘리먼트는 같이 사용할수 없다...
이 얘기는 인라인 엘리먼트에만 해당 내용이 아닐까요..??
블럭 엘리먼트에서는 인라인 엘리먼트를 사용해도 상관이 없지요..^^

[남동훈]

저부분은 저도 좀 하면서 찜찜하긴 했는데 인라인쪽으로 내용을 옮기면 되겠네요
좋은 정보 감사욤

[유원곤]

앗~~ 내가 만든 스킨 사용 감사욤~ ㅋㅋㅋ

[가인]

제 블로그에 담아가겠습니다. 좋은정보 감사합니다.

[seye2]

오히려 좋게 봐주셔서 제가 감사하죠 ^^

[tbeyond]

좋은 정보 감사합니다.~

[서재현]

오빠 나 재현.
dt 는 inline임.

[seye2]

알았다

[서재현]

나는 그 엘리먼트에 초기화 하는거 비추하는데
왜냐면 사이트에서 사용자가 입력하는 부분있잖아.
FCK에디터 같은걸르 리스트를 썻어.
FCK에디터상에선 list-style이 나오고 마진값이 먹여진 상태에서 사용자는 흐뭇해 하징.
하지만 그게 저장이 되고 view.html로 나오게 되면 초기화된 css가 적용되징.
그래서 FCK에디터와 다른 형태로 뿌려지기 때문에 엘리먼트 자체에다가 초기화 시키는것은 별로 좋지 않다고 생각햄 ㅋ

body나 html을 제외하고는 ㅋㅋ

예전에 그런적이 있어서 클라이언트가 랄지 한적이 있었거든...ㅋㅋㅋ

[seye2]

응 에디터 같은곳에서는 사용하면 안돼지 사용자가 정의하는 내용들이 많은데
프로젝트에 맞게 초기화를 해주는것에 있어서는 작성하는 속도나 공통적인
부분이 많을땐 오히려 이득이 많은거 같아
네이트 뉴스 전체 개편할때 초기화를 최소화로 사용했었는데 그것때문에 매번 설정해
줘야하는 부분이 의외로 많아 거슬렸었거던 각자에 맞게 잘 사용하면 좋은거 같아
좋은 의견 감사 재팔박사

[nadae1004]

저도 담아가요^^

[seye2]

넵 가져가세요~ ㅎㅎㅎ

[bg_ellder]

저도 담아갈꼐요^^ 잘봤습니다~

[날아라수호야]

좋은 글 감사합니다! 담아가겠습니다 출처남길게요 ^^