[엘리스 sw 엔지니어 트랙] 4일차 CSS 모바일 대응, 애니메이션

13501 단어 엘리스부산CSS코딩캠프CSS

수업 4일차

한주를 마무리 하기전 정신력이 떨어져가는 날이다.
실습 내용은 엘리스의 과제여서 아주 쉬운 것으로 대신 탑재한다.

이론

  • CSS
    Transform : 웹사이트의 특정 영역에서 오브젝트의 각도, 위치 변경
    rotate : 입력한 각도만큼 회전, 음수도 입력가능
    scale : 확대, 축소, 숫자는 비율을 의미
    skew : 입체적으로 각도를 비틀때 사용
    translate : 선택한 오브젝트의 좌표 변경(위치 변경)
    prefix 접두사 : CSS 최신버전 내용이여서 다른버전의 브라우저에서의 실행을 원할경우 작성
    webkit(크롬, 사파리), moz(파이어폭스), ms(익스플로러), o(오페라)
    Transition : 변화하는 과정을 보여주는것
    transition-property : 효과를 적용하고자 하는 css 속성
    transition-duration : 효과가 나타나는데 걸리는 시간
    transition-timing-function : 효과의 속도, linear(일정하게)
    transition-delay : 특정 조건 하에서 효과 발동(1s : 1초뒤에 효과 시작)
    hover : css에서 미리 만들어 놓은 클래스, '마우스를 올렸을 때' 라는 조건
    transition : width 2s(duration) linear 1s(delay) - 먼저 나오는 숫자는 duration 두번째 delay
    Animation : 시각적 효과를 만들때 사용
    animation-name : 만드는 애니메이션 이름 정의
    animation-duration : 애니메이션이 동작하는데 걸리는 시간
    animation-timing-function : 효과의 속도
    animation-delay : 애니메이션이 특정 조건 하에서 효과 발동
    animation-iteration-count : 애니메이션 반복 횟수
    animation-direction : 애니메이션 진행 방향
    alternate : from -> to -> from
    normal : from -> to, from -> to
    reverse : to -> from, to -> from
    @keyframes : 변화를 줄 결과값을 입력
    미디어쿼리 : pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 사용되는 구문
    min- width,max-width : 브라우저 가로폭 설정
    viewport : 미디어 쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 너비와 배율을 설정해야함

실습

사각형의 형태을 만들어진 상태

keyframes를 적용 하여 우로 10도 좌로 10도 왕복하는 이미지 완성

```

Document
``` 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: red;
        animation: rotation 1500ms linear infinite alternate;
      }
      @keyframes rotation {
        from {
          transform: rotate(-10deg);
        }
        to {
          transform: rotate(10deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

브라우저 너비가 800px이상일때

브라우저 너비가 320px 이상 800px 이하일때
media를 사용하여 변경한다

```

Document
``` 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .media {
        width: 500px;
        height: 500px;
        background-color: yellow;
      }
      @media (min-width: 320px) and (max-width: 800px) {
        .media {
          width: 100px;
          height: 100px;
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <div class="media"></div>
  </body>
</html>
@Transactional 과 PROXY
[Python] 백준 20061 모노미노도미노 2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage