반응형웹을 만들기 위해서는 transform, transition, animation의 세 가지 속성을 사용한다.
반응형웹
1. Transform
웹사이트의 특정 영역에서 object의 각도,크기,위치 변경시 사용.
rotate: 입력한 각도만큼 회전
scale(width,height):확대/축소, 축소할 때는 소수값
skew(x,y):x를 y축을 기준으로 입력한 각도(10deg,20deg)만큼 비튼다.
translate(x,y): 선택한 오브젝트의 좌표 변경
prefix: 다른 버전의 브라우저에서의 실행을 원할 경우 사용한다. (예시:-webkit-,-mox-,-ms-,-o-)
2. Transition
transition:특정 조건 하에 애니메이션이 동작되는 과정을 보여주고자 할 때 사용.
transition-property: transition을 적용할 CSS속성. 여러개 지정시 width,height; 기본값은 all이다.
transition-delay: transition이 실제로 시작할 때까지의 지연시간
transition-timing-function: transition의 진행 속도,linear(일정하게)
transition-duration:transition이 지속되는 시간(빨간색에서 노란색이 될때까지 얼마나의 시간이 걸리는지)
가상 선택자 (CSS에서 미리만들어놓은 클래스)
:hover
사용자의 마우스 커서가 태그 위에 올라가 있는 상태
<style>
.transition{
transition: width(property) 5s(duration) linear(timing-function) 0.5s(delay);
}
.transition: hover { width: 300px; }
</style>duration이 먼저 오고 delay가 뒤에 온다!
1초 뒤에 2초 동안 width가 일정한 속도로 변화함
hover시에는 width가 300으로 변화.
이 코드 실습하는데 변화가 안 되서 아 왜그러지? 크롬문제인가? 디코에 질문했는데 알고보니 그냥 본인 성격이 급했던 탓,,,^^ 8282고치자~~!
delay
Animation
마우스 움직임과 상관없이 실행
animation-name(애니메이션의 이름):changeWidth;
animation-iteration-count(애니메이션 반복횟수):6;(6회반복)
animation-direction(애니메이션 진행 방향):alternate;
- alternate: from->to->from (반복효과를 주고 싶을 때)
- normal:from->to,from->to
- reverse: to->from,to->from
@keyframes(애니메이션을 사용하기 위한 명령어) changeWidth(애니메이션 이름){
from { width:300px;} /**300픽셀로 시작**/
to{width:600px;} /**600픽셀로 끝남**/animation:roatate 2s linear 1s 5(횟수) alternate;로 한 줄로 적을 수도 있다.
Transform & Animation
.box1 {
animation: rotation(애니메이션 이름) 1500ms(1000ms=1초,1.5초) linear infinite(무한반복) alternate;
}
@keyframes rotation {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}자동으로 -10~10도로 회전하는 애니메이션 생성됨
.box1 {
-webkit-animation: rotation 3s linear 1s 6 alternate;
}
@-webkit-keyframes rotation {
from {-webkit- transform: rotate(-10deg); }
to {-webkit- transform: rotate(10deg); }
}prefix를 적용하고자 한다면, animation 설정을 줄 때와 keyframes를 설정할 때 모두 prefix를 적어줘야 한다.
미디어 쿼리
pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해서, 모바일에 대응되는 반응형/적응형 웹사이트를 만들 때 사용되는 CSS 구문
@media (min-width: 320px) and (max-width: 800px) {
width: 300px;
height: 300px;
background-color: yellow;
}브라우저의 가로 길이를 확인하고 320px이상 800px이하일 경우, 너비와 높이를 300, 배경을 노란색으로 지정해주는 코드.
@media (min-width: 320px) and (max-width: 700px) {
width: 300px;
height: 300px;
background-color: pink;
}여담
@media (min-width: 320px) and (max-width: 700px) {
width: 300px;
height: 300px;
background-color: pink;
}
.doguri{
background-color:white;
}
doguri 클래스에 화면이 320~700인 경우에 배경색을 핑크로 바꾸는 코드를 만들었다. 그런데 위의 코드를 적용해도 계속 실행이 안 되서 왜 그런가 봤더니
@media (min-width: 320px) and (max-width: 700px) {
width: 300px;
height: 300px;
background-color: pink;
}
.doguri{
background-color:white;
}
media 안에 doguri 클래스 선택자가 없었다! 예문이 다 선택자 없는 걸로만 나와서 아무생각없이 이러고 줬었던 거였다. 어이가 없다 증말,,,
@media (min-width: 320px) and (max-width: 700px) {
.doguri{
width: 300px;
height: 300px;
background-color: pink;
}
}
.doguri{
background-color:white;
}올바른 코드!
미디어쿼리 사용시 주의사항
미디어쿼리를 사용할 때는 viewport를 사용해주는 게 좋다. viewport는 PC,스마트폰,태블릿 등의 기기에서 화면에 표시되는 영역을 의미하고, 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나이다meta태그: html5에서 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용된다. head 태그 내의 코드들이 대부분 그렇듯이, 웹페이지에 나타나지 않는다. charset,content,name 등의 속성을 갖는다.
<meta name="viewport" content=
“width=device-width, initial-scale=1.0”
>미디어쿼리 사용시 필수 속성들
viewport의 너비==기기의 너비
initial-scale: 초기 비율
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
}
}위의 코드에서 배경색은 항상 yellow가 된다.
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: none;
}
}배경색을 화면 크기에 따라 조절하고 싶다면 background-color:none을 미디어 쿼리 안에 넣으면 된다.
미디어쿼리 작성시에는 기본값으로 적용할 선택자와 그에 대한 속성을 먼저 입력하고 그 아래에 미디어 쿼리를 입력하는 것이 좋다!
CSS 선택자 작성시 주의할 점
id와 클래스를 동시에 쓸 경우, #id .class 꼭 사이에 띄어쓰기~!~!
내일은 오늘까지 배운거로 웹사이트 만들기 실습을 해보자...
