클론코딩

[인프런] 맛집지도 만들기 (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