반응형 웹과 미디어쿼리
반응형 웹(Responsive Web)은 웹 페이지가 다양한 장치와 화면 크기에 대응하여 최적의 사용자 경험을 제공하는 웹 디자인 접근 방식입니다.
원리는 주로 미디어 쿼리(Media Queries)를 사용하여 사용자의 화면사이즈에 맞는 스타일링을 사이즈에 맞게 미리 해두는 방식입니다.
본 포스팅에서는 기본적인 CSS를 이해하고 있다는 가정하에 조금 덜 중요한 내용은 걸러내고 10분만이 이해하고 스스로 제작할수 있도록 하는것에 목적을 두고 있습니다.
뷰포트의 크기별 디자인
방문자의 뷰포트(브라우저의 웹페이지 영역)의 사이즈에 따라 다른 디자인을 적용하는 예시를 들어보겠습니다.
<style>
#ex1 {border:1px dashed #ccc; padding:20px; display:flex; gap:10px;}
#ex1>div {background:red; height:100px; flex:1}
@media (max-width: 800px) { /* 뷰포트 너비가 800px 이하인 경우에만 적용될 스타일 */
#ex1>div {background:orange}
}
@media (max-width: 500px) { /* 뷰포트 너비가 500px 이하인 경우에만 적용될 스타일 */
#ex1>div {background:green}
}
</style>
<div id="ex1">
<div>브라우저의 사이즈를 변경해 보세요~</div>
</div>현재 보고 있는 페이지의 브라우저의 사이즈를 변경해 보면 미디어 쿼리가 작동하는 것을 보실수 있습니다.
뷰포트의 폭값이 800px 이상인 경우에는 빨간색, 800px 이하인 경우에는 주황색, 500px이하인 경우에는 녹색으로 배경색이 바뀔것 입니다.
여기서 중요한 것은 화면 사이즈별 CSS 적용을 할수 있느냐인데 그 핵심은 @media (max-width: 500px) { 적용할 스타일 } 이 부분이니 꼭 이해하셔야 겠죠.
가로/세로형 디자인
웹페이지에서 중요한 것은 가로 폭에 대응하는 것이기 때문에 폭에 대한 스타일링만으로도 충분히 반응형 웹 페이지를 만들수 있습니다.
하지만 경우에 따라서는 사용자의 모니터가 세로형과 가로형에 따라 디자인을 구분해서 표현할 필요가 있습니다.
이 경우에는 다음과 같은 조건식을 이용합니다.
<style>
#ex2 {border:1px dashed #ccc; padding:20px; display:flex; gap:10px;}
#ex2>div {height:100px; flex:1}
@media (orientation: landscape) { /* 뷰포트 방향이 가로인 경우에만 적용될 스타일 */
#ex2>div {background:orange}
}
@media (orientation: portrait) { /* 뷰포트 방향이 세로인 경우에만 적용될 스타일 */
#ex2>div {background:green}
}
</style>
<div id="ex2">
<div>화면을 돌려 가로형/세로형 전환해 보세요~</div>
</div>이번 예제도 모바일이라면 가로형 세로형 일때 배경색이 바뀌는 것을 확인할수 있습니다.
PC도 브라우저의 크기를 가로가 길면 가로형, 세로가 길게 변경하면 세로형으로 인식하여 보여줍니다.
본 예제에서는 이해를 돕기 위해 간단히 배경색만 적용하였지만 필요한 스타일링을 한다면 충분히 반응형 웹을 제작할 수 있습니다.
미디어쿼리 사용시 주의사항
반응형웹을 위한 미디어쿼리 기본 원리를 이해 했다면 다음 주의사항을 읽고 실제 적용시 도움이 되었으면 좋겠습니다.
- 사이즈의 속성은 하나만 사용:
max-width와 min-width로 사용자의 크기에 대응하도록 설계할수 있는데 이것을 섞지 않고 한가지 속성만 사용해야 합니다.
이유는 사이즈별 대응할 영역이 겹치기 때문입니다. - max-width 속성을 사용하는 경우:
PC버전이 기본 스타일되기 때문에 PC방문자가 많은 사이트에 유리하고 CSS 스타일링 순서는 웹, 테블릿, 모바일 순으로 큰거에서 작은 화면 단위로 디자인 해야 합니다. 이유는 구체성 때문! - min-width 속성을 사용하는 경우:
모바일 버전이 기본 스타일이 되기 때문에 모바일 방문자가 많은 사이트에 유리합니다.
CSS 스타일링 순서는 max-width 속성과 반대로 모바일, 테블릿, PC 순으로 작은거에서 큰 순으로 스타일링 합니다.
이는 미디어쿼리의 원리는 구체성에 의해 적용되는 것인데 순서를 바꾸면 많은 문제를 야기하여 CSS가 적용되지 않는 문제가 발생할 수 있기 때문입니다. - 레이아웃의 폭값 지정시:
반응형시 손이 덜가고 유동적으로 잘 보이게 하려면 레이아웃의 폭값을 고정값 보다 %와 min-with, max-width를 활용하여 잡는 것이 좋습니다. 기본적으로 가로 스크롤이 생기지 않도록 설계하는 것이 반응형에 유리하기 때문입니다. - N스크린에 대응:
스마트폰의 최소 사이즈 기준인 가로폭 320px까지 가로 스크롤이 생기지 않도록 디자인을 하는 것이 좋습니다.
종종 반응형시 적용하는 표준 사이즈를 물어보시는 분들이 많지만 이는 불필요한 내용입니다.
세상에 다양한 미디어와 다양한 사이즈가 있는데 표준 사이즈는 의미가 없고 모든 사이즈에 대해 잘 보이도록 유동적인 설계를 해야 합니다.
그러기 위해서는 표준 사이즈가 아닌 본인 웹페이지 디자인에 맞는 반응형 사이즈를 적용해야 합니다.
부디 도움이 되서 미디어 쿼리를 자유롭게 사용하셨으면 좋겠습니다.
응원하겠습니다. 🙂