KoreaIt Academy/HTML & CSS
[CSS] 웹 앱 반응형 개발, 미디어 쿼리(media query)
728x90
반응형
웹 앱 반응형 개발
접근하는 장치의 사이즈 별로 레이아웃이 유동적으로 움직이고,
너비가 맞지 않아서 깨지는 것을 방지함으로써 모든 장치에서 좋은 레이아웃을 제공해줍니다.
웹 사이트가 장치별로 반응을 하기 때문에 웹 앱 반응형 개발이라 부릅니다.
미디어 쿼리(media query)
웹 페이지에 접속하고 있는 기기마다 원하는 형태로 스타일을 조정할 수 있는 기술입니다.
장점 : 업데이트, 유지보수 관리, 디버깅이 쉬워지며 업데이트 비용이 감소합니다.
단점 : 구현이 쉽지 않고. 다운로드 속도가 느려집니다.
★ 미디어 쿼리를 사용하여 반응형 개발을 하기 위해서는 meta태그에
name="viewport"
content="width=divice-width, initial-scale=1"
위와 같은 속성을 써야 합니다. ★
미디어 쿼리 문법
@media only all and(조건문){실행문}
@media : 미디어 쿼리가 시작됨을 표시
only : 미디어 쿼리 구문을 해석하라는 명령어(생략 가능)
all : 미디어 쿼리를 해석해야 할 대상을 나타냄(생략 가능)
and : 앞과 뒤의 조건을 나타낸다(생략 가능)
(조건문) : 해당 조건을 설정
{실행문} : 조건에 따라 실행할 스타일 설정
시맨틱 태그를 사용한 웹 앱 반응형 개발 예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport"
content="width=divice-width, initial-scale=1">
<title>미디어 쿼리 실습</title>
<style>
*{padding: 0px;margin: 0px;}
body{background:#e0f2f1;}
div#wrap{width:1200px; margin:0 auto;}
header{width:100%; height: 150px; background: #fff9c4;}
aside{float:left; width:30%; height: 700px; background: #1e88e5;}
section{float:left; width:70%; height:700px; background:#f44336;}
footer{clear:both; width:100%; height: 150px; background:#8bc34a;}
/* 미디어 쿼리 작성 */
/* 데스크탑 : 1220px */
@media(max-width : 1220px){
div#wrap{width: 99%;}
}
/* 테블릿 : 768px */
@media(max-width : 768px){
div#wrap{width: 100%;}
header{height: 250px;}
footer{height: 250px;}
}
/* 모바일 : 480px */
@media(max-width : 480px){
header{height: 400px;}
footer{height: 400px;}
aside{clear: both; width: 100%;}
section{clear: both; width: 100%;}
}
</style>
</head>
<body>
<div id="wrap">
<header></header>
<aside></aside>
<section></section>
<footer></footer>
</div>
</body>
</html>
1) 데스크탑
2) 테블릿 (~768px)
3) 모바일(0~480px)
728x90
반응형
'KoreaIt Academy > HTML & CSS' 카테고리의 다른 글
| [프론트 실습] 템플릿을 수정하여 회원가입, 로그인창 만들어 보기 (0) | 2021.08.20 |
|---|---|
| HTML5와 시맨틱(semantic) 태그, 검색 엔진 최적화 (0) | 2021.08.20 |
| [CSS] 폰트 크기(em, rem, px), 글꼴(구글 폰트 적용 방법), 글씨 굵기 (0) | 2021.08.20 |
| [CSS] 우선순위(캐스캐이딩(Cascading)) (0) | 2021.08.20 |
| [CSS] 선택자(전체 선택자, 요소 선택자, 클래스 선택자, 아이디 선택자, 그룹 선택자) (0) | 2021.08.20 |
댓글