CSS* 반응형웹, 애니메이션, Flexbox

반응형 스타일을 하는 법

 

웹페이지➟ 콘솔➟ 스타일➟ 왼쪽 위버튼➟ 설정하려는 해상도변경➟ 수정하고싶은 부분의 태그 복사➟ vscode에 복사 

➟ media(max-width) { 이 곳에다 수정사항을 다 넣기 명시도 중요!!!  } 

 

 

 

 

 

 

애니메이션

<style>
    .box {
      width: 100px;
      height: 100px;
      background: greenyellow;

    }

    .box:hover {
      /* animation: grow-shrink 2s; */
      animation-name: grow-shrink;
      animation-duration: 4s;
      /* animation-delay: 500ms; */

      /* 반복횟수 */
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-direction: alternate;

      animation: grow-shrink 2s 500ms
      infinite linear alternate;
    }

    /* 애니메이션 정의 */
    @keyframes grow-shrink {
      0% {
        width: 100px;
        background: greenyellow;
      }

      50% {
        width: 500px;
        background: orange;
      }

      100% {
        width: 300px;
        background: violet;
      }
    }
  </style>

 

 

키프레임을 사용해서 설정값을 정해주고 위 코드와 같은 명령어로 실행하면 된다. 

0% ➟ 100%  정방향 으로 움직인다. 100% ➟ 0% 는 역시 역방향이라 생각 하면 된다.

 

 

 

 

 

  <style>
    .box {
      width: 100px;
      height: 100px;
      background: tomato;
      margin: 30px;

      animation: rotation 2s linear infinite;
      animation-direction: alternate-reverse;
    }


    @keyframes rotation {
      0% {
        transform: translate(0, 0);
      }
      25% {transform: translate(100px, 0);
      }
      50% {transform: translate(100px, 100px);
      }
      75% {transform: translate(0, 100px);
      }
      100% {transform: translate(0, 0);
      }
    }
  </style>

 

rotation 이라는 가상의 설정값을 만들어준다. transform translate을 이용해서 움직이는 듯한 제스쳐를 만들어낼 수 있다. 

100% 로 갈수록 픽셀값을 바꿔서 위치를 옮겨준다. 마치 만화의 한컷들을 모아놓듯이

 

 

 

 

 

.box {
      width: 100px;
      height: 100px;
      background: tomato;
      margin: 30px;
      transform: translate(0,0);
      animation: moving 2s 1s;
      animation-fill-mode: backwards;
    }

    @keyframes moving {
       /* 0 % to 100 % 랑같다 */
      from {
        background: dodgerblue;
        transform: translate(100px, 100px);
      }         
      to {
        background: yellowgreen;
        transform: translate(300px, 100px);
      } 
    }

 

역시 키프레임을 만들어준다. 픽셀값으로 이동해주는 방식의 응용이다. 하지만 backwards를 써서 되돌아간다. 

dodgerblue색에서 시작해서 yellowgreen으로 갔지만 원래인 tomato로 돌아가는 것이다. 만약에 yellowgreen에 forwards를 쓰면 쭉 남아있게 된다.

 

 

 

 

.box {
            width: 100px; 
            height: 100px;
            background: tomato;
            text-align: center;
            line-height: 100px;
            animation: size-up 3s linear infinite alternate;
        }
        @keyframes size-up {
            0% {
                width: 100px;
            }
            100% {
                width: 100%;
            }
        }
        .box::before {
            content: '재생중';
            font-size: 24px;
            font-weight: 700;
            color: #fff;
        }
        .box:hover {
            background: skyblue;
            animation-play-state: paused;
        }
        .box:hover::before {
            content: '중지!';
            color: #000;
        }

 

위 코드에서는 linear, infinite, alternate를 통해 각 다른 명령을 내릴 수 있다. infinite를 사용하면 해당명령을 계속 반복하게 된다.

 

 

 

 

 

 

 

 

flex

 

inline -block, float과같이 수평만들때에도 사용이 주로되는데, 유용하다.

 

 

 

 

<style>
    .container {
      border: 2px solid red;
      padding: 20px;
      display: flex;
      /* flex-direction: column; */
      /* 반응형에 위에 한줄만 바꿔주면 되서 용이 */
    }
    .item {
      width: 100px;
      height: 100px;
      border: 2px solid orange;
      border-radius: 15px;
    }
  </style>

 

부모요소에 반드시 display: flex를 해주어야 한다. column은 세로방향을 row는 가로 방향을 지시할 수 있다. flex-direction은 수정에 용이하다

 

 

 

 

display: flex;
      flex-direction: row;
      flex-wrap: wrap;

 

wrap을 이용하여 정렬을 좀더 통통하게 해줄 수 있다.  긴 줄을 여러줄로 나누어 쌓는다.

 

 

 

 

 

      height: 600px;
      border: 4px solid #000;
      /* padding: 20px; */
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      /* evenly는 끝쪽 빈 공간도 만들어줌 */
      /* justify-content: space-evenly */
      /* direction 에 따른 정렬 주축에 따라 달리 정렬됨*/

 

space-evenly는 끝쪽 빈공간도, space-between은 요소사이 간격을, space-around는 끝쪽과 요소사이사이 균형있게 공간배치한다.

 

 

 

 

      display: flex;
      justify-content: center;
      align-items: center;

 

세로냐 가로냐에 따라 축을 따라 가운데정렬을 할 수 있다.

 

 

      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* order에 따라 순서를 바꿀 수 있다  */
    .box:nth-child(1){
      order: 1;
    }
    .box:nth-child(2){
      order: 0;
    }
    .box:nth-child(3){
      order: 2;
    }

 

order를 사용하면 축에 따라 순서를 정할 수있다. 예를들어 가로방향 일 때 축은 왼쪽에서 오른쪽으로 흐른다. 

단, 축을 column-reverse, row-reverse 등으로 반대로 두었을 경우는 반대로 생각하면 된다.