- 반응형 웹
미디어 쿼리!
@media 미디어 타입 (조건(너비 및 높이)) {
(CSS 입력하는 부분)
}
--예제
@media screen (max-width: 400px) {
body {
color: red;
}
}
-
미디어 타입(Media Type)
all : 모든 미디어 타입
print : 프린터
screen : 컴퓨터 화면
speech : 스크린 리더 -
방향성
세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우, orientation으로 검사 할 수 있다.
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
} // 장치가 가로방향인 경우, 해당 코드를 통해 본문의 텍스트 색상을 변경할 수 있다.
- CSS 애니메이션
자주 사용하는 css애니메이션
- transform의 속성 활용
- animation 속성
animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한번에 지정할 수 있음
- animation-name
#logo { animation : lotate }
#logo {
animation-name : lotate;
} - animation-duration
애니메이션이 재생될 시간을 animation-duration이라는 속성으로 시간 단위로 작성해준다.
#logo {
animation : lotate 3s ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
} - animation-delay : 애니메이션 재생을 미룰 시간을 지정한다. 시작시간 설정
#logo {
animation : lotate 3s 3s ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-delay : 3s;
} - animation-direction
애니메이션 재생 방향을 지정한다.
#logo {
animation : lotate 3s reverse ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-direction : alternate;
}
- normal : 기본 값. 재생이 끝나면 처음부터 다시 재생합니다.
- reverse : 역방향으로 재생합니다.
- alternate : 순방향부터 역방향을 번갈아가며 재생합니다.
- alternate-reverse : 역방향부터 순방향을 번갈아가며 재생합니다.
- animation-iteration-count
애니메이션이 몇번 재생될지 지정한다. 기본값은 1이고 infinite로 설정할 경우 무한 반복되며 소수점으로 작성할 경우 재생 도중 처음 상태로 돌아간다.
#logo {
animation : lotate 3s infinite ;
/ 애니메이션이 무한 반복 됩니다. /
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-iteration-count : 3 ;
/ 애니메이션이 3번 반복 됩니다. /
} - animation-play-state
애니메이션이 재생 상태를 설정한다. 기본 값인 running, 애니메이션을 정지시키는 pause를 값으로 지정할 수 있다.
#logo {
animation : lotate 3s pause ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-play-state : pause ;
} - animation-timing-function
애니메이션의 진행 속도를 설정한다.
- linear , ease(기본값) , ease-in , ease-out , ease-in-out
- animation-fill-mode
애니메이션 재생 전 후의 상태를 지정한다.
none : 기본 값. 재생중이 아닌 경우 요소의 스타일을 유지합니다.
forwards : 재생중이 아닌 경우 마지막 키프레임 스타일을 유지합니다.
backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지합니다.
both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지합니다.
- Canvas
HTML문서 내부에 그림을 그릴 수 있는 일종의 컨테이너엘리먼트이다.
자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있다.
사용방법
-
캔버스태그를 작성한다.
캔버스틑 canvas엘리먼트를 DOM으로 조작하는 방식으로 작성된다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다.
< canvas id="canvas" >
캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다.
< /canvas >
자바스크립트를 사용해 엘리먼트를 선택해준다.
const canvas = document.querySelector("#canvas"); -
캔버스를 본격적으로 다루기 전에, 너비와 높이를 설정해주어야 합니다. 크기를 설정해주지 않으면 기본적으로 300픽셀 150픽셀의 사이즈로 생성
< canvas id="canvas" width="500" height="500">< /canvas>
// 500픽셀 500픽셀로 설정됩니다.
< canvas id="canvas" width="50vw" height="40vh">< /canvas>
// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됩니다.
ex) 캔버스로 사각형 그리기
-
색칠된 사각형 그리기
fillStyle 속성으로 사각형 내부를 색칠할 색상을 설정해줍니다.
ctx.fillStyle = 'blue'
fillRect 메소드를 사용해 사각형을 그려줍니다.
ctx.fillRext = (10, 10, 100, 50)
//전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다. -
선으로만 그리기
lineWidth 속성으로 선의 굵기를, strokeStyle 속성으로 선의 색상을 설정해줍니다.
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
strokeRect 메소드를 사용해 사각형을 그려줍니다.
ctx.strokeRect(10, 10, 100, 50)
//전달 인자는 이번에도 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다.
//위에서 그려준 색칠된 사각형 바로 위에 그려보세요. -
캔버스로 클릭이벤트 만들기
화면상 마우스 위치를 구하는 이벤트 객체의 속성
X좌표 : event.clientX
Y좌표 : event.clientY
화면상 캔버스의 위치를 구하는 속성
X좌표 : ctx.canvas.offsetLeft
Y좌표 : ctx.canvas.offsetTop
canvas.onclick = function (event) {
const x = event.clientX - ctx.canvas.offsetLeft
const y = event.clientY - ctx.canvas.offsetTop
// 구한 좌표를 이용해서 사각형을 그리는 코드를 작성해보겠습니다.
ctx.fillRect(x - 15, y - 15, 30, 30);
// 클릭할 때마다 30픽셀*30픽셀 크기의 사각형을 그리도록 하려고 합니다.
// 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되어 어색한 느낌을 줍니다.
// 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼주면 됩니다.
// 따라서 x - 15, y - 15 를 전달합니다.
}
Canvas를 기반으로 한 유용한 라이브러리 Chart.js
< header > 안에 script태그를 열고 CDN주소를 넣어준다
< script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" >< /script>
- styled component에서 CSS animation 활용하기
import styled {keyframes} from 'styled-components';
const code=keyframes 0% { transform: translate(0 , 0); } 100% { transform: translate(200px , 0); } ;
animation:{code} 2s linear infinite;
