아주 옛날, 90년대만 해도 웹이 데스크탑 호환으로만 만들어진 경우가 많았습니다. 하지만 요즘들어 다양한 사이즈와 핸드폰, 태블릿이 출시되고 많은 사용자들이 자신의 태블릿과 핸드폰으로 동시에 웹 페이지를 방문하곤 합니다.
반응형으로 웹을 만들지 않는다면, 컨텐츠가 잘리고 공간이 낭비되거나 심하게는 아예 동작이 안되는 상황까지 나오게 됩니다.
오늘은 반응형 웹(Responsive Web)에 대해서 공부해보겠습니다 🔥
Content Is Like Water
오늘의 주제를 대표하는 문장입니다. 컨텐츠를 물과 같이 만들어라. 컨텐츠가 어떤 컨테이너에 담아지는지에 상관없이 예쁘게 잘 나오도록 디자인(Responsive Web Design) 해야한다 라는 의미 입니다.
틀을 유동적으로 만든다
Fruid layout 이라고 합니다. 레이아웃의 크기를 고정해두지 않고 유동적으로 변하게 하여 창의 크기에 맞게 바꿔줍니다.
예전에는 float 속성과 % 를 이용해서 구현했습니다.
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}최근에는 Flex grid, Flex box, %, vw, vh 등의 속성을 다양하게 이용해서 유동적인 웹을 구현합니다. 속성값들만 잘 활용하면 컨텐츠가 웹의 사이즈에 맞게 크기가 변하게 됩니다. 또한 반응형 웹에서는 컨텐츠의 크기를 조절하는것뿐만 아니라 어느 정도의 수준을 넘어서면 컨텐츠가 재배치되는 것을 볼 수 있습니다. 이는 Media Queries 를 이용합니다. 이때 조금 더 강조하고자 하는 내용을 위로 배치하는 등의 옵션을 줄 수 있습니다.
정해진 확실한 break point 가 있는것은 아니지만, 일반적인 경우
Desktop : 1024~, Tablet : 1023~768, Phone : 480~320
이렇게 3가지로 구분합니다.
@media screen and (min-width : 800px) {
.container{
width : 50%;
}
}다음은 스크린이 작아지다가 최소 800px 까지는 ( 800px 이상만 ) width 가 50% 로 적용된다 라고 이해 할 수 있습니다. Type은 print, speech, all, screen 으로 구분하고 뒤이어 나오는 속성으로 and, 콤마, not, only 을 사용가능합니다.
(대부분의 경우 max-width 와 min-width 를 이용해서 반응형 웹을 구현합니다!)
자세한 내용은 참고 사이트(MDN) 에서 예제를 통해 다양한 속성을 혼자 공부해보기 ✌️
