6일차 : 반응형 디자인

6일차 : 반응형 디자인

 

※ 반응형 웹/디자인?

- 웹페이지의 크기를 변경했을 때, 요소들을 각 크기에 따라 다르게 보여주는 것

 

지금 우리는 반응형 디자인에 매우 익숙합니다. 컴퓨터 스마트폰 태블릿과 같은 각각의 기기 뿐 아니라 여러가지 다양한 웹브라우저에서 같은 페이지를 같은 모습으로 확인할 수 있습니다. 그러나 반응형 디자인이 등장하기 전에는 웹페이지의 요소들이 다양한 환경에서 적응할 수 없는 경우가 대부분이었습니다. 만약 각 요소들의 사이즈가 정해져 있다면, 큰 화면에서 보는 내용과 작은 화면에서 보는 내용이 다르겠죠. 

 

그러면 반응형 디자인은 어떻게 구현할 수 있을까요?

 

바로 미디어 쿼리를 통해서 구현할 수 있습니다.

 

우선 미디어 쿼리라는 파일을 만들어 봅시다.

간단하게 웹페이지를 하나 만들고, responsive라는 div를 하나 만들어 줍니다.

 

그리고나서 검사(inspection)를 해줍시다. 여기서 창의 크기를 움직이면 창의 픽셀 크기를 확인할 수 있습니다.

여기서 미디어쿼리를 사용하여 스크린 사이즈에 따라 div를 안보이게끔 설정할 수 있습니다.

예를 들어, 화면이 800px보다 클 때는 div를 사라지게 하고 싶다면 다음과 같이 입력해 주면 됩니다.

 

 

그러면 신기하게도 화면을 800px보다 크게 만들면 위처럼 화면에서 아무것도 안보이는 상태로 변합니다.

만약 위 코드에서 min을 max로 바꾼다면, 스크린의 폭이 800px보다 작은 경우 화면에서 사라지겠죠.

 

미디어 쿼리를 이용하면 화면의 크기라던지, 특성들에 따라서 어떤 조건을 만족할 때만 CSS의 내용이 동작하도록 만들 수 있습니다. 다양한 종류의 창이 존재하는 곳에서 미디어 쿼리는 꼭 필요한 존재라고 할 수 있습니다.

 

 

전에 그리드를 사용해서 영역을 표시해줬던 페이지 생각나시나요?

줄을 만들어 줬는데 페이지가 너무 작아지면 이런식으로 어색했습니다.

 

 

이 페이지를 창의 크기가 작아지면 줄이 사라지도록 해보겠습니다.

 

그리드 부분을 블록으로 바꿔주고, ol과 h1의 보더를 없애줬어요!

창을 줄이니 저절로 선이 사라졌죠?

 

800px 이상 키우면 이렇게 다시 선이 생깁니다.

 

모바일 버전과 pc버전에서 다르게 보이는 웹사이트들이나, 가로모드와 세로모드가 다르게 보이는 사이트도 이런 식으로 반응형 디자인인 미디어 쿼리를 사용했다고 보면 됩니다.