DevSSOM
HTML, CSS - 미디어 쿼리 본문
미디어 쿼리
PC 뿐만 아니라 모바일과 태블릿으로 웹사이트에 접속해도 기기 사이즈에 맞춰서 레이아웃이 자연스럽게 변경될 수 있도록 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문. 반응형은 브라우저 폭을 줄이거나 늘렸을 때 자연스러운 리사이즈 효과가 나타나는 사이트들을 말하고, 적응형은 뚝뚝 끊겨서 레이아웃의 변화나 폰트 크기가 달라지는 사이트들을 말함.
media
.media {
width: 500px;
height: 500px;
background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: yellow;
}
}@media를 입력하고 하나는 최소로, 하나는 최대로 범위를 설정하기. min-width와 max-width로 브라우저 가로폭을 설정. 사용자가 웹사이트에 접속을 했을 때, 그 사용자가 모바일로 접속을 했는지, 태블릿으로 접속을 했는지 직관적으로 아는 방법은 기기의 가로폭 사이즈를 보는 것. 그래서 그 기기의 가로폭 사이즈를 설정해 놓는 작업 자체가 미디어 쿼리. 미디어 쿼리는 가로폭을 설정해놓는 것 외에는 별다른 기능이 없음.
위의 예시에서 원래는 500px, 500px에 red였는데, 브라우저의 가로폭이 최소 320px에서 최대 800px이 되는 사이의 구간에서는 300px, 300px로 바꾸고 배경 컬러는 yellow로 변경해라 라고 조건을 설정해준 것.
미디어 쿼리가 정상적으로 출력되는지 확인하는 방법
1) 크롬 개발자도구에서 확인하기. 2) 다음에서 만든 Troy Labs 서비스를 이용하기.
미디어 쿼리 사용 시 주의사항
1) 메타 태그의 viewport 속성값 반드시 입력하기
모바일이나 태블릿은, 미리 설정되어 있는 viewport로 인해 미디어 쿼리가 제대로 작동하지 않을 수 있음. 그래서 미디어 쿼리를 사용할 때는태그의 속성 중 하나인 viewport를 입력해서 넓이와 배율을 조절함. 아래의 코드가 HTML의 <head> 태그 안쪽에 반드시 들어가 있어야 함. 이 코드가 없으면 미디어 쿼리가 모바일이나 태블릿에서 정상적으로 작동되지 않음.
<meta name="viewport" content="width=device-width, initial-scale=1.0">여기에서 viewport는 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미. 그래서 이 코드 전체가 기기 화면에 웹사이트를 배율에 따라 표기할 때 도와줌. <meta>의 속성인 name과 content는 쉼표 없이, 한 칸 띄어서 이어쓰면 됨.
content는 너비와 배율을 설정할 때 사용하는 메타 태그의 속성으로, width=device-width는 가로폭을 기기의 가로폭으로 대체하겠다는 의미. 그리고 initial-scale=1.0 은 화면의 초기 비율을 항상 1.0으로 유지시키겠다는 뜻. 이걸 안써주면 모바일에서 비율이 깨진 형태로 나타나게 될 수 있음. 미디어 쿼리를 썼다면 위의 한 줄은 디폴트로 입력해주기.
2) CSS 속성은 상속된다
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
}
}미디어 쿼리 바깥 쪽에서 background-color를 yellow로 쓰고, 미디어 쿼리 안쪽에서는 그냥 width 값과 height 값만 설정해 놓은 상태. 이럴 경우, 미디어 쿼리 안쪽에는 background-color를 따로 명시하진 않았지만, 배경 색은 미디어 쿼리 바깥쪽에 있는 CSS값을 그대로 상속받아서 yellow가 됨.
만약, 상속을 안 받게 하고 싶다면 속성값으로 none을 입력하면 됨.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<title>미디어쿼리</title>
<style>
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 100px;
height: 100px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="media"></div>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| HTML, CSS - Transform과 Animation을 결합할 때 (0) | 2021.08.08 |
|---|---|
| HTML, CSS - Animation 속성 (0) | 2021.08.07 |
| HTML, CSS - Transition 속성 (0) | 2021.08.06 |
| HTML, CSS - Transform 속성 (0) | 2021.08.05 |
| HTML/CSS - 간단한 쇼핑몰 만들기 실습 3(하단 영역) (0) | 2021.07.18 |
| HTML/CSS - 간단한 쇼핑몰 만들기 실습 1(상단 영역) (0) | 2021.07.16 |
| CSS - 레이아웃에 영향을 미치는 속성 (0) | 2021.07.15 |