혼자 웹페이지를 만들다가 반응형 웹에 대해 알게 되어 포스팅한다.
반응형 웹은 모바일 호나경이 시작되면서 장치(device)가 다양해지며 해상도의 크기 및 비율이 제각각 다른 경우가 생기며 발생했는데, 이전에는 동일한 비율(1024x768, 1280x960)에만 대응하면 됐지만, 지금은 비율이 매우 다양해지고 해상도가 높아져서 페이지 설계 시 고려할 사항이 많아졌다.
먼저, 모바일 브라우저에서 시도해야 할 부분은 viewport 이다.
이 부분은 html 에서 meta 태그를 활용하여 viewport 의 크기와 초기 줌 레벨 등을 기기에 맞게 적용되도록 선언하는 것이다.
/* header 태그 안에서 사용 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">
위의 부분은 vs code 를 이용하여 html 을 생성하면 자동으로 적용된다.
만약 이 부분이 적용되지 않는다면 viewport 는 기본값이 width: 980px 의 너비로 세팅된다.
더 많은 옵션을 추가한 코드는 아래와 같다.
이 부분은 직접 해보고.. 추가 공부해야겠다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />
이제 veiwport 를 지나서 미디어쿼리를 사용한다.
미디어쿼리는 css 사용 시 @medi ( // 조건) 식으로 사용하면 된다.
.title {
font-size: 40px;
}
/* width 값이 600px 이하인 경우 */
@media (max-width: 600px) {
.title {
font-size: 20px;
}
}
위와 같은 형식으로 사용하며, min, max 값에 따라 모바일퍼스트, 데스크탑퍼스트 라고 한다.
- 모바일 퍼스트 : min - 분기점(break point) 낮은 순부터 사용
@media (min-width: 850px){
.title {
margin-left: 10%;
}
}
@media (min-width: 1000px){
.title {
margin-left: 15%;
}
}
- 데스크탑 퍼스트 : max - 분기점(break point)높은 순부터 사용
@media (max-width: 1000px){
.title {
margin-left: 10%;
}
}
@media (max-width: 850px){
.title {
margin-left: 15%;
}
}
미디어쿼리에 사용되는 반응형 분기점은 아래와 같다.
이 중 대표적으로는 320px, 768px, 1024px 가 가장 많이 쓰인다.
보통 미디어쿼리로 코딩할 땐 이렇게 나뉜다.
/* 모바일 768px 미만 */
@media (max-width: 767px) {}
/* 태블릿 768px ~ 1024px 사이 */
@media (min-width: 768px) and (max-width: 1024px) {}
/* 데스크탑 1024px 이상 */
@media (min-width: 1025px) {}
댓글