노마드코더 코코아톡 클론코딩 #4 수강일지

(개인확인용도/간단정리)

• Advanced CSS
  • Transition (어떤상태(state)에서 다른상태(state)로 가는 변화를 애니메이션화)
  • ex) "a" tag가 hover(마우스가 올려진) 상태일 때, green으로 변하는데
    transition으로 10s간 천천히 변하도록 함

a {
	transition : background-color 10s ease-in-out;
    }
    a:hover {
    background-color: green;
    }

조건 1. 어떻게 상태를 변화시킬지 state(ex.hover)쪽에 적어주어야 함

조건 2. transition 코드는 처음 생겨난 태그(root)의 element에 적어주어야 함(그래야 마우스를 뗀상태에서도 동작)

 

• ease-in function : 브라우저에게 변화하는 방법(속도)을 알려주는 역할
  linear - 변화 그래프가 직선
  ease-in - 시작과 끝이 빠름
  ease-out - 시작과 끝이 느림
  ease-in-out - 시작이 빠르고 끝이 느림

---

• Transformantion (다른 상태로 변형 시킬 수 있음)(animation이나 3d처럼 만들 수 있음)
  - 변형할 때 다른 box element나 이미지에 영향을 끼치지 않음
• ex) img위에 마우스가 올려져 있을 때 Y축으로 360도 회전하고, transition을 통해 5초동안 ease-in-out으로 회전시킴

img {
	transition: transform 5s ease-in-out;
    }
    img:hover{
    transform:rotateY(360deg)
    }

 

• Animation (transform과 달리 어떤 조건 없이 바로 실행 가능)
• ex1) @keyframes + animation이름 적어주고 시작상태와 끝 상태를 알려준다음
  animation 속성을 통해 자동으로 실행되게 만들 수 있음

<style>
	@keyframes animationName {
    	from{
        	transform: rotateX(0);
        }
        to {
        	transform: rotateX(360deg);
        }
    }
    
    img {
    animation: animationName 5s ease-in-out infinity;
    }

ex2) %를 사용해 반복 되는 움직임 표현가능(숫자는 0~100 사이 여러개 사용가능)

	@ keyframes animationName {
    	0%{
        	transform: rotateX(0);
        }
        50% {
        	transform: rotateX(180deg);
        }
        100% {
        	transform: rotateX(0deg);
        }
    }
    
    img {
    animation: animationName 5s ease-in-out infinity;
    }

* opecity(불투명도) 값 설정해서 사라지기 가능

 

• Responsible website(반응형 웹사이트)
  • Media query (화면의 크기를 감지하고 그 화면에 따라 나타나는 css를 변경시키는 기능)
  • ex) "@media screen and" 뒤에 조건을 설정

@media screen and (min-width: 650px) and (max-width: 750px) and (orientation: landscape) {
	div {
    background-color : tomato;
    }

* 적용시킬 element(위에선 div)를 넣어줘야 함

cf)

- orientation : landscape(가로모드) / portrait(세로모드) 일 때

- min-device-width / max-device-width (휴대폰에서만 적용되는 값 / 데스크탑에서는 적용되지 않음)