[HTML 5 반응형 웹디자인_2015.03.27] 8. CSS3

 [ 들어가면서...]

ㅇ CSS3로 할 수 있는 것들

    - 코드 몇 줄로 작업처리

둥근모서리, 배경 그레이디언트, 텍스트 새도, 박스 새도, 사용자정의 글꼴

           - 자바스크립트의 일부 기능 대체

          - 호버 상태 애니메이션 처리

 

 

 [ CSS3 실습 ]

ㅇ CSS3 규칙

    - 스타일시트를 구성하는 규칙집합(rule set or rule)은 selector와 선언 블록{ }으로 구성

    - selector : 태그명, id속성 값("#"), class속성(".") 값

  h1{

}

     - 선언 블록{ } : 선언(속성+값, 콜론(:)으로 구분) 기술 / 선언과 선언 사이는 세미콜론(;)으로 구분

               h1{

 

   color: green;

   font-size: 20px;

}

 

ㅇ 벤더 프리픽스

    - CSS3모듈 표준 규격을 미승인(W3C) -> 브라우저 회사별 CSS3기능을 구현

#area{

   -ms-border-radius : 5px; /*인터넷익스플로러(IE)*/

   -o-border-radius : 5px; /*오페라(Opera)*/

   -moz-border-radius : 5px; /*파이어폭스(Firefox)*/

   -webkit-border-radius : 5px; /*크롬(Chrome), 사파리(Safari)*/

   border-radius : 5px; /*W3C - 표준규약*/

}

 

ㅇ css3 추가된 selector --- 태그명[속성] : 태그에서 []안에 기술한 속성이 있는 경우에만 적용

    - 접두사로 시작 : ^

    - 인스턴스를 포함 : *  (단어에 포함)

    - 접미사로 종료 : $

 

ㅇ css3 기능 연습

 

- 그림자 섀도 만들기

- Trensparence(0~255 or 0~1)

 

- 그레이디언트 만들기

- 여러 배경이미지 사용하기

- 배경색 그레이디언트 패턴 만들기

- @font-face규칙으로 대역폭 친화적인 아이콘 만들기

- 트랜지션, 트랜스폼, 애니메이션