- 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.
뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역
뷰포트는 <meta>
태그를 이용해 <head>
와 </head>
태그 사이에 작성한다.
PC에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해 보면 모든 내용이 작게 표시된다.즉, PC화면과 모바일 화면에서 표시되는 픽셀의 차이 때문인데, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다.
<meta name="viewport" content="속성1=값1", "속성2=값2",...">
🔹 viewport 단위
vw(viewport width)
1vw는 뷰포트 너비의 1%와 같다.
vh(viewport height)
1vh는 뷰포트 높이의 1%와 같다.
vmin(viewport minimum)
뷰포트의 너비와 높이 중에서 작은 값의 1%와 같다.
vmax(viewport maximum)
뷰포트의 너비와 높이 중에서 큰 값의 1%와 같다.
사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하는 방법. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.
@media screen and (min-width:768px){
.container {
width: 50%;
}
}
/* 미디어 유형이 screen이면서 최소 너비가 768px 이상일때,
컨테이너의 50% 너비를 차지할 수 있게 해준다.
🔹 @media 속성의 미디어 유형
all
모든 미디어 유형에서 사용할 CSS를 정의한다.
screen
주로 화면이 대상이다.
speech
음성합성장치가 대상이다.
🔹 화면 회전 속성
orientation: portrait
단말기의 세로 모드를 지정한다.
orientation: landscape
단말기의 가로 모드를 지정한다.
[참조 링크 1]
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
[참조 링크 2 / 모바일 기기의 viewport]
https://yesviz.com/devices.php