반응형 웹을 만들어보자

반응형 웹을 보면 고무줄이 생각나는건 저뿐인가요

Author: 니용

 

반응형 웹이라는 것이 나온 건 꽤 오래된 거 같아요. 

스마트폰과 태블릿 시장이 크게 성장하면서 우리는 웹 페이지에 접근하게 되어 화면을 보고 주로 사용하는 디바이스가 스마트폰/태블릿/노트북 등 종류가 정말 다양해졌어요. 아무래도 웹 페이지 하나를 스마트폰과 PC에서 사용하는 두 개의 스타일링이 다르다 보니 이를 하나의 페이지로 통합하고 해상도에 맞춰 자동적으로 변환해주다 보니 자연스럽게 반응형 웹 페이지를 개발하는 게 선택 사항이 아닌 필수 사항이 돼가고 있는 거 같아요.

 

그래서 오늘은 간단하게 반응형 웹은 어떻게 만드는 것인지, 만드는 방법은 어렵지 않은지 간단히 살펴볼까 해요.

대표적으로 어느 정도 프론트엔드 개발에 관심을 두고 계시고 경험이 있으신 분들은 다 아시겠지만, 주로 움직이는 행위를 관장하는 것은 

HTML, CSS, JavaScript 중 JavaScript라는 것을 알고 계실 거예요.

 

그래서 반응형 웹도 화면 해상도에 따라 자동으로 변경되어야 하니 자바스크립트로 조절하는 거 아니냐? 물론 그렇게 진행할 수도 있습니다!

자바스크립트 내에서 제공되는 함수 중 현재 브라우저의 창(혹은 페이지)의 해상도(width)를 가져오는 함수가 존재하거든요!

 

let resolution = {     'width' : window.innerWidth || document.body.clientWidth, // window.innerWidth의 값이 없다면 clientWidth 값을 써요     'height' : window.innerHeight || document.body.clientHeight }

 

위의 함수를 사용해서 가져오는 것도 가능하지만 이렇게 되면 번번이 호출을 해줘야 하는 번거로움이 있을뿐더러 브라우저에 많은 부하가 가해지게 되죠. (해상도가 변경될 때마다 새로운 값을 가져와야 하는데 1px이라도 변화가 주어지면 호출하게 되거든요)

 

그래서 반응형 웹 페이지에 자바스크립트를 사용하는 것은 추천하는 방법이 아닙니다.

 

그렇게 되면 어떤 것을 사용해야 할까? 바로 CSS에서 제공하는 쿼리가 있습니다. 이 쿼리는 CSS3버전부터 사용이 가능한데요, 바로 미디어 쿼리 @media라고 합니다.

 

사용 방법은 CSS 태그나 클래스를 선언한 것과 마찬가지로 @media로 시작합니다. 

 

 

CSS 코드 외부에서 분기하는 방법도 가능합니다. 즉 A width 이하일 때는 다른 CSS파일로 연결하는 것도 가능합니다. 

 

 

조건문이 가능한 특징들은 주로 width OR height입니다.

위에서 사용한 대로 min-width 혹은 max-height와 같은 설정값들이 그 예시입니다. 

두 조건을 and로 묶는 것도 가능합니다.

 

 

디바이스별로 출력하는 스크린은 모두 다르기 때문에 device-width, device-height를 사용할 수도 있습니다.

또, 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지 구분할 수도 있는데요.

 

이 외에도 출력 장치의 해상력(dpi), 색상 테이블의 종류(8bit, 16bit), 흑백의 경우(monochrome), 그리드 방식인 경우(grid)에 따라서도 설정이 가능하니 참고하세요~

 

 

미디어 쿼리를 검색해보면서 저도 새로운 정보를 많이 습득하게 되었는데요, 앞으로 자신만의 웹페이지를 만들 때 도움이 많이 되었으면 좋겠습니다~~ 프론트엔드 개발자분들 파이팅입니다!!