[ CSS animation ]

: transition을 통해 몇초동안 변하게 하는 것 외에도 지속적으로 변화가 계속 반복해서 발생되도록 할 때 animation을 사용한다.


<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>애니메이션 스터디</title>

    <style media="screen">

      .box{

        width:200px;

        height:200px;

        background-color:yellow;

        color:white;

      }

      .box:hover{

        background-color:red;

        color:blue;

        animation: 3s multiStepAnimation infinite; /*생성한 keyframes를 애니메이션으로 등록한다.*/

      }


      @keyframes animationName {

        from{ /*상태가 2개일 때는 from, to로만 구성해도 된다.*/

          transform:none;

          /* transform:rotate(0deg);

          transform:scale(1); */

        }

        to{

          transform:scale(2);

          transform:rotate(360deg);

        }

      }


      @keyframes multiStepAnimation{

        0%{

          transform:rotate(0deg);

        }

        25%{

          transform:rotate(90deg);

        }

        50%{

          transform:rotate(180deg);

        }

        75%{

          transform:rotate(250deg);

        }

        97%{

          transform:rotate(360deg);

        }

        100%{

          transform:rotate(0deg);

        }

      }

    </style>

  </head>

  <body>

    <div class="box">애니메이션</div>

  </body>

</html>



저작자표시 비영리

'스터디 > CSS관련 Tip' 카테고리의 다른 글

3. 자식 요소들의 배치를 편리하게 해줄 flex  (0) 2018.09.23
2. CSS3의 transform을 통한 요소 변형, 위치 제어  (0) 2018.09.23
1. CSS 관련 Tip(반응형 제작 포함) 정리  (0) 2018.09.23

[ 3. 자식 요소들의 배치를 편리하게 해줄 flex ]

: float를 이용해 요소들을 배치할 경우 box-sizing:border-box 등 margin, padding 등에 따른 배치를 구성하기가 기존에는 까다로웠지만 최근에는

 flex를 이용해 편리하게 배치할 수 있다.


<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

      /*

      flex를 사용함으로써 자식요소에 일일이 CSS 스타일을 적용할 필요가 없다.

      -> 부모 요소에만 적용하면 된다.!(엄청나군...)

      */

      .father{ /* 자식요소들의 배치는 부모에서만 지정하면 됨... */

        display : flex; /*flex를 이용하겠다.*/

        justify-content: flex-start;

        /*

        justify-content 속성 : 요소들의 가로 정렬을 담당한다.(만약 flex-direction:column으로 된 경우 세로 정렬을 담당하게 됨.)

        justify-content: center // 중앙 정렬

                       : flex-start // 왼쪽(만약 flex-direction:row-reverse일 경우 오른쪽 정렬)

                       : flex-end // 오른쪽 정렬(만약 flex-direction:row-reverse일 경우 왼쪽 정렬)

                       : space-between // 자식 요소들 사이 간격이 일정하게 배치 됨.

                       : space-around // 자식 요소 주변 공간이 일정하게 배치 됨.

        */

        align-items: center;

        /*

        align-items 속성 : 요소들의 세로 정렬을 담당한다.(만약, flex-direction:column일 경우 가로 정렬을 담당하게 됨)

        align-items : center // 세로 중앙 정렬

        align-items : baseline // 세로 시작 지점부터 배치

        align-items : stretch // 쭉 당겨서 첨부터 끝까지 닿도록 배치

        align-items : flex-start // top부터 정렬 (만약 flex-direction:column-reverse일 경우 아래부터 정렬)

        align-items : flex-end // bottom부터 정렬(colum-reverse일경우 위부터 정렬)

        */

        flex-direction:row;

        /*

        flex-direction 속성 : flex 자식들의 배치 방향을 결정지음

        flex-direction : row // 왼쪽부터 오른쪽으로 수평 배치 1,2,3,4,...

        flex-direction : row-reverse // 수평배치하되 거꾸로 4,3,2,1 로 배치

        flex-direction : column // 수직으로 배치

        flex-direction : column-reverse // 수직으로 배치하되 역순으로 배치

        */

        flex-wrap: wrap;

        /*

        flex-wrap 속성 : 화면을 축소할 경우 자식들의 배치를 어떻게할 것인가를 결정 지음

        -> 따로 설정하지 않으면 default가 flex-wrap : nowrap임 따라서, 배치된 그 상태로 크기를 줄여가며

        배치는 바끼지 않도록 줄어들게 됨

        flex-wrap : wrap; // 으로 지정시, 웹브라우저를 축소해 배치가 깨지게 되면 자동으로 아래로 내려가도록 함

        */


      }

      .box{ /* 자식 요소들은 그냥 크기 정도만 설정하면 됨... */

        width:200px;height:200px;background-color:yellow;margin-top:5px;margin-right:5px;

      }

    </style>

  </head>

  <body>

    <div class="father">

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

    </div>

  </body>

