CSS3

다양한 표현이 가능해짐.
W3C W3C
w3c규정이 진행중
각 브라우저에 따라서 기능이 제한될 수 있음.

필요 지식

html / css

벤터 프리픽스

규정으로 정해지기 전에 요소를 말함
- webkit- : chrome / safari
- moz- : firefox
- o- : opera
- ms- : ie
예시
- border-radius: 5px;
- webkit-border-radius: 5px;
대응상태 확인 caniuse

사용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title> CSS3 공부 </title>
  <style>
    div {
      width : 100px;
      height : 100px;
      padding : 10px;
      margin: 30px;
      background-color: orange;
      border: 2px solid orangered;
      }
  </style>
</head>
<body>
  <div id="test1"> test1 </div>
</body>
</html>

border-radius

border-radius : 10px;
- 네 모서리가 둥근 박스가 됨
border-raius : 50%;
backgroud-image:url(‘baby.jpg’);
- 두가지를 혼용한 것으로
- 원형이 된 것에 아이 그림이 표시됨
border-top-right-radius: 30px;
- 오른쪽 상단 모서리만 둥글게

색 지정과 투명화

색의 지정방법과 요소의 투명화
css rgb ‘#ff0000’ 으로 사용
css3 rgba “#ff000007’ 로 사용.
- 혹은 background-color: rgba(0,0,0,0.7);
opacity: 0.0 ~ 1.0; 까지 투명도 지정

box 요소를 꾸미기

box-shadow : 10px
- 박스의 그림자를 표시
box-shadow : 10px 20px 5px;
- 마지막 5px는 보캐 효과
box-shadow : 10px 20px 5px rgba(0,0,0,0.3);
- 그림자의 투명도를 지정할 수 있음.
box-shadow : 10px 20px 5px 20px rgba(0,0,0,0.3);
- 그림자의 두께를 표시할 수 있음. (네번째의 20px)
box-shadow : 10px 20px 5px rgba(0,0,0,0.3) inset;
- 그림자가 반전되어 표시
box-shadow : 10px 20px 5px rgba(0,0,0,0.3) inset,
```
          5px 5px  5px red;
```
- 다중 효과 지정도 가능함.

문자에 그림자를 넣어 보자.

text-shadow: 5px 5px 3px red;
- 빨간색 그림자가 생김.
text-shadow: 5px 5px 3px red, 10px 10px 3px blue;
- 빨간색과 파란 그림자가 생김.
text-shadow: 1px 1px 0px white, 2px 2px 0 black;
- 까망과 하얀 그림자가 생김.

문자에 그라데이션을 넣어 보자.

background: -webkit-linear-gradent();
background: linear-gradient(red 10%,yellow 90%, blue 10%);
background: linear-gradient(red 10px, yello 90px, blue);
background: linear-gradient(right top, red, blue);
background: linear-gradient(45deg, red, blue);
background: radial-gradient(red,blue);
background: radial-gradient(red,yellow,blue);
background: radial-gradient(top right,red,yellow,blue);
background: radial-gradient(10px 10px,circle contain,red,yellow 90%);

요소를 변형해 보자.

caniuse.com 에서 transform 을 확인하면 -webkit-으로 머릿말을 붙이라고 한다.
가로/세로 크기 변화 :
- scale (1.2 가로축, 1.5 세로축) 크기 변화
- -webkit-transform: scale(1.2,1.5);
가로만 크기 변화 :
- -webkit-transform: scaleX(1.2);
세로만 크기 변화 :
- -webkit-transform: scaleY(1.2);
Z축만 크기 변화 :
- -webkit-transform: scaleZ(1.2);
3차원 크기 변화 :
- -webkit-transform: scale3d(1.2, 1.5, 1.7);
중심축을 바꾸어 보자.
- -webkit-transform-origin: top left;
- -webkit-transform-origin: 10px 10px;
X축으로 이동
- -webkit-transform: translateX(20px);
X축, Y축으로 이동
- -webkit-transform: translate(20px, 100px);
45도 회전
- -webkit-transform: rotate(45deg);
skewX : X축으로 찌그러지기
- -webkit-transform: skewX(45deg);
skew : x축,Y축으로 찌그러지기
- -webkit-transform: skew(45deg, 20deg);

애니메이션을 넣어 보자.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title> CSS3 공부 </title>
  <style>
    div {
      width : 100px;
      height : 100px;
      padding : 10px;
      margin: 30px;
      background-color: orange;
      border: 2px solid orangered;
    -webkit-transition-property:all;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function:ease;
    /* linear, ease-in, ease-out, ease-in-out */
    -webkit-transition-delay: 2s;
    }
    div:hover {
    height 200px;
    background-color:red;
    }
  </style>
</head>
<body>
  <div id="test1"> test1 </div>
</body>
</html>

변화할 방향지정
- -webkit-transition-property:all;
변화할 기간
- -webkit-transition-duration: 1s;
변화 방법
- -webkit-transition-timing-function:ease;
- / linear, ease-in, ease-out, ease-in-out /
변화 지연시간
- -webkit-transition-delay: 2s;
한번에 쓸 경우
- -webkit-translation: all 1s ease 2s;

