2,3일차 수업하면서 작성한거 다 날라감ㅠ
1.transform : 오브젝트 조절에 사용되는 속성
1.1 rotate : 평면적인 회전에 사용 , 음수도 가능
1.2 scale : 확대, 축소에 사용, scale(width, height)의 형식으로 사용
1.3 skew : x,y축을 기준으로 입력한 각도만큼 비틂
1.4 translate : x,y축으로 좌표 이동을 시킴
1.5 transform은 가장 나중에 작성한 속성만 적용됨
<style>
#try{
width : 100px;
height : 100px;
background-color : blueviolet;
margin : 200px 0 0 200px;
<!--나중에 적은 skew만 적용됨-->
transform : rotate(20deg);
transform : skew(10deg, 20deg);
}
</style>
<p id="try"></p>2.prefix를 사용해서 다양한 브라우저의 최신버전에서 사용이 가능함
transition, transform속성값들은 css최신 언어이기 때문에 안되는 곳도 있을 수 있음
3.Transition : 변화의 과정을 보여줄 때 사용
3.1 protperty, duration, timig-function, delay등이 있음
3.1.1 transition : width 2s linear 1s의 형태로 간결하게 사용함
3.1.2 숫자중에 먼저 나오는것이 dulation
3.1.3 숫자를 하나만 사용할 경우엔 delay
3.1.4 시간값을 나타내는 속성(timing, delay)의 순서만 제외하면 순서는 마음대로
3.2 마우스를 올렸을 때를 의미하는 hover랑 많이 사용한다.
4. animation
4.1 keyframes 속성을 통해 어떻게 작동하는지 명명 ( 이때 name속성이 활용됨)
4.2 대략적인 속성은 위와 비슷함
4.3 얼마나 반복할 것인지(-iteration-count)와 어떤 방향으로 진행할 것인지(alternate)가 추가됨
4.5 한줄로 사용 가능함
4.6 prefix 에니메이션을 작성하면 keyframes도 동일하게 prefix를 달아서 작성해야 함
<style>
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name : changeWidth;
animation-duration : 3s;
animation-timing-function : linear;
animation-delay : 1s;
animation-iteration-count : 6;
animation-direction : alternate;
}
@keyframes changeWidth {
from {
width : 300px;
}
to {
width : 600px;
}
}
</style>
<p class='animation'></p>5. media query : 태블릿, 모바일 등에 대응하는 반응형,적응형
5.1 min-width,max-width로 가로폭을 설정
5.2 @media ( min) and (max) {} 의 형태로 사용. {} 안에서 새로 css를 작성
5.3 html head태그 안에 viewport가 반드시 들어가 있어야 함
<meta>5.3.1 화면의 너비와 배율의 설정을 담당하는 부분
5.4 미디어쿼리 바깥에서 사용된 css 속성은 그대로 상속됨
5.4.1 상속을 받지 않기 위해서는 none 속성을 사용해야 함