반응형 웹이 무엇일까요?
하나의 웹 템플릿으로 모든 디바이스에서 해당 컨텐츠들을 잃어버리지 않고
편안한 폰트사이즈와 레이아웃으로 보고자 하는 것이 목적
일 것입니다.
그런데 반응형 웹 말고 적응형 웹도 있다는 사실을 아시나요?
사실 모바일 시대가 도래하면서 반응형 웹을 구현하는 것이 쉽지가 않았습니다.
왜냐하면 재구축을 해야 하기 때문이죠
그래서 기존에 데스크탑 용 템플릿을 그대로 두고 추가되는 디바이스에 필요한 css 템플릿을 추가하는 형태로
운영하였습니다.
그 2가지의 특징을 알아보겠습니다.
이 중에서 반응형 웹이 현재로서는 대세이고 범용 기술입니다.
그리고 우리가 이것도 이해해야 합니다.
웹개발 그중에서 CSS 개발할때 모바일 퍼스트(mobile first)로 개발할지 데스크탑 퍼스트(desktop first)로 개발할지 말입니다.
간단하게 말해서 모바일 버전 -> 데스크탑 버전으로 만드는 것은 추가하는 개념이기에 휠씬 쉽습니다
그러나 복잡도가 빽빽한 데스크탑 버전을 모바일 버전으로 구성하는 것은 참으로 인고의 시간이 더욱 필요할 거 같습니다.
그래서 우리는 그냥 모바일 퍼스트(mobile)가 대세이다 라고 알면됩니다.
본격적으로 반응형 웹에 대해서 알려고 할때 핵심적인 기술은 바로 미디어쿼리(media query)를 아는 것입니다.
먼가 대단한 기술인거 같지만 별거 아닙니다. CSS 에서의 기술이란게 그렇지 않습니까? (죄송)
@media screen and (max-width:100px){ /* 100px 이하 */
div{
background-color: blue;
}
}
@media screen and (min-width:100px) and (max-width:200px){ /* 100px 이상 200px 이하 */
div{
background-color: red;
}
}
@media screen and (min-width:200px){ /* 200px 이상 */
div{
background-color: green;
}
}
이것을 이해하고 구현할줄 알면 됩니다.
여기서 한가지 알아야 할 것은 CSS 적용 우선 순위입니다.
기본적으로 CSS 에서는 가장 나중에 선언하는 것을 우선으로 적용합니다.
그러므로 이것을 알고 위의 미디어쿼리를 사용하여야 하겠습니다. (우선순위를 사용하면 적용이 안되는 경우도 발생)
max-width는 최대 너비라는 의미입니다. (즉 이하라는 의미)
@media screen and (max-width: 100px) /* 100px 이하 */
min-width는 최소 너비라는 의미입니다. (즉 이상이라는 의미)
@media screen and (min-width: 200px) /* 200px 이상 */
조금 헷갈리시죠? 그러나 자주 반복하고 사용하면 이해가 됩니다.
아래 샘플페이지 소스로 실습해보세요
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 801px ~ */
* { color: black; }
/* ~ 800px */
@media screen and (max-width: 800px) {
* { color: blue; background-color: lightgreen;}
}
/* ~ 480px */
@media screen and (max-width: 480px) {
* { color: red; background-color: yellow; }
}
</style>
</head>
<body>
<h1>@media practice</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
즉 아래와 같은 기준이 필요할 수도 있겠습니다.
1) 모바일 우선(Mobile First)
작은 가로폭부터 큰 가로폭 순서로 만들고, min-width를 이용합니다.
A
@media ( min-width: 768px ) {
B
}
@media ( min-width: 1024px ) {
C
}
기본 모양은 A, 768px 이상일 때는 B, 1024px 이상일 때는 C가 적용됩니다.
Bootstrap 등 대부분의 프레임워크는 모바일 우선으로 만들어져 있습니다.
데스크톱 우선(Desktop First)
큰 가로폭부터 작은 가로폭 순서로 만들고, max-width를 이용합니다.
A
@media ( max-width: 1023px ) {
B
}
@media ( max-width: 767px ) {
C
}
기본 모양은 A, 1023px 이하일 때는 B, 767px 이하일 때는 C가 적용됩니다.
이와 같은 미디어 쿼리를 이용해서 반응형 웹 페이지를 디자인하고 개발할 수 있습니다.
반응형 웹페이지의 구체적인 구현 방법에 대해서는 사실 웹 디자이너가 아닌 경우라면
기존의 만들어져 있는 템플릿 (bootstrap 등)을 이용해서 구성하는 것이 맞습니다.
'테크노트 > css' 카테고리의 다른 글
| CSS 포지션(position) (0) | 2022.05.10 |
|---|---|
| CSS 디스플레이 타입 (display types) (0) | 2022.04.29 |
| CSS에서 사용하는 크기조정(Pixels, rem, em) (0) | 2022.04.06 |
| 초보개발자가 알아야 하는 CSS 기초 (0) | 2022.01.07 |
| CSS의 확장, 부트스트랩(bootstrap) (0) | 2021.11.05 |
댓글