[HTML/CSS 심화] 미디어 쿼리, keyframes, Canvas

play·2022년 7월 22일

HTML/CSS

목록 보기

5/5

Chapter3. 반응형 웹(미디어 쿼리)

Chpater4. CSS 애니메이션 (keyframes)

Chapter5. Canvas(캔버스)

Chapter3. 반응형 웹

여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트.
즉, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론

모바일 퍼스트(mobile first) : 사용자 경험(UX)을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것

반응형 웹 특징

하나의 URL을 기반으로 화면이 바뀐다.
장점
- 효율적인 유지보수
  - 하나의 콘텐츠에 오직 하나의 HTML 소스만 있어서 수정 시 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화되므로 유지보수에 효율적.
  - 하나의 소스 코드로 관리가 가능해서 초기개발 비용 및 유지 관리 비용의 절감 효과를 가져온다.
- 검색엔진(SEO) 최적화 유리
  - 하나의 URL을 기반으로 화면이 바뀌므로 PC/모바일용 URL이 동일하다. 따라서 사용자 접속을 효율적으로 관리할 수 있다.
단점
- 사이트 속도 저하
  - 모바일 전용 사이트에 비해 무겁다. 읽어들여야 할 소스가 많아서 데이터를 많이 소비하게 되고, 이는 사이트 속도와 직결된다.
- 웹브라우저 호환성 문제
  - 스펙 및 사양이 제각기 다르기 때문에 디자인이 깨지는 경우가 발생할 수 있다. = 디자인 자유도 떨어짐

📌 미디어 쿼리

구체적인 조건으로 기기의 특성에 필요한 스타일을 적용할 수 있게 되었다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분으로, 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있다.

미디어 쿼리 적용법

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

<head>태그 안에 <link> 태그를 위치시킨다.
다른 css 파일 적용할 때와 다른 점은, "미디어 속성을 사용하여 조건을 지정"한다는 점. 미디어 속성 내 해당 조건을 만족할 때에만 해당 css파일을 불러온다.

<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>

HTML 파일 내 <head>태그 안에서 <style>태그를 열어 미디어 쿼리를 작성할 수 있다.

CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

미디어 쿼리 구문

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

미디어 쿼리의 기본적인 구조는 다음과 같다.

미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알림
조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족될 때만 스타일이 적용됨
CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용됨

미디어 타입(Media Type)

all : 모든 미디어 타입
print : 프린터
screen : 컴퓨터 화면
speech : 스크린 리더

조건(너비 및 높이)

min-width, max-width, width 등 미디어 기능을 활용해 뷰포트가 특정 너비 이상, 이하인 경우 CSS를 적용한다.

@media screen and (width: 600px) {
	body {
		color : red;
	}
}

width(혹은 height)는 브라우저의 창 크기에 사용할 수 있다.
min- & max- 접두사를 붙이면 최대값, 최소값 표시 가능

방향성

세로모드, 가로모드인지 검사 : orientation
세로 모드: Portrait(포트레이트) 모드
가로 모드: Landscape(랜드스케이프) 모드

@media (orientation: landscape) { // 가로 방향 
    body {
        color: rebeccapurple;
    }
}

복잡한 미디어 쿼리

미디어 쿼리를 결합, 쿼리 목록을 생성하는 것 등

논리곱(and) 미디어 쿼리

and를 사용해 미디어 기능을 합칠 수 있다.

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}
// 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우 
// 두 조건을 만족해야 쿼리 안의 CSS 스타일이 적용된다.

논리합(or) 미디어 쿼리

,로 분리한다면 해당 조건 중 하나를 만족시킬 때 CSS 스타일을 적용할 수 있다. (||)

@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}
// 뷰포트의 넓이가 600px 이상이거나, 장치가 가로 방향인 경우 
// 둘 중 하나의 조건을 만족하면 쿼리 안의 CSS 스타일이 적용된다.

부정(not) 미디어 쿼리

not 연산자를 사용해 미디어 쿼리의 의미를 반대로 적용한다.

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}
// 방향이 세로인 경우에 CSS 스타일 적용됨.

Chpater4. CSS 애니메이션

여러 개의 CSS 스타일을 부드럽게 전환시켜준다.

✨ @keyframes

@keyframes : 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다.
키프레임을 활용하려면, CSS로 키프레임 블록을 만들어야 한다.

