클론코딩
[인프런] 맛집지도 만들기 (4)
cmkoi1
2023. 1. 27. 02:32
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강
내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다., - 강의 소개 | 인프런...
www.inflearn.com
※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.
반응형 웹, CSS Media Query
똑같은 사이트라도 pc, 핸드폰 어느 것으로 접근하느냐에 따라 화면 구성이 다를 수 있다.
화면 너비에 따라 레이아웃을 바꾸는 걸 반응형 웹이라고 한다.
개발자 도구에서 아래 버튼을 클릭하면 화면 크기 조절을 할 수 있다.
적응형 웹은 pc와 모바일 웹 사이트 개발 자체를 분리해서 개발하며, 도메인이 다르다.
화면 너비에 따라 레이아웃이 바뀌지 않는다.
Media Query
간단하게 기술을 이용하여 반응형 웹을 만들 수 있다.
@media 타입 and (조건) {
CSS
}
타입은 미디어 타입으로, 디바이스 종류를 의미한다. 보통 all 사용.
조건의 경우 보통 max-width, min-width 사용. 화면의 최대, 최소 너비이다.
모바일에서 사라지는 <h2>
- 반응형.html, 반응형.css 파일 생성
반응형.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="반응형.css" />
</head>
<body>
<h1>안녕하세요.</h1>
<h2>저는 모바일에서는 사라져요.</h2>
</body>
</html>
반응형.css
@media all and (max-width: 400px) { /*최대 400px까지 h2안에 있는 미디어쿼리 적용*/
h2 {
display: none; /*400px 미만이 되면 화면에서 사라짐*/
}
}
모바일에서 나타나는 <h2>
반응형.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="반응형.css" />
</head>
<body>
<h1>안녕하세요.</h1>
<h2>저는 모바일에서만 보여요.</h2>
</body>
</html>
반응형.css
@media all and (min-width: 400px) { /*최소 400px까지 h2안에 있는 미디어쿼리 적용*/
h2 {
display: none; /*400px 초과가 되면 화면에서 사라짐*/
}
}
728x90