[CSS] 🖼미디어 쿼리 / 🎞리플로우, 리페인트 최적화

▷ 미디어 쿼리

 미디어 쿼리 적용법 

방법 1 - HTML에 CSS링크를 가져와서 미디어 속성 사용

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

방법 2 - HTML 파일 내 head태그 안에 style태그를 열어 미디어 쿼리를 작성

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

방법 3 - CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성 ✔️

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

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

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

-------
/* 예제 2 */
/* 세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우 */
@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

/*
* 세로 모드: portrait(포트레이트) 모드
* 가로 모드: landscape(랜드스케이프) 모드
*/

---

 복잡한 미디어 쿼리 사용법 

AND - 논리곱 미디어 쿼리

/* and를 사용해 미디어 기능을 합칠 수 있다. */
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

OR - 논리합 미디어 쿼리

/* 콤마로 분리하여 해당 조건 중 어느 하나를 만족시킬 때, CSS 스타일을 적용시킬 수 있다. */
@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

NOT - 부정 미디어 쿼리

/* not 연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용시킨다. */
@media not all and (orientation: landscape) {
    body {
        color: blue; /* 세로인 경우에만 텍스트가 파란색으로 적용 */
    }
}

---

▷ 리플로우, 리페인트

리플로우 - Reflow

어떤 웹 인터랙션으로 인해 렌더링 과정의
레이아웃을 반복해 수행하는 것을 리플로우라고 한다.

리페인트 - Repaint

페인트 과정을 반복해 수행하는 것을 리페인트라고 한다.
(계산된 레이아웃을 화면 위에 그려주는 작업을 반복)

---

🎞 리플로우, 리페인트 최적화 방법

⒈ 불필요한 레이아웃 줄이기
⒉ 영향을 주는 노드를 줄이기 - position의 absolute 또는 fixed를 사용

- 리플로우가 일어나는 대표적인 속성

대체로	위치나	너비와	관련된	속성이	많다.
position	width	height	left	top	right
bottom	margin	padding	border	border-width	clear
display	float	font-family	font-size	font-weight	line-height
min-height	overflow	text-align	vertical-align	...

이 속성을 피해 transform에 있는 translate를 사용하면
위치를 이동시킬 수 있으면서도, 레이아웃을 다시 발생시키지 않고
페이트만 다시 발생시키는 쪽으로 렌더링 과정이 일어난다.

- 리페인트가 일어나는 대표적인 속성

	배경에	관련된	속성이	많다.
background	background-image	background-position	background-repeat	background-size	border-radius
border-style	box-shadow	color	line-style	outline	clear
display	float	font-family	font-size	font-weight	outline-color
visibility	...

리페인트가 일어나지 않게 해주는 opacity라는 속성이 있다.
visibility/display 보다 opacitiy를 사용하는 것이 성능 개선에 도움이 된다.

---

✚ 참고 4개의 반응형 분기점

노트북 & 태블릿 가로 : 1024px ~ 1279px
태블릿 가로 : 768px ~ 1023px
모바일 가로 & 태블릿 세로 : 480px ~ 767px
모바일 : ~479px

@media all and (min-width:1024px) and (max-width:1279px) { 
  
} 

@media all and (min-width:768px) and (max-width:1023px) { 
  
} 

@media all and (min-width:480px) and (max-width:767px) {
  
} 

@media all and (max-width:479px) {
  
}

📀keyframes, 🗞Canvas 사용법 보러가기
👉 반응형 웹사이트 참고하러 가기