/* '%' 단위로 시간 진행에 따른 상태를 작성 */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됨*/
		CSS속성 : 속성값; 
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정 */
                  /* 필요하다면 1부터 99까지도, 소수점도 모두 작성가능*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됨*/
		CSS속성 : 속성값;
	}
}

회전하는 키프레임 애니메이션 예시

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션 */

해당 키프레임 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 불러오면 사용할 수 있다.
그런데 키프레임을 사용하기 위해서는 애니메이션 이름 외에도 다양한 속성을 작성해야한다.

animation 속성

animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
- animation-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
- animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
- animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
- animation-direction : 애니메이션 재생 방향을 지정
- animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
- animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
- animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
- animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

animation-name

애니메이션을 적용하고 싶은 요소에 animation&animation-name 속성의 첫번째 값으로 @keyframes 키워드를 사용해서 만든 애니메이션 이름을 작성.

#list { 
	animation : lotate;
} 

// 또는
#list {
	animation-name : lotate;
}

하지만 이름만 작성해줬기 때문에 애니메이션이 재생되지 않는다. 최소한 animation-name 과 animation-duration 은 지정해줘야 재생된다.

animation-dutation

애니메이션이 재생될 시간을 animation&animation-dutation 속성의 두번째 값으로 시간 단위를 작성한다. 기본값이 0이므로 작성하지 않으면 재생되지 않는다.

#list {
	animation : lotate 3s ;
}
// 또는
#list {
	animation-name : lotate;
	animation-duration : 3s;
}

animation-delay

애니메이션 재생을 미룰 시간을 지정.

#list {
	animation : lotate 3s 3s ;
}
// 또는
#list {
	animation-name : lotate;
	animation-duration : 3s;
	animation-delay : 3s;
}

animation-direction

애니메이션 재생 방향을 지정.

normal : 기본 값. 재생이 끝나면 처음부터 다시 재생
reverse : 역방향으로 재생
alternate : 순방향 → 역방향 번갈아가며 재생
alternate-reverse : 역방향 → 순방향 번갈아가며 재생

#list {
	animation : lotate 3s reverse ;
}
// 또는 
#list {
	animation-name : lotate;
	animation-duration : 3s;
	animation-direction : arternate;
}

animation-iteration-count

애니메이션 재생 횟수 지정. 기본 값은 1이다.

infinite로 설정 : 무한 반복
소수점을 작성 : 재생 도중 처음 상태로 돌아감.
- ex) 재생시간이 3초일때 0.6을 전달하면 → 3 * 0.6 = 1.8초만큼 재생된 후 처음 상태로 돌아감

#list {
	animation-name : lotate;
	animation-duration : 3s;
	animation-iteration-count : 3 ;
/* 애니메이션이 3번 반복 */
}

animation-play-state

애니메이션이 재생 상태를 설정. 기본 값인running, 애니메이션을 정지시키는 pause 를 값으로 지정할 수 있다.
보통 애니메이션 재생 상태를 변경할 때 사용

#list {
	animation : lotate 3s pause ;
}
// 
#list {
	animation-name : lotate;
	animation-duration : 3s;
	animation-play-state : pause ;
}

animation-timing-funciton

애니메이션의 진행 속도를 설정

animation-fill-mode

애니메이션 재생 전 후의 상태를 지정

none : 기본 값. 재생중이 아닌 경우 요소의 스타일을 유지
forwards : 재생중이 아닌 경우 마지막 키프레임 스타일을 유지
backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지
both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지

✨ @keyframes 중간값

키프레임을 설정하면서 주는 중간값은 애니메이션 재생 시간을 기준으로 한다.

#logo {
	**animation-name : lotate;**    /* lotate 라는 이름의 키프레임 애니메이션을 */
	animation-duration : 3s;               /* 3초 동안 재생하며, */
	animation-iteration-count : infinite;  /* 애니메이션을 무한 반복하고, */
  animation-timing-function : linear;    /* 선형으로 재생 */
}

/* 아래와 같이 일괄 작성해도 된다. */

#logo {
	animation : **lotate** 3s infinite linear;
}

Chapter5. Canvas(캔버스)

