🎈반응형 웹
responsive web design
웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 준다.
✍️ 뷰포트 viewport
뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. '뷰포트'란 스마트폰 화면에서 실제 내용이 표시되는 영역이다.
뷰포트는 <meta> 태그를 이용해 <head>와 </head>태그 사이에 작성한다.
<meta name = "veiwport" content = "속성1=값1, "속성2=값2,...>| 종류 | 설명 | 사용 가능한 값 | 기본값 |
|---|---|---|---|
| width | 뷰포트 너비 | device-width 또는 크기 | 브라우저 기본값 |
| height | 뷰포트 높이 | device-height 또는 크기 | 브라우저 기본값 |
| user-scalable | 확대, 축소 가능 여부 | yes 또는 no | yes |
| initial-scale | 초기 확대, 축소값 | 1~10 | 1 |
✍️ 뷰포트 단위
뷰포트 개념이 등장하기 전까지 CSS에서 크기를 지정할 때 주로 px, %의 단위를 사용했지만, 이제는 다음과 같이 뷰포트를 기준으로 하는 단위를 사용할 수도 있다.
vw(viewport width): 1vw는 뷰포트 너비의 1%
vh(viewport heigth): 1vh는 뷰포트 높이의 1%
vmin(viewport minimum): 뷰포트 너비와 높이 중에서 작은 값의 1%
vmax(viewport maximum): 뷰포트 너비와 높이 중에서 큰 값의 1%
ex) 뷰포트의 너비가 1000px, 높이가 800px일 경우 1vw = 10px, 1vh = 8px, vmx = 10px가 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<style>
h1 {
font-size: 5vw;
text-align: center;
}
</style>
<body>
<h1>Hello world</h1>
</body>
</html>✍️ 미디어 쿼리
CSS 모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법을 의미한다. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.
✍️ 미디어 유형의 종류
| 종류 | 설명 |
|---|---|
| all | 모든 미디어 유형에서 사용할 CSS를 정의 |
| 인쇄 장치에서 사용할 CSS를 정의 | |
| screen | 컴퓨터 스크린에서 사용할 CSS를 정의 스마트폰의 스크린도 포함 |
| tv | 음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의 |
| aural | 음성 합성 장치(주로 화면을 읽어 소리로 출력해주는 장치)에서 사용할 CSS를 정의 |
| braille | 점자 표시 장치에서 사용할 CSS를 정의 |
| handheld | 패트(pad)처럼 손에 들고 다니는 장치를 위한 CSS를 정의 |
| projection | 프로젝터를 위한 CSS를 정의 |
| tty | 디스플레이 기능이 제한된 장치에 맞는 CSS를 정의 이런 장치에서는 픽샐(px)단위를 사용할 수 없다. |
| embossed | 점자 프린터에서 사용할 CSS를 정의 |
CSS에 적용하여 사용한다.
@media (max-width: 1240px) {
#wrap { width: 100%; }
.article1 { height: 450px; }
.article2 { height: 450px; }
.article3 { width: 100%; }
}
@media (max-width: 768px) {
.aside { width: 100%; height: 300px; }
.article1 { width: 50%; }
.article2 { width: 50%; }
}
@media (max-width: 480px) {
.article1 { width: 100%; }
.article2 { width: 100%; }
}
안녕하세요 반갑습니다😊