CSS - (5) Media Query
Media Query
반응형 웹을 만들기 위해 반드시 필요한 것
HTML5 에서
viewport meta
CSS3 에서
Media Query
viewport
position: fixed;
에 대해 배울 때 언급했었다.
browser의 화면 크기를 말한다.
반응형 화면을 위해 필수적으로 넣어야 한다!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
media query
@media screen and (minwidth: 768px) {
/* Where all the magic happens... */
}
내 화면이 몇 px 이상/이하 일 때 '이 스타일을 적용해 줘~' 하는 것이다.
위 코드의 경우 768px 이상이면 이렇게 적용해달라는 의미이다.
코드로 확인해 보자!
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox 2</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
styles.css
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Poppins', sans-serif;
color: #212529;
}
viewport meta
Media Query
position: fixed;
에 대해 배울 때 언급했었다.
browser의 화면 크기를 말한다.
반응형 화면을 위해 필수적으로 넣어야 한다!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
@media screen and (minwidth: 768px) {
/* Where all the magic happens... */
}
내 화면이 몇 px 이상/이하 일 때 '이 스타일을 적용해 줘~' 하는 것이다.
위 코드의 경우 768px 이상이면 이렇게 적용해달라는 의미이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox 2</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Poppins', sans-serif;
color: #212529;
}
아직은 아무 것도 없는 빈 흰색 화면이다.
vh ?
.box {
width: 100%;
height: 100vh;
background-color: black;
}
vh : Viewport Height
1vh는 우리가 보고 있는 viewport의 세로 길이의 1%을 의미한다.
css 수정하기
화면 가운데 배치 & 가상요소 넣어주기
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #ff4949;
font-size: 30px;
font-weight: 700;
color: #fff;
}
.box::after {
content: 'Mobile';
}
@media 사용
@media screen and (min-width: 576px) {
/* CSS 선언 */
.box {
background-color: #ff5216;
}
.box::after {
content: 'Landscape Phone';
}
}
width가 576px 이상이 되면 괄호 안의 CSS 속성들이 적용이 된다.
@media screen and (min-width: 768px) {
.box {
background-color: #ffc82c;
}
.box::after {
content: 'Tablet';
}
}
@media screen and (min-width: 992px) {
.box {
background-color: #13ce66;
}
.box::after {
content: 'Desktop';
}
}
@media screen and (min-width: 1200px) {
.box {
background-color: #1fb6ff;
}
.box::after {
content: 'Large Desktop';
}
}
@media screen and (min-width: 1360px) {
.box {
background-color: #7e5bef;
}
.box::after {
content: 'Super Large Desktop';
}
}
Author And Source
이 문제에 관하여(CSS - (5) Media Query), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@frenchkebab/CSS-5-Media-Query저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)