화면 크기에 반응하여 화면 요소들을 자동으로 바꿔
사이트를 구현하는 것이 반응형 웹입니다.
PC 브라우저로 접속하든 모바일 브라우저로 접속하든
사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게
바꾸어 보여주는 웹 디자인을 반응형 웹 디자인이라고 합니다.
뷰포트(viewport)와 미디어쿼리(mediaqueri) 입니다.
뷰포트
뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.
뷰포트 지정 방법
아래는 가장 일반적으로 사용되는 설정 입니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
· width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다.
즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다.
· initial-scale=1 : 처음 페이지 로딩 시 확대/축소가 되지 않은 원래 크기를 사용합니다.
0~10 사이의 값을 가집니다.
· 위의 문구를 <head>태그 사이에 작성합니다.
· 메타 뷰포트가 있어야 미디어 쿼리가 반응합니다.
미디어쿼리
미디어쿼리는 css3 모듈 중 하나로 사이트에 접속하는 장치에 따라
특정한 css 스타일을 사용하도록 해줍니다.
미디어쿼리 기본 구문
@media screen and (max-width:1280px) {
...
}
또는
@media screen and (min-width:641px) and (max-width:768px) {
...
}
· 위의 구문을 이용하여 <style></style> 사이에 사용합니다.
저는 반응형 웹사이트나, 그 안의 페이지를
제작할 때마다 미디어쿼리를 필수로 사용합니다.
그럴 때마다 미디어쿼리 구문을 구글링 하여 사용하게 됩니다.
아래 구문과 미디어 유형별 너비로 기입하였으니
여러분은 앞으로 아래 부분만 복사하셔서 사용하시면 됩니다.
미디어 쿼리 기기 유형별 너비
max-width:1900px -> 1281~1900(와이드 PC)
max-width:1280px -> 1025~1280 (일반 PC 이상)
max-width:1024px -> 769 ~1024(태블릿)
max-width:768px -> 641~768(중형 태블릿, 중형 태블릿 및 모바일)
max-width:640px -> 320~640(소형 태블릿 및 스마트폰)
min-width:320px (최소 모바일)
미디어쿼리 구문
@media screen and (max-width:1280px) {
...
}
@media screen and (max-width:1024px) {
...
}
@media screen and (max-width:768px) {
...
}
@media screen and (max-width:640px) {
...
}
스마트폰과 태블릿, 와이드 스크린 등 미디어 쿼리를 작성할 때
고려해야 할 기기가 기기의 크기도 계속 늘어나고 있습니다.
자주 사용하는 모바일 해상도는 아래의 사이트에서 참고하세요.
material.io/resources/devices/
Device Metrics - Material Design
A comprehensive resource for sizing, resolution and pixel density across popular devices.
material.io
<접속화면>
물리적인 해상도를 찾으려면 원하는 기기의 모델을 찾아,
width x height dp를 확인합니다.
'💻CODING > html, css' 카테고리의 다른 글
| [css] reset css 기본값 코드(ft. 기본 css 세팅) (0) | 2021.01.25 |
|---|---|
| [css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형) (0) | 2021.01.21 |
| [css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) (6) | 2020.09.25 |
| [css] background속성 한번에 사용하기 (0) | 2020.09.16 |
| [css] 가상요소 선택자 ::before, ::after 사용법(ft. 가상 클래스) (0) | 2020.07.09 |
댓글