엘리스 3,4일차 온라인/실시간 강의(transform, transition,animation,keyframs,mediaquery)

움직이는 웹사이트 제작

1. Transform

   rotate, scale
   -> rotate(회전값:45deg)
   -> scale(확대 축소:x,y)

   skew, translate
   -> skew(각도 변경: 10deg, 20deg)
   -> translate(위치 변경: 100px; 200px);

2. Transition

   property, duration
   -> transition-property : 효과를 적용하고자 하는 css속성
   -> transition-duration : 효과가 나타나는데 걸리는 시간

   timing-function, delay
   -> transition-timing-function : 효과의 속도
   ex) linear : '일정하게'라는 의미
   -> transition-delay : 1s '1초 후'에 효과시작

   Hover
   transition:hover {width:300px}
   -> 마우스를 올렸을 때 넓이가 300px로 늘어남
   !! 띄어쓰기 없이 code를 작성해야함 !!

3. Animation

   Animation은 CSS스타일을 부드럽게 전환시켜준다. 이때 애니메이션의 중간상태를 나타내는 @keyframs들로 이루어진다.
   .iteration-count : 애니메이션 반복 횟수 ex) infinite
   .direction : 애니메이션 진행 방향
   1.alternate : from->to->from 2.normal : from->to, from->to 3.to->from, to->from

   animation-delay : 엘리먼트가 종료 된 후 애니메이션이 시작되는 시점을 지정
   animation-name : 애니메이션의 중간 상태를 지정한다. 중간상태는 @keyfromas규칙을 이용해 기술
   animation-play-state : 애니메이션을 멈추거나 다시 시작가능

4. Animation 응용

	.box{
    	animation-name : eliceBox
        background-color : white;
    }
    @keyframs eliceBox{
    	background-color : purple;
    }

	white->purple
    

Media Query (미디어쿼리)

media query?
PC뿐 아니라 모바일, 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용하는 CSS구문

쉽게 설명하자면 사용자가 보기 편리하게 웹사이트 창을 최대부터 최소까지 동작을 만들어 꾸며주는 것이다. 같은 쇼핑몰이더라도 PC에서 볼때 / 스마트폰으로 볼 때 다르듯이

이것의 핵심이 "미디어 쿼리" 이다.

.media{
	width:500px;
    height:500px;
    background-color : red;
}

@media (min-width: 300px) and (max-width:300px){
	width: 250px;
    height: 300px;
    background-color : blue;
}

-> 브라우저의 가로폭이 최소 300px가 되었을 때 color는 red->blue로 변경

viewport : 너비와 배율을 설정할 때 사용하는 meta-tage 속성
사용법
->

<meta name-"viewport" content-"width=device-width, initial-scale=1.0">