</html>



-> 추가적으로 flex를 연습해볼 수 있는 사이트

http://flexboxfroggy.com/#ko

저작자표시 비영리

'스터디 > CSS관련 Tip' 카테고리의 다른 글

4. CSS animation  (0) 2018.09.23
2. CSS3의 transform을 통한 요소 변형, 위치 제어  (0) 2018.09.23
1. CSS 관련 Tip(반응형 제작 포함) 정리  (0) 2018.09.23

[ CSS3의 transform을 통한 2D, 3D 제어 ] 

-> 단, IE8아래부턴 적용되지 않는다.


1.  translae : 현재 위치한 기준점을 기준으로 요소를 x, y, z 축으로 이동한다. -> position:relative를 이용해 대채할 수 있다.

   transform : translate(x축으로 이동할 거리, y축으로 이동할 거리)

   transform : translateY(y축으로 이동할 거리)

   transform : translateX(x축으로 이동할 거리)

   transform : translateZ(z축 즉 앞뒤로 이동할 거리) // Z축은 3D이기 때문에 perspective : 원근감값 을 지정해 주어야 한다.


2. skew : x, y 축으로 요소를 비튼다

 transform : skew(x축으로 비틀정도deg, y축으로 비틀정도 deg)

 transform : skewX(x축으로 비틀정도deg)

 transform : skewY(y축으로 비틀정도 deg)


3. scale : x, y 축으로 대상을 확대한다.

 transform : scale(1.5) 

 transform : scaleX(2)

 transform : scaleY(0.5)


4. roate : x, y 축을 기준으로 대상을 회전한다.

 transform : roate(x축 회전 deg, y축 회전 deg)

 transform : roateX(x축 회전 정도 deg)

 transform : roateY(y축 회전 정도 deg)


5. transition : all 0.5s 

-> transform같은 경우는 hover되었을 때나 그런 경우 지정되는 경우가 많은데 이때, hover되기 전과 후에 css 변화에 대해 몇초에 걸쳐

    변화가 이루어 질 것인가에 대한 부분으로 이것을 지정하지 않으면 요소가 변형되는 것이 티가 나지 않아 효과를 확인하기 어렵다.

-> 이때, transition : all 0.5s(몇초에 걸쳐 변할지) 를 지정할 때는 원본에 지정해야 한다.

ex) 특정 문구가 hover시 밖에서 안으로 들어오는 예제일 경우

.testClass{position:relative;}

.testClass p{position:absolute; left:-100%; top:0%; transition:all 0.5s;} // -100%를 줘 밖으로 틔어 나가있게 했다.

.testClass p:hover{left:0%;} // hover시 텍스트가 안으로 들어오게 left:0%; 로 바까준다.

-> 이때 변경이 이러나기 전인 원본에 transition:all 0.5s 를 지정해 주어야 한다.


6. transform-origin : transform이 되는 기준점을 변경하는 속성 

transform-origin : center center // 요소의 중심을 기준점으로

transform-origin : left top // 왼쪽 위를 기준점으로 변경

transform-origin : 50% 50% // 요소 중심을 기준점으로

transform-origin : 50px 20px


7. perspective : 원근감 정도( 값이 낮을 수록 왜곡 정도가 심해진다.)

-> 3D 적인 효과를 낼 때에는 적용해야 한다.

저작자표시 비영리

'스터디 > CSS관련 Tip' 카테고리의 다른 글

4. CSS animation  (0) 2018.09.23
3. 자식 요소들의 배치를 편리하게 해줄 flex  (0) 2018.09.23
1. CSS 관련 Tip(반응형 제작 포함) 정리  (0) 2018.09.23

+ Recent posts

티스토리툴바