반응형, 적응형
- 반응형: 하나의 웹사이트에서 pc, tablet, mobile등 접속하는 기기에 따라 화면 크기에 맞게 사이트가 자동으로 반응하는 기법
- 적응형: 접속하는 기기에 따라 pc용 웹사이트, 테블릿, 모바일용 웹사이트를 보여주는 기법
HTML
1) 반응형 페이지를 만들기 위한 메타 태그
- viewport meta 태그를 추가하여 페이지가 호출이 될 때 보이는 화면을 어떻게 계산해서 보여줄지 정의할 수 있다.
<meta name="viewport" content="width-device-width, initial-scale=1.0">
- name: 메타태그 중 viewport를 사용 하겠다고 선언한다.
- content: viewport가 가진 content 값을 지정하여 사용한다.
- width: 브라우저에게 페이지의 가로 너비를 계산하는 방법을 알려준며 "device-width"를 지정하면 접속하는 기기에 맞게 페이지를 맞춰준다.
- initial-scale: 최초 화면 확대 값으로 1.0을 두는 것으로 페이지를 확대하지 않고 1배율로 보겠다고 정의한다.
2) 반응형 이미지 처리
- <picture>를 사용하여 의도한 viewport 너비에 원하는 이미지를 넣을 수 있다.
- <picture>는 viewport의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 viewport에 알맞게 채워질 수 있도록 여러 개의 이미지중에서 적절한 이미지를 사용할 수 있도록 해준다.
- source: <picture>안에서 반응형 이미지를 설정하는 속성
- media: 리소스의 용도에 맞는 미디어 조건(미디어 쿼리)을 지정하는 속성
- srcset: 이미지의 리소스를 지정하는 속성
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <picture> <source media="(max-width: 768px)" srcset="https://via.placeholder.com/200x200?text=Mobile" /> <img src="https://via.placeholder.com/200x200?text=pc" alt="이미지" /> </picture> </body> </html>
- "max-width: 768px" 설정함으로써 브라우저 창을 768px 이상으로 키우면 반응형 이미지 처리로 인해 자동으로 pc로 바뀐다.
- "max-width: 768px" 설정함으로써 브라우저 창을 768px 이하로 줄이면 반응형 이미지 처리로 인해 자동으로 Moblie로 바뀐다.
CSS
1) 미디어 쿼리(Media Query)
- 기기의 유형과, 어떤 특성이나 수치에 따라 스타일을 수정할 수 있다.
@media 기기유형 연산자 (조건) {
스타일
}- 기기 유형
1) all: 모든 장치
2) print: 인쇄 결과물 및 출력 미리보기
3) screen: 화면
- 조건
1) viewport 너비 (자주 사용)
2) viewport 가로비, 세로비
- 기기 유형
- and 연산자를 통해 조건을 계속 추가할 수도 있다.
@media screen and (max-width: 1024px) and (조건) and (조건) {
}
- 실습
div{ font-size: 20px; } @media screen and (max-width: 800px){ div{ font-size: 40px; } }
- "max-width: 800px" 설정함으로써 브라우저 창을 800px 이상으로 키우면 폰트 사이즈가 20으로 지정된다.
- "max-width: 800px" 설정함으로써 브라우저 창을 800px 이하로 줄이면 폰트 사이즈가 40으로 지정된다.
- 주의사항
1) width 값을 고정하면 반응형 매 구간마다 고정값을 변경해야 하는 불편함이 발생할 수 있다.
→ max-width를 사용한 최대 너비를 적극 활용하는 것을 권장한다.
2) heigth 값을 고정하면 유동적으로 변하는 높이에 대응할 수 없다.
→ min-height를 사용한 최소 높이를 적극 활용하는 것을 권장한다.
