모바일 인터넷 환경이 급속도로 확산되면서 웹사이트에서 반응형 화면은 이제 필수 조건이 되었다.
반응형 화면을 구성하기 위해서는 여러가지 방법들이 동원된다.
반응형 화면 구성 방법
미디어 쿼리
반응형 화면 구성에 가장 많이 활용되는것은 미디어 쿼리이다. 해상도의 변화에 따라 화면 구성을 다르게 표현할 수 있다.
요즘 티스토리 스킨에서도 미디어 쿼리는 상당히 많이 사용되고 있다. SONYLOVE 블로그에도 역시 다양한 부분에 사용되고 있다.
% (비율)
이미지나 화면, 여백 등 웹사이트의 여러 구성 요소들을 해상도의 비율에 따라 보여지도록 할 수 있다. %는 폰트 크기 같은 사이즈 단위에서도 활용된다. 나도 글을 작성하거나 스킨에서 가로 화면을 가득 채운다거나 할때 활용한다.
반응형 크기 단위
일반적으로 크기를 사용할때는 px, em, rem 등이 주로 쓰이지만 나는 반응형 크기 단위를 자주 사용하고 있다. 활용하는 방법도 간단하게 다양한 고정 수치 단위를 활용해 보기도 하고 다양한 단위들을 조합한 계산형의 방법도 활용해 보고는 한다.
visible- & hidden-
특정 해상도에서 보이게 하거나 숨김으로서 화면 구성을 다르게 하기도 한다.
위의 4가지 방법 이외에도 반응형 화면에서 활용되는 다양한 방법들이 있다.
요즘 나는 미디어 쿼리의 사용보다는 반응형 크기 단위를 적극적으로 활용하려고 한다. 미디어 쿼리를 아주 사용하지 않을 수는 없겠지만 점차적으로 미디어쿼리의 사용을 줄이려고 한다. 익숙해지려고 하다보니 더 사용하게 되는것일수도 있다.
머리속에 담아만 두는 지식들은 아무런 소용이 없다. 계속 사용해야 더 나은 활용도 가능하다.
이 블로그에도 아직 해결하지 못했거나.. 발견하지 못한 오류들이 많다.
내가 좀 더 많은 것을 배우고 경험하고 익혀.. 반응형 시대에 좀 더 완벽한 나의 SONYLOVE를 만들고 싶다.
