CSS Responsive 정리내용

Responsive Web Design 이란?

웹페이지 크기에 따라 유동적으로 화면 크기에 맞춰 HTML 과 CSS가 적용됨을 말합니다. 이를 통해 가독성을 유지할 수 있고, 다양한 기기의 화면 사이즈에 최적화된 사이즈로 웹페이지를 보여지게 할 수 있습니다. (주로 데스크탑 보다 작은 기기들이 원래는 웹페이지가 작게 보여서 발생하는 불편함을 해결하기 위해 만들어짐).

 

What is The Viewport?

viewport는 웹 페이지에서 사용자가 볼 수 있는 영역을 말합니다.

뷰포트는 장치에 따라 다르며, 휴대폰의 경우 컴퓨터 화면보다 크기가 더 작습니다.

 

HTML5는 웹 디자이너들이 <meta> 태그를 통해 viewport를 제어할 수 있는 방법을 도입했다.

모든 웹 페이지에 다음 보기 포트 요소를 포함해야 합니다.

<meta name ="viewport" content ="width = device-width, initial-scale =1.0">
이렇게 하면 페이지의 크기 및 배율을 제어하는 방법에 대한 브라우저 지침을 제공합니다.

width(너비) = device-width(장치 너비) 부분은 (장치에 따라 다름) 장치의 화면 너비를 따르도록 페이지 너비를 설정합니다.

initial-scale=1.0 파트는 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 수준을 설정합니다.

 

What is a Grid-View?

gridview란 페이지를 여러 작은 column으로 나눌 수 있는데 이걸 토대로 페이지 layout을 만들 수 있습니다.

 

Building a Responsive Grid-View

responsive gridview를 만드는 간단한 방법 중 하나는 바로 box-sizing과 float 속성을 활용하는 방법입니다.

 

하지만, 실상에는 column이 2개 이상이 필요로 할 수 있어서, 세밀하게 웹 페이지를 만들기 위해서 12개의 column으로 나눕니다.

먼저 한 열에 대한 백분율을 계산해야 합니다. 즉, 100% / 12개 열에 대한 백분율이 ® 8.33%입니다.

그런 다음 12개 열 각각에 대해 클래스를 하나씩 만들고, 해당 섹션에 걸쳐야 하는 열 수를 정의하는 숫자를 만듭니다.

이렇게 아래와 같이 웹페이지 사이즈에 따라 적용될 class를 정의하고 

(ex: 웹 페이지 사이즈가 50%일때는 .col-6 클래스가 적용이 되도록 할 수 있다)

아래 HTML 코드와 같이 특정 element가 웹 페이지 사이즈 변동에 따라 적용되고자 하는 class를 명시합니다.

ex) 웹 페이지가 75%일 때는 col-9 클래스가 적용이 됩니다.

이제 아래 부분이 정말 중요합니다.

저희는 모든 element들을 float:left로 설정했기 때문에, 본래의 웹 페이지 flow에 따르지 못하게 됩니다. 그래서 다른 element 요소가 있으면 그 요소는 마치 위 float:left가 적용된 element가 없는 것처럼 적용이 되어서 겹쳐서 보여지게 됩니다. 이걸 막기 위해서 사용하는 속성이 바로, clear: both; 입니다.

그리고 display: table; 를 사용합니다. (이걸 왜 하는지는 안나와있어 인터넷에 찾아보고 추가해서 정리할게요. ) 

Media Query:

media query는 특정 조건이 만족되면 적용되는데,  미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다.

 

위 그림 처럼, 각 상황에 따른 미디어쿼리를 적용할 시에 화면이 작아졌을때 element가 작아서 보기가 불편했던 문제점들을 해결할 수 있습니다.