요즘 트렌드인 반응형 웹사이트 구현에 도전! 모바일 친화적인 포트폴리오 제작 방법을 단계별로 학습합니다.

3-1. 반응형의 개념과 미디어 쿼리

태블릿 PC, 스마트 폰 등 모바일 기기의 사용이 늘어나면서 반응형 웹에 대한 관심이 많아지고 있습니다. 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만, 그렇다고 종류별로 사이트를 만들 수는 없을 것입니다.

이러한 다양한 화면 크기에 따른 문제점을 해결하기 위한 대응 방안인 반응형 웹에 대해 알아봅시다.

반응형 웹이란 디바이스(device) 종류에 따라 웹 페이지의 크기가 자동적으로 재조정되는 것을 의미합니다.

다시 말해, 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 변화하는 디자인적인 측면의 웹 기술입니다.

반응형 웹은 오직 하나의 HTML 소스만으로 특정 장치에 최적화된 환경을 사용자에게 제공합니다.

기본 문법

<aside>

@media 조건 { /* 조건이 맞을 때만 적용될 CSS */ }

</aside>

예를 들어, 아래 코드는 화면 너비가 768px 이하일 때만 적용됩니다.

<aside>

@media (max-width: 768px) { body { background-color: #eaeaea; } }

</aside>

only 키워드는 뒤의 조건에 해당하는 조건을 뜻합니다.

<aside>

@media only screen and (max-width: 768px) { body { background-color: #eaeaea; } }

</aside>