PC보다 스마트폰으로 정보를 얻는게 많아진 최근에는 일반 웹보다 반응형웹을 선호하는 곳이 많아졌습니다.
그리고 PC보다 작고 모바일보다 큰 테블릿을 활용하는 경우도 많아졌습니다
반응형웹(Responsive Web)이란?
: 다양한 디바이스 화면 크기에 따라 변해 사용자의 편의성에 맞춘 웹입니다.
뷰포트(ViewPort)
HTML의 <head></head>안에 들어가는 meta태그에 너비와 높이, 확대/축소 설정할 수 있습니다.
뷰포트 구조
| </meta name="viewport" conetent="width-device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> |
- width : 너비
- height : 높이
- initial-scale : 초기 배율
- minimum-scale : 최소 축소 비율
- maximum-scale : 최대 확대 비율
- user-scalable : 사용자 확대와 축소 사용 유무
미디어쿼리(Media Query)
반응형 웹을 만들기 위해서는 필수적으로 미디어쿼리를 알아야합니다.
주로 웹, 태블릿, 모바일 세가지로 구분하여 CSS에 조건을 설정합니다.
- 모바일 해상도 320px ~ 768px
- 태블릿 해상도 768px ~ 1024px
- PC 해상도 1024px ~ 1920px
미디어쿼리 구조
| @media screen and (max-width: 768px) { body { background-color: lightgreen; } } |
@media 로 시작합니다.
다음 미디어 유형을 선택하여 넣습니다.
- all : 모든 매체
- screen : 컴퓨터, 탬블릿, 모바일 모든 스크린
- print : 프린트 기기
- speech : 스크린 리더
다음 and / not / only 를 골라 넣습니다.
다음 조건문(해상도)를 넣습니다 max-width와 min-width로 최대/최소 넓이를 적어줍니다.
조건문은 하나 혹은 여러개를 넣을 수 있습니다.
ex) @media screen and (min-width:320px) and (max-width: 768px)
그 외 필요한 요소
CSS에 요소를 주로 px로 지정하지만 반응형시 %, rem, em, vw, vh 단위를 사용합니다.
rem, em
: 폰트 사이즈가 화면 사이즈에 맞게 유동적으로 바뀌는 단위입니다.
em은 사용요소에 따라 사이즈가 바뀌고, rem은 최상위 요소(HTML)에 따라 사이즈가 변합니다.
vw(vertical width), vh(vertical height)
: 뷰포트의 너비값과 높이값을 가져옵니다.
들어가는 컨텐츠가 적은곳도 많은곳도 동일하게 화면을 꽉 채울 수 있습니다.