반응형 웹을 만드는 방법
반응형 웹이란 각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 제대로 화면에 보여주는 웹을 말합니다. 반응형 웹은 흑과 백처럼 이분법으로 판단하여 반응형 웹인지 아닌지를 판단할 수 있는 것이 아닙니다. 흑과 백에 더해 회색도 있어 얼마나 다양한 디바이스 화면과 다양한 사이즈에 대응하고 있는지에 따라 흑에 가까워질 수도, 백에 가까워질 수도 있습니다. 그럼에도 불구하고 우리는 반응형 웹이라고 부를 수 있는 기준이 필요합니다. 통상적으로 다음 두 가지 조건에 대해 어느 정도 크게 만족하고 있으면 반응형 웹이라고 부릅니다.
- 데스크탑, 태블릿, 모바일 디바이스에 대해 각각 서비스를 문제없이 이용할 수 있는 화면을 제공한다.
- 같은 디바이스여도 유저가 사용하기에 무리가 없는 범주에서 뷰포트(viewport) 크기를 변경하는 경우 즉시 반응하여 그에 맞게 적절한 화면을 보여준다.
반응형 웹을 만들기 위해서는 CSS 코드에서 크기를 정하는 속성 값들에 대해 % 값들을 잘 사용해주는 것은 필수입니다. 고정 크기보다는 가변 크기를 지정함으로써 다양한 창의 크기에 대해 바로 대응할 수 있습니다. CSS를 사용하는 방법은 워낙 다양하기에 내공을 끊임없이 쌓아가야 할 부분입니다. 그러므로 이번 포스팅에서는 금방 익힐 수 있으나 반응형 웹을 만들기 위한 필수 지식인 viewport와 미디어 쿼리를 다뤄볼 것입니다.
viewport 정의
viewport는 display상에서 웹을 보여주고 있는 화상표시 영역을 말합니다. 데스크탑 환경에서 사용자가 브라우저 창의 크기를 조절하면 그에 따라 보여지는 웹의 사이즈도 똑같이 변합니다. 즉, 데스크탑에서 viewport는 브라우저 창의 크기에 따라 변합니다. 모바일 환경에서는 사용자가 브라우저의 창의 크기를 조절하는 일보다는 확대와 축소를 하는 일이 더 많습니다. 확대와 축소를 해도 모바일에서의 viewport는 변하지 않습니다. 반응형 웹을 만들 때에는 이런 점들을 고려해야 합니다.
viewport 관련 설정하는 법
html의 meta tag를 이용하면 viewport와 관련된 여러 설정들을 할 수 있습니다.
head태그 안에 작성하며 name과 content 속성을 통해 원하는 설정을 할 수 있습니다.
* 예시 코드
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport content 속성 값 정리
width=device-width
웹 페이지의 너비를 디바이스 너비에 맞추겠다는 뜻입니다.
이와 다르게 height=device-height을 사용하면 웹 페이지의 높이를 디자이스 높이에 맞추게 됩니다.
상하 스크롤이 익숙한 대부분의 웹은 width=device-width를 사용하면 되고, 좌우 스크롤이 주로 쓰이는 웹은 height=device-height을 사용하면 됩니다.
initial-scale
초기 화면 배율을 설정합니다. 1은 100%와 같습니다. 대부분 1을 사용합니다.
minimum-scale
최소 화면 배율 설정입니다. 화면이 극단적으로 축소되는 것을 방지해줍니다. 다행히 따로 설정하지 않아도 default값이 있습니다. 그러니 test를 해보고 필요하다고 판단되는 경우에만 사용하도록 합니다.
maximum-scale
반대로 최대 화면 배율 설정입니다. 화면이 극단적으로 확대되는 것을 방지해줍니다. 마찬가지로 default값이 있습니다.
user-scalable=no
유저가 크기 조절을 할 수 없게 막습니다. 반응형 웹 디자인의 목적은 사용자의 편의성을 최대한 고려하여 배려해주는 것이기 때문에 이 속성을 사용할 이유는 거의 없습니다.
미디어 쿼리 사용법
미디어 쿼리는 viewport의 width나 height 값에 따라 구간별로 다른 CSS 속성을 적용하게 해주는 일종의 프로그래밍 언어의 '조건문'같은 역할을 합니다. 이것을 사용하는 전략은 크게 두 가지가 있습니다. 하나는 데스크탑 우선 개발에 따르는 것이고 다른 하나는 모바일 우선 개발에 따르는 것입니다. 데스크탑 우선 개발인 경우 데스크탑에 최적화되게 css코드를 만든 후 미디어 쿼리로 사이즈가 더 작은 디바이스에 최적화된 예외코드를 만들어줍니다. 반대로 모바일 우선 개발은 모바일에 최적화된 css코드를 만든 후 미디어쿼리로 사이즈가 더 큰 디바이스에 최적화된 예외를 만들어 줍니다.
/* 데스크탑 우선 개발 */
/* 데스크탑에 최적화된 CSS 코드 */
@media (max-width: 768px) {
/* 모바일에 최적화된 예외 CSS 코드*/
}
/* 모바일 우선 개발 */
/* 모바일에 최적화된 CSS 코드 */
@media (min-width: 992px) {
/* 데스크탑에 최적화된 예외 CSS 코드*/
}
미디어 쿼리와 오버라이딩
미디어 쿼리 내에 따로 작성한 CSS코드는 윗 줄에서 미리 작성해놓은 CSS코드에 오버라이딩이 됩니다. 즉, 같은 선택자, 같은 속성에 대해 위에서 작성한 속성값과 미디어쿼리 내에서의 속성값이 충돌하면 미디어쿼리 내에서 작성한 값이 선택됩니다. 물론 이것은 미디어쿼리 코드를 본래 코드보다 더 밑에 작성했을 때의 얘기입니다. CSS는 같은 선택자에 대해 더 밑에 있는 줄에서 작성한 코드의 값을 채택합니다. 미디어 쿼리는 예외를 작성하므로 상단보다는 하단에 작성하는 것이 더 적합합니다. 예외에 대해 오버라이딩을 하기 위해서 반드시 CSS 파일 내에서 가장 하단에 위치해야 합니다.
* 잘못된 예시 코드
@media (max-width: 500px) {
li {
width: 100px;
}
}
li {
width: 200px;
}
위와 같이 미디어 쿼리를 본래 코드보다 더 상단에 작성하면 viewport width가 500px이하인 경우에도 미디어 쿼리 내에서 작성한 width: 100px은 적용되지 않고 더 아래쪽에 위치한 width: 200px만이 적용됩니다. 따라서 미디어쿼리는 무용지물이 됩니다.
동일한 선택자에 대해 미디어쿼리 안에 있는 속성만 적용되는 게 아니라 위에서 작성한 코드도 같이 적용된다는 것도 유의해야 합니다.
예를 들어 같은 선택자에 대해 본래 코드에서 top offset을 설정하고 미디어 쿼리에서 bottom offset을 설정해주면 top offset값과 bottom offset값 둘다 적용됩니다. 이 경우 해당 요소에 고정 height값이 적용되어 있는 상태라면, 우선 순위에 따라 bottom offset은 적용되지 않고 top offset만 적용됩니다. 예시에서는 bottom offset만 적용되기를 의도했으므로, 이런 경우에는 본래 코드에서 설정한 top offset을 초기화 시키는 코드를 미디어쿼리 내에 작성해줘야 bottom offset이 제대로 적용될 것입니다.
* 예시 코드
.snow {
position: fixed;
width: 30px;
height: 30px;
top: 10px;
}
@media (max-width: 500px) {
.snow {
top: initial;
bottom: 10px;
}
}
디바이스별 width값
디바이스 별로 다른 화면 대응을 하기 위해 미디어 쿼리를 쓰게 되면 디바이스별 표준 width값이 궁금하실 수 있겠습니다.
가장 작은 디바이스: < 576px
모바일 디바이스: <= 768px
태블릿 디바이스: 768px < x <= 992px
데스크탑: 992px < x <= 1200px
큰 화면 데스크탑: 1200px <
물론 신형 디바이스가 끊임없이 출시되기 때문에 개발시점에서 시장 상황을 잘 보고 그때그때 적절한 판단을 내리면 될 것 같습니다.
최근댓글