개념 - 반응형 웹 만들기 1. 미디어쿼리

반응형웹을 만들기 위해서는 미디어쿼리를 사용한다.

미디어 쿼리 적용법

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

1.CSS 파일을 HTML 파일에 적용하던 것처럼 < head >태그 안에 < link >태그를 위치 시킵니다.
다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다는 점입니다. 미디어 속성 내 해당 조건을 만족할 때에만 해당 css 파일을 불러오게 됩니다.

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

HTML 파일 내 < head >태그 안에서 < style >태그를 열어 미디어 쿼리를 작성할 수도 있습니다. 이 방법도 미디어 속성 내 해당 조건을 만족할 때에만 해당 스타일을 적용하게 됩니다.

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

미디어 쿼리 구문

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

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

1. 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줍니다.
2. 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않습니다.
3. CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용 됩니다.

많이 사용하는 기능은 뷰포트 너비이다.

max-width - 주어진 조건보다 작은 경우 css 코드 실행 ex) max-width: 400px = 400px 보다 좁은 경우 css 코드 실행
min-width - 주어진 조건보다 큰 경우 css 코드 실행 ex) min-width: 400px = 400px 보다 넓은 경우 css 코드 실행
width

참고하면 좋은 링크 : https://blogpack.tistory.com/862