키 프레임을 사용한 애니메이션

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title> CSS3 공부 </title>
  <style>
    div {
      width : 100px;
      height : 100px;
      padding : 10px;
      margin: 30px;
      background-color: orange;
      border: 2px solid orangered;

    /*
    animation-name:
    animation-duration:
    animation-timing-function:
    animation-delay:
    animation-iteration-count:
    animation-direction:
    */
      -webkit-animation: animationTest 5s ease 1s infinite normal;
    }
    @-webkit-keyframes animationTest{
    0% {width: 50px; background: orange;}
    50% {width: 100px; background: blue;}
    100% {width: 200px; background: yellow;}
    }
  </style>
</head>
<body>
  <div id="test1"> test1 </div>
</body>
</html>

animation 이라고 설정해 놓고.

  /*
  animation-name: animationTest;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal / alternate
  */
    -webkit-animation: animationTest 5s ease 1s infinite normal;

@-webkit-keyframes animationTest로 해서 지정한다.

  @-webkit-keyframes animationTest{
  0% {width: 50px; background: orange;}
  50% {width: 100px; background: blue;}
  100% {width: 200px; background: yellow;}
  }

속성 셀렉터를 사용해 보자

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title> CSS3 공부 </title>
  <style>
    a[href="http://dotinstall.com"] {
     color:yellow;
    }
  </style>
</head>
<body>
  <h1> links </h1>
  <ul>
    <li> <a href="http://dotinstall.com">dotinstall.com</a></li>
    <li> <a href="http://google.com">google.com</a></li>
    <li> <a href="http://yahoo.co.jp">yahoo.co.jp</a></li>
    <li> <a href="mailto:hephaex@gmail.com">mail to me</a></li>
  </ul>
</body>
</html>

에서 속성을 지정한다.

예시 1 (특정)

   a[href="http://dotinstall.com"] {
   color:yellow;
  }

예시 2 (전부)

   a[href*="com"] {
   color:yellow;
  }

예시 3 (전방참조)

   a[href^="http"] {
   color:yellow;
  }

예시 4 (후방참조)

   a[href$="jp"] {
   color:yellow;
  }

n번재 요소를 지정해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title> CSS3 공부 </title>
  <style>
    /* nth-child */
    div p:nth-child(2) {
    color:red;
    }
  </style>
</head>
<body>
<div>  
  <h1> example </h1>
  <p>안녕하세요.</p>
  <p>안녕하세요.</p>
  <p>안녕하세요.</p>
  <h2> middle </h2>
  <p>안녕하세요.</p>
  <p>안녕하세요.</p>
  <h2> middle </h2>
  <p>안녕하세요.</p>
  <p>안녕하세요.</p>
  <p>안녕하세요.</p>
<p>안녕하세요.</p>
</div>
</body>
</html>

2번째 p요소를 지정

  div p:nth-child(2) {
  color:red;
  }

5번째 p요소를 지정

  div p:nth-child(5) {
  color:red;
  }

5번째 모든 요소를 지정

  div p:nth-child(5) {
  color:red;
  }

홀수번째 모든 요소를 지정

  div *:nth-child(odd) {
  color:red;
  }

3n+1번째 모든 요소를 지정

  div *:nth-child(3n+1) {
  color:red;
  }

마지막 모든 요소를 지정

  div *:last-child(odd) {
  color:red;
  }

단 하나의 모든 요소를 지정

  div *:only-child(odd) {
  color:red;
  }

어떤 요소에서 n번째를 요소를 지정
```
  div p:nth-of-type(2) {
  color:red;
  }
```
어떤 요소에서 첫번째를 요소를 지정
```
  div p:first-of-type {
  color:red;
  }
```

요소의 상태를 지정하는 셀렉터

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title> CSS3 공부 </title>
  <style>
    input[type="text"]:disabled {
    font-weight:bold;
    } 
    input[type="text"]:enabled {
    border:1px solid red;
    }
    input[type="radio"]:checked + label{
    font-weight:bold;
    }
  </style>
</head>
<body>
<div>  
  <h1> example </h1>
  <p>Username <input type="text" name="user_name" value="hephaex" disabled></p>
  <p>Email: <input type="text" name="email"></p>
  <p>
    <input type="radio" name="opt1" value="1"> <label> iPhone </label>
    <input type="radio" name="opt1" value="2"> <label> Android></label>
  </p>
</div>
</body>
</html>

특정 요소를 선택하고 속성을 지정할수 있다.

    input[type="text"]:disabled {
    font-weight:bold;
    } 
    input[type="text"]:enabled {
    border:1px solid red;
    }
    input[type="radio"]:checked + label{
    font-weight:bold;
    }

Generator

css3maker
border-radius
css3button
colorzilla

Man Seok Techne Schoe

2011년 5월 6일 금요일

CSS3 요약