반응형 웹
반응형 웹 이란?
웹 사이트를 다양한 디바이스 화면에 맞춰서 조절되도록 해주는 반응하는 웹사이트를 구현하는 방식을 말합니다.
뷰포트(viewport)
각 디바이스 별로 실제 내용이 표시되는 영역을 뷰포트라고 합니다.
이는 반응형 웹에서 중요한 개념으로 이 뷰포트를 활용하여 각 디바이스 별 화면에 맞게 동일한 비율로 내용을 표시할 수 있게 해줍니다.
html 문서를 작성할 때 <head> 태그 내에 작성하는, 아래 내용이 각 디바이스에 맞는 뷰포트를 설정하는 부분입니다.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>💡 뷰포트가 왜 중요할까?
CSS로 레이아웃을 만들어줄때 특정 영역을1600px로 지정할 경우 각 디바이스 별로 표시할 수 있는 화면 영역의 크기가 다르니, 어떤 디바이스에서는 한 화면안에 해당 영역이 다 보이고, 어떤 디바이스에서는 영역의 일부만 잘려서 화면에 보일 것입니다.
뷰포트는 디바이스의 뷰포트를 확인해서 모든 디바이스에서 동일한 비율로 화면에 영역이 나올 수 있게 할 수 있습니다.
뷰포트 속성
뷰포트를 지정해줄 때는 html 문서 내 <head> 태그 내 <meta> 태그를 사용하여 작성합니다.
<head>
<meta name="viewport" content="속성1 = 값1, 속성2 = 값2">
</head>| 속성명 | 설명 | 사용가능한 값 |
|---|---|---|
width | 뷰포트 너비 | - device-width - 크기 |
height | 뷰포트 높이 | - device-height - 크기 |
user-scalable | 확대/축소 가능 여부 | - yes (기본값) - no |
initial-scale | 초기 확대/축소 값 | 1(기본값)~10 |
뷰포트 단위
뷰포트에서는 기존 px, em, %의 단위가 아닌 각 화면에 대한 비율 기준으로 단위를 사용할 수 있습니다.
vw: Viewport Width 1vw는, 뷰포트 너비의 1%를 의마합니다.vh: Viewport Height 1vh는, 뷰포트 높이의 1%를 의마합니다.vmin: Viewport MINimum 1vmin은, 뷰포트 너비와 높이 중 더 작은 값의 1%를 의마합니다.vmax: Viewport MAXimum 1vmax는, 뷰포트 너비와 높이 중 더 큰 값의 1%를 의마합니다.
미디어쿼리
미디어쿼리는 각 미디어 유형에 따라 CSS를 달리 적용해줄 수 있는 기능입니다.
웹문서를 브라우저가 읽을 때 해당 브라우저에 접속한 기기의 해상도 정보를 header에 보내줍니다. 이를 통해 미디어쿼리를 사용해서 각 기기 별, 각 해상도 별로 구분하여 css를 적용해줄 수 있습니다.
@media 조건구, 조건구 {css;}미디어 쿼리 구문 작성 방법
키워드
only: 미디어쿼리를 지원하는 브라우저에서만 해당 CSS절을 실행됩니다.not: 해당 조건절에 해당하는 유형은 제외 후 해당 CSS절을 실행됩니다.and: 다수의 조건을 만족해야만 해당 CSS절을 실행시키게 할 경우 사용합니다.
조건1 and 조건2형식으로 사용합니다. 이 때 and로 묶인 모든 조건을 만족해야 해당 CSS절이 실행됩니다.
미디어 유형
미디어 유형을 아래와 같이 정의해놨으며, 해당 유형을 이용할 수 있습니다.
주로 사용하는 유형은, screen, tv, print 입니다.
all: 모든 미디어 유형에 해당합니다.print: 인쇄장치 유형에 해당합니다.
* 현재 페이지를 pdf로 저장하는 경우 해당 유형을 사용할 수도 있습니다.screen: 컴퓨터 스크린/스마트폰 스크린 유형에 해당합니다.tv: tv 유형에 해당합니다.aural: 음성합성장치 유형에 해당합니다.braille: 점자표시장치 유형에 해당합니다.handheld: 손에 들고다니는 장치 (태블릿, 모바일 제외) 유형에 해당합니다.projection: 프로젝터 유형에 해당합니다.tty: 디스플레이 기능이 제한된 기기 유형에 해당합니다.embossed: 점자프린터 유형에 해당합니다.
크기 직접 지정
특정 기준에 따라 해당 미디어쿼리를 적용할 크기를 직접 지정해주는 방법입니다.
- 웹문서 기준
screen유형일 때는 웹 브라우저의 뷰포트 기준으로 가로세로 적용되며, 그 외 미디어 유형일 경우 스크롤을 포함한 전체 문서의 세로길이 기준으로 적용됩니다.width:(width: 크기)로 작성하며, 가로길이를 뜻합니다.height:(height: 크기)로 작성하며, 세로길이를 뜻합니다.min-width:(min-width: 크기)로 작성하며, 최소 가로길이를 뜻합니다.min-height:(min-height: 크기)로 작성하며, 최소 세로길이를 뜻합니다.max-width:(max-width: 크기)로 작성하며, 최대 가로길이를 뜻합니다.max-height:(max-height: 크기)로 작성하며, 최대 세로길이를 뜻합니다.
- 디바이스 기준
위 웹문서 기준과 달리 디바이스 자체의 크기를 기준으로 가로세로가 적용됩니다.device-width:(device-width: 크기)로 작성하며, 가로길이를 뜻합니다.device-height:(device-height: 크기)로 작성하며, 세로길이를 뜻합니다.min-device-width:(min-device-width: 크기)로 작성하며, 최소 가로길이를 뜻합니다.min-device-height:(min-device-height: 크기)로 작성하며, 최소 세로길이를 뜻합니다.max-device-width:(max-device-width: 크기)로 작성하며, 최대 가로길이를 뜻합니다.max-device-height:(max-device-height: 크기)로 작성하며, 최대 세로길이를 뜻합니다.
화면 회전 속성
스마트폰이나 태블릿에서 사용하는 화면회전 속성에 대해 대응하기 위해 디바이스의 방향을 확인합니다.
orientation: portrait: 디바이스의 세로모드를 뜻합니다.orientation: landscape: 디바이스의 가로모드를 뜻합니다.
💡 실제 미디어 쿼리 구문 읽어보기
@media screen and (min-width: 800px) and (max-width: 1440px) {...}=> 미디어 유형이
screen이면서 (뷰포트기준) 최소 가로 너비가 800px 이상이면서, 최대 가로 너비가 1440px인 경우 작성된 css 적용@media screen and (min-device-width: 800px) and (max-device-width: 1440px) {...}=> 미디어 유형이
screen이면서 (디바이스 기준) 최소 가로 너비가 800px 이상이면서, 최대 가로 너비가 1440px인 경우 작성된 css 적용
미디어 쿼리 적용 방법
외부 CSS 연결 방식
1. <link> 태그 내 media 속성 입력
<!--기본형-->
<link rel="stylesheet" media="미디어 쿼리 조건절" href="css 파일 경로">
<!--예시-->
<link rel="stylesheet" media="screen and (min-width: 800px)" href="/src/css/common.css">스타일 시트를 <link> 태그로 연결시킬 때 해당 태그 내 media 속성의 값으로 미디어 쿼리 절을 추가하여 사용할 수 있습니다.
해당 css파일은 입력한 미디어쿼리 조건인 경우 적용되는 구조 입니다.
2. <style> 태그 내 @import문으로 삽입
<head>
<style>
/*기본형*/
@import url("css 파일 경로") 미디어쿼리 조건절;
/*예시*/
@import url("/src/css/common.css") screen and (min-width: 800px);
</style>
</head>위 2가지 방법 모두 css파일 자체를 html문서에 연결시킬 때 미디어쿼리 조건절을 적용해주는 방법입니다.
따라서 연결한 css파일 전체에 해당 미디어 쿼리 조건이 적용되게 됩니다.
웹문서 내부 작성 방식
css 파일 전체에 미디어 쿼리 조건을 걸지 않고 css 파일 내부에서 부분적으로 각 각 다른 미디어 쿼리를 이용하고 싶다면, css 파일 내부에 작성해주는 방식을 사용할 수 있습니다.
/*기본형*/
@media 미디어쿼리 조건절 {
css 내용;
}
/*예시*/
@media screen and (min-width: 800px) {
p {
color: #000;
background: blue;
}
}참고
Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!
