CSS3 핵심 가이드.

 

* CSS3 공부하기

 CSS3 의 새로운 기능 및 속성등을 정리 하였습니다. CSS3 처음 배우는 분들이 보시면 좋을 듯 하네요.

    * Prefixes

        CSS3는 브라우져 별로 사용되는 Prefix 지정이 다르게 되어 있습니다.

        chrome : -webkit-
        safari : -webkit-
        firefox : -moz-
        ie : -ms-
        opera : -o-

        사용 예 )
        #prefix-example {
            -moz-box-shadow: 0 3px 5px  //firefox
            -webkit-box-shadow: 0 3px 5px  // safari, chrome
            box-shadow: 0 3px 5px
        }

    * Colors

      - CSS2 에서는 background images 을 이용하여 투명을 지정하였습니다. 그러나 CSS3에서는 속에 뒤에 값을 넣어서 지정할 수 있습니다.
      - rgb 스타일 형식으로 칼라를 지정 할 수 있습니다. ( 도구을 이용하면 rgb 색상코드를 쉽게 변환할 수 있습니다. safari's web inspector .. picpick .. )

        #rgb-example {
            rgb(red, green, blue);
            color: rgb(255, 255, 255);
        }

      - HSL style 역시 사용할 수 있습니다. hue, saturation, lightness ( 명도, 채도, 밝기 )
         • ue : 0 ( or 360 ) red, 120 green, 240 blue ., 0 ~ 360 값 입력
         • Saturation : 퍼센트 값; 100% 풀 칼라 색상 0 ~ 100% 값입력
         • Lightness : 퍼센트 값; 0% dart-black, 100% light-white , and 50% 는 평균

            #alpha-example {
                 background: hsla(324, 100%, 50%, .5);
                 border: 1em solid rgba(0, 0, 0, .3);
                 color: rgba(255, 255, 255, .8);
            }

     - 지원하는 브라우져
        firefox : full support
        chrome: full support
        opera: full support
        ie : full support
        opera : full support

    * Rounded Corners
        CSS 2.1 에서는 추가 마크업을 많이 포함하였고, 여러 이미지, 자바스크립트를 이용하여 만들었습니다.
        CSS3 에서는 매우 쉽습니다, 단지 border-radius 스타일 만 사용하면 됩니다. 그리고 padding 과 margin 스타일 잘 지정하면 멋진 라운드 코너를 만들 수 있습니다.

        border-radius: 20px;
        // horizonal, vertical
        border-radius: 20px 20px;
        // top left, top right, bottom right, bottom left
        border-radius: 20px 20px 20px 20px;

     - 지원하는 브라우져
            • Firefox: full support
            • Chrome: full support
            • Safari: with -webkit-
            • IE >= 9.0: full support
            • Opera: full support

    * Drop Shadows

       이전에는 Drop Shadows 하기 매우 힘들었습니다.그러나 CSS3 는 box-shadow 스타일만 지정하면 됩니다.

       box-shadow 몇가지 옵션 :
            • horizontal offset
            • vertical offset
            • blur radius
            • op-tional spread distance,
            • color

            // horizonal offset, vertical offset, blur radius, color
            box-shadow: 10px 5px 15px

            // inset shadows
            box-shadow: 10px 5px 15px inset;

            // horizonal offset, vertical offset, blur radius, spread distance, color;
            box-shadow: 10px 5px 15px 15px

            // multiple shadows
            box-shadow: 0 1px 1px

        #shadow-example {
            -moz-box-shadow: 0 1px 1px  inset;
            -webkit-box-shadow: 0 1px 1px  inse
            box-shadow: 0 1px 1px  inset;
        }

        - 지원하는 브라우져
            • Firefox: full support
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE >= 9.0: full support
            • Opera: full support

    * Text Shadow

        이전에는 이미지를 사용해야만 text Shadow를 사용할 수 있었습니다. CSS3 에서는 text-shadow style 만 추가 하여 사용할 수 있습니다.

        text-shadow

        // horizonal offset, vertical offset, color
        text-shadow: 1px 1px ;

        // horizonal offset, vertical offset, blur radius, color
        text-shadow: 1px 1px .3em rgba(255, 255, 255, .8);

        - 지원하는 브라우져
            • Firefox: full suppor
            • Chrome: full suppo
            • Safari: full support
            • IE: no support
            • Opera: full support

    * Gradients

        CSS2 에는 background 이미지를 반복을 사용하여 gradients를 구현하였다. CSS3 는 linear 그리고 radial gradients 를 추가 지원 합니다.

        linear-gradient(#CCC, #DDD, white)

        // horizontal gradient
        linear-gradient(left, #CCC, #DDD, #FFF);

        // or with a specific angle
        linear-gradient(-45deg , #CCC , #FFF)

         //Just specify a percentage or pixel value along with the color:
        linear-gradient(white , #DDD 20% , black)

        // transparency:
        radial-gradient( rgba(255, 255, 255, .8) , transparent )

        #gradient-example {
          /* Fallback */
          background: #FFF;
          /* Chrome < 10, Safari < 5.1 */
          background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
          /* Chrome >= 10, Safari >= 5.1 */
          background: -webkit-linear-gradient(#FFF, #CCC);
          /* Firefox >= 3.6 */
          background: -moz-linear-gradient(#FFF, #CCC);
          /* Opera >= 11.1 */
          background: -o-linear-gradient(#FFF, #CCC);
          /* IE >= 10 */
          background: -ms-linear-gradient(#FFF, #CCC);
          /* The standard */
          background: linear-gradient(#FFF, #CCC);
        }

     - 지원하는 브라우져
        • Firefox: with -moz-
        • Chrome: with -webkit-
        • Safari: alternative implementation
        • IE >= 10: with -ms-
        • Opera >= 11.1: with -o-

    * Multiple Backgrounds

        CSS3 콤마로 구분하여 여러개의 background 를 지정 할 수 있습니다

        background: url(snowflakes.png) top repeat-x, url(chimney.png) bottom no-repeat, -moz-linear-gradient(white, #CCC), #CCC;

        - 지원하는 브라우져 :
            • Firefox: full support
            • Chrome: full support
            • Safari: full support
            • IE >= 9.0: full support
            • Opera: full support

    * Selectors

        CSS3  새로운 선택자 설명합니다.

        :first-child
        선택된 엘리먼트 아이템의 첫번쩨

        :last-child
        선택된 엘리먼트 아이템의 마지막

        :only-child
        선택된 엘리먼트 아이템의 오직 하나의 자식

        :target
        Selects elements targeted in the current URL’s hash

        :checked
        체크박스에서 체크된 아이템

    * Nth Child

        :nth-child( n )  n 으로 지정된 자식을를 찿습니다.

        #example:nth-child( 3n ) { /\* ... \*/ }// 3번재

        \* Even children */
        #example:nth-child( 2n ) { /* ... */ }
        #example:nth-child( even ) { /\* ... \*/ }

        \* Odd children */
        #example:nth-child( 2n+1 ) { /* ... */ }
        #example:nth-child( odd ) { /\* ... \*/ }

        \* Last child */
        #example:nth-last-child( 1 )

    * Direct Descendants

        > 기호를 사용하여 바로 밑의 자식의 엘리먼트를 찿을 수 잇습니다.

        \* Only directly descendant divs */
        #example > div { }

    * Selector Negation

        :not 를 사용하여 부정 할 수 있습니다.

        \* Only directly descendant children, except ones with the "current" class */

        #example > *:not(.current) {
            display: none
        }

        - 지원하는 브라우져 :
            • Firefox: full support
            • Chrome: full support
            • Safari: full support
            • IE >= 9.0: full support
            • Opera: full support

    * Transitions

         CSS3는  transition  지원 합니다. 간단한 애니메이션을 만들어셔 스타일을 변경 효과를 줄 수 있습니다.

        /* duration, property, animation type (optional) */
        transition: 1.5s opacity ease-out

        /* Multiple transitions */
        transition: 2s opacity , .5s height ease-in
        transition: .5s height , .5s .5s width

        몇가지 효과 속성 :
            • linear
            • ease-in
            • ease-out
            • ease-in-out

        #transition-example {
            position: absolute;
            /* cubic-bezier(x1, y1, x2, y2) */
            transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3);
        }

        #transition-example {
            width: 50px;
            height: 50px;
            background: red;
            -webkit-transition: 2s background ease-in-out;
            -moz-transition: 2s background ease-in-out;
            -o-transition: 2s background ease-in-out;
            transition: 2s background ease-in-out;
        }

        #transition-example:hover {
            background: blue;
        }

        - 지원하는 브라우져 :
            • Firefox: with -moz-
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE >= 10.0: with -ms-
            • Opera: with -o-

    * Border Images

        border-image, 보더에 이미지를 지정 할 수 있습니다.
        border-image: url(border.png) 14 14 14 14 round round;
        border-image: url(border.png) 14 14 14 14 stretch stretch;

        - 지원하는 브라우져
            • Firefox: with -moz-
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE: no support
            • Opera: with -o-

    * Box Sizing

      padding 과 margin 의 관여하지 않는 width 100% 폭 요소를 지정할 수 있습니다.

    .border-box {
        -webkit-box-sizing: border-box
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    * Transformations ( 변형 )

        CSS3 에서는 기본 2D 변형을 지원 합니다.. translated, rotated, scaled, skewed 를 옵션으로 설정 할 수 있습니다.

        transform: rotate( -30deg ); // 회전

        transform: skew( 30deg , -10deg ); // 비스듬히 움직임

        translateX(30px);
        translateY(50opx);

        transform: scale(1.2);

        transform: rotate(30deg) skewX(30deg);

       - 지원하는 브라우져 :
        • Firefox: with -moz-
        • Chrome: with -webkit-
        • Safari: with -webkit-
        • IE >= 9: with -ms-
        • Opera: with -o-

    * Flexible Box Model

        콘텐츠 영역에서 콘텐츠가 많아 질수 록 박스가 유동적으로 늘어나고 주변에 영향을 받아서 처리 하는 경우가 있습니다.
        이럴 경우 매우 유용히 사용할 수 잇습니다.

        .hbox {
          display: -webkit-box;
          -webkit-box-orient: horizonta
          -webkit-box-align: stretch;
          -webkit-box-pack: left;

          display: -moz-box;
          -moz-box-orient: horizontal;
          -moz-box-align: stretch;
          -moz-box-pack: left;
        }

        .vbox {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-align: stretch;

            display: -moz-box;
            -moz-box-orient: vertical;
            -moz-box-align: stretch;
        }

        #sidebar {
            -webkit-box-flex: 0;
            -moz-box-flex: 0;
            box-flex: 0;
            width: 200px;
        }

        #content {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            box-flex: 1;
        }

        - 지원하는 브라우져 :
            • Firefox: with -moz-
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE >= 10: with -ms-
            • Opera: no support

 

    * Fonts

        @font-face 를 사용하여 웹페이지의 사용자 정의 글꼴을 사용 할 수 있습니다.
        TrueType and OpenType 의 포맷을 지원합니다.

        @font-face {
          font-family: "Bitstream Vera Serif Bold";
          src: url("/fonts/VeraSeBd.ttf");
        }

        - 지원하는 브라우져 :
            • Firefox: full support
            • Chrome: full support
            • Safari: full support
            • IE >= 9: full support
            • Opera: full support

    * Graceful Degradation

        * 색상이 마지막에 흐리하게 나오게 하는거 있잖아요... 그라데이션에서 마지막에 색상을 떨어트리는거.. ^^;;

        #example-gd {
            background: white;
            background: rgba(255, 255, 255, .75);
        }

        #example-gd {
            background: #FFF;
            background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
            background: -webkit-linear-gradient(#FFF, #CCC);
            background: -moz-linear-gradient(#FFF, #CCC);
            background: linear-gradient(#FFF, #CCC);
        }

    * Modernizr

      Modernizr 는 CSS3 속성이 지원되는지 검사 합니다. no- 요러게 표시

        .multiplebgs div p {
            /* properties for browsers that
             support multiple backgrounds */
        }
        .no-multiplebgs div p {
            /* optional fallback properties
            for browsers that don't */
        }

       검사되는 속성들:
            • @font-face
            • rgba()
            • hsla()
            • border-image:
            • border-radius:
            • box-shadow:
            • text-shadow:
            • Multiple backgrounds
            • Flexible box model
            • CSS animations
            • CSS gradients
            • CSS 2D transforms
            • CSS transitions