반응형
1. 반응형 웹
- 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념
- 반응형 웹의 일반적인 조건
- 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 함
- 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 함
2. 뷰포트(viewport)
- 일반적으로 모바일 기기에 적용하기 위해 생성된 개념
- 가상의 윈도우(화면)에 웹 페이지를 렌더링하여 확대/축소/스크롤 등을 하기 위한 가상 렌더링 화면
- 기본적으로 데스크탑 브라우저에서는 viewport를 사용하지 않기 때문에 무시됨
- 데스트탑(viewport) vs 모바일(viewport)
- 데스트탑 : 브라우저 창이 곧 viewport이다.
일반적으로 브라우저 창의 크기를 조절하면 뷰포트도 동일하게 조절됨
- 모바일 : 뷰포트 창보다 크거나 작을 수 있고, 상하좌우로 움직임
더블탭, 줌인, 줌아웃 등을 통해 뷰포트의 배율을 변경/조절 가능
크기가 아닌 배율 조절이라는 것이 다름 - viewport가 필요한 이유
- 모바일 기기가 보편화되기 전에 만들어진 웹 페이지 화면들을 작은 화면의 모바일에서 페이지 모두를 표시하려니 전체적인 화면 배율 조정이 필요 - 뷰포트 속성
width viewport의 다로 크기를 조정, 일반적인 숫자 값이 들어갈 수도 있고 device-width와 같이 특정한 값을 사용 할 수도 있음 height viewport의 세로 크기를 지정 initial-scale 페이지가 처음 로딩될 때 줌 레벨을 조정 minimum-scale viewport의 최소 레벨 값(default = 0.25) maximum-scale viewport의 최대 배율 값(default = 1.6) user-scalable 사용자의 확대/축소 기능 사용 유/무(default = yes) width=device-width 웹 페이지의 너비를 디바이스의 너비에 맞춤 heigh=device-height 웹 페이지의 높이를 디바이스의 높이에 맞춤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<!-- 데스크탑에서 보는 것과 모바일에서 보는 것을 같게 해줌 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"/> -->
<!-- <meta name="viewport" content="width=device-height, initial-scale=1"/> -->
<meta name="viewport" content="width=device-width, initial-scale=2.0"/>
</head>
<body>
<h3>안녕하세요 여러분.</h3>
<p>오늘은 뷰포트에 대하여...</p>
</body>
</html>
3. 미디어 쿼리(Media Query)
- 다양한 화면 크기(해상도)의 기기들에서 웹 사이트의 콘텐츠를 적절하게 보여주기 위해 콘텐츠의 배치(레이아웃) 또는 크기 등을 조절하는 기술
- 즉, 기기별 크기에 반응하여 기기별로 디자인을 재구성 하는 CSS 기술
- 디바이스별 width의 일반적인 값
가장 작은 디바이스(모바일) ~ 480px 모바일 디바이스 ~ 768px 태블릿 디바이스 769px ~ 1024px 노트북 1025px ~ 1600px 테스크탑 1600px ~ - 기본 문법
@media 미디어유형 논리연산자 (조건) { 스타일 }
@media screen and (max-width: 600px) { div { color: blue; } }
- 프로그래밍의 if 조건문과 비슷한 개념으로 조건이 참일 경우 스타일을 적용 - 미디어 유형
all 모든 장치 print 인쇄 결과물 및 결과 출력 미리보기 화면에 표시 screen 주로 화면(액정 또는 모니터 등)이 대상 speech 음성 합성 장치 대상 - 논리 연산자
and 조건을 모두 만족하는 경우에만 스타일 적용 ,(콤마) 조건 중 하나라도 만족하는 경우 스타일 적용 not 조건을 반전하는 경우 스타일 적용 only 미디어 쿼리를 지원하는 브라우저에서만 작동
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>미디어 쿼리</h3>
<p>미디어 쿼리를 이용한 모바일/태블릿/PC 에서의 색상 스타일 적용</p>
<div class="box">
미디어 쿼리 예제
</div>
</body>
</html>
<style>
/* PC 용 스타일로 사용 */
div { width: 200px; height: 200px; background-color: green; margin-bottom: 20px; color: white; }
/*
768px 이하의 화면일 경우 아래의 스타일 적용
즉, 최대 크기가 768px 까지만 스타일 적용(모바일 화면)
*/
@media (max-width: 768px) {
.box { background-color: red; }
}
/*
768px 이상 1024px 이하의 경우 아래의 스타일 적용
즉, 최소 크기가 768px 부터 최대 크기가 1024px 까지만 스타일 적용(태블릿 화면)
*/
@media (min-width: 768px) and (max-width: 1024px){
.box { background-color: blue; }
}
/*
1200px 이상의 화면일 경우 아래의 스타일 적용
즉, 최소 크기가 1200px 부터 스타일 적용(노트북 이상의 화면)
*/
/* @media (min-width: 1200px) {
.box { background-color: blue; }
} */
</style>
반응형
'FrontEnd > CSS' 카테고리의 다른 글
| [CSS] CSS Flex(Flexible Box) - Items (0) | 2022.10.12 |
|---|---|
| [CSS] CSS Flex(Flexible Box) - Container (0) | 2022.10.12 |
| [CSS] CSS 애니메이션 (0) | 2022.10.06 |
| [CSS] CSS 위치 지정 및 화면 중앙 배치 (0) | 2022.10.06 |
| [CSS] CSS float, clear 속성 (1) | 2022.10.05 |