HTML의 <canvas> 태그와 JS를 사용하면 다양한 그래픽 요소를 만들 수 있다. ex) 도형, 데이터 시각화, 애니메이션, 웹 게임 등

1. 캔버스 태그 작성

canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성한다.
--> 엘리먼트를 선택할 때 사용할 id를 작성해주는 게 좋다.

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됨.
</canvas>

2. 자바스크립트로 엘리먼트 선택

const canvas = document.querySelector("#canvas");

3. 너비와 높이 설정

크기를 설정하지 않으면 기본적으로 300픽셀 * 150픽셀 사이즈로 생성된다.

1) 태그 속성으로 설정

width, height 속성으로 설정.

이 방법은 어떤 단위로 속성값을 설정해도 픽셀로만 인식한다.

<canvas id="canvas" width="500" height="500"></canvas>
		// 500픽셀 * 500픽셀로 설정된다.
<canvas id="canvas" width="50vw" height="40vh"></canvas>
		// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됨

2) DOM으로 설정

캔버스 크기가 고정되지 않은 경우 사용하기 좋다.

원하는 단위로 값을 명시할 수 있다.

canvas.width = 50vw;
 canvas.height = 40vh;
	// 50vw * 40vh 로 단위값을 지정해도 설정됨.

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
	// 화면 크기에 맞춰서 설정해줄 수도 있다.

캔버스로 사각형 그리기

색칠된 사각형 그리기
- a. fillStyle 속성으로 사각형 내부를 색칠할 색상 설정
```
ctx.fillStyle = 'blue'
```
- b. fillRect 메소드를 사용해 사각형 그리기.
```
ctx.fillRext = (10, 10, 100, 50)   
// x좌표, y좌표, 가로길이, 세로길이 순서.
```
선으로만 그리기
- a. lineWidth 속성으로 선의 굵기를, strokeStyle 속성으로 선의 색상을 설정
```
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
```
- b. strokeRect 메소드를 사용해 사각형 그리기
```
ctx.strokeRect(10, 10, 100, 50)
// x좌표, y좌표, 가로길이, 세로길이 순서.
```

사각형으로 지우기
clearRect 메소드로 지울 범위를 설정

ctx.clearRect( 20, 20, 80, 30)
// 그려놓은 사각형 가운데 부분을 지워보세요.

캔버스로 클릭이벤트 만들기

클릭할 때 캔버스 위에서의 마우스 위치를 구하려면,
--> 마우스 위치에서 캔버스 위치를 뺀다.
--> client - offset = 캔버스 좌표

화면상 마우스 위치를 구하는 이벤트 객체의 속성
- X좌표 : event.clientX
- Y좌표 : event.clientY
화면상 캔버스의 위치를 구하는 속성
- X좌표 : ctx.canvas.offsetLeft
- Y좌표 : ctx.canvas.offsetTop
  event.offsetX , event.offsetY 로 바로 구할 수도 있다.

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, y에 15를 
}

!importatn : 최우선적으로 고려

display: block = 고정

<> </> 빈 태그 = 박스X, 감싸주는 것

play

블로그 이사했습니다 🧳

이전 포스트

[HTML/CSS 심화] 미디어 쿼리, keyframes, Canvas

HTML/CSS

Chapter3. 반응형 웹(미디어 쿼리)

Chpater4. CSS 애니메이션 (keyframes)

Chapter5. Canvas(캔버스)

Chapter3. 반응형 웹

반응형 웹 특징

📌 미디어 쿼리

미디어 쿼리 적용법

CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

미디어 쿼리 구문

미디어 타입(Media Type)

조건(너비 및 높이)

방향성

복잡한 미디어 쿼리

논리곱(and) 미디어 쿼리

논리합(or) 미디어 쿼리

부정(not) 미디어 쿼리

Chpater4. CSS 애니메이션

✨ @keyframes

animation 속성

animation-name

animation-dutation

animation-delay

animation-direction

animation-iteration-count

animation-play-state

animation-timing-funciton

animation-fill-mode

✨ @keyframes 중간값

Chapter5. Canvas(캔버스)

1. 캔버스 태그 작성

2. 자바스크립트로 엘리먼트 선택

3. 너비와 높이 설정

캔버스로 사각형 그리기

캔버스로 클릭이벤트 만들기

[HTML/CSS 심화] 브라우저, 브라우저 렌더링

0개의 댓글