반응형 디자인

반응형 디자인(Responsive Web Design)

 

웹 개발자들은 모니터, 스마트폰, 미래의 가상현실과 같이 변화하고 발전하는 화면의 형태에 각각 최적화된 웹페이지를 만들고자 합니다. 이에 사용되는 기술이 미디어 쿼리입니다.

미디어 쿼리는 <style> 태그 내에 @media( ) 코드를 통해 적용할수 있습니다. 예로 화면크기가 800px 보다 작을 경우를 가정하려면 @media(max-width:800), 화면 크기가 1500px보다 클 때부터를 가정하려면 @media(min-width=1501) 과 같이 ( ) 안에 조건을 입력하는 방식입니다.

그 후 화면 크기에 따라 변화시키고 싶은 태그, 혹은 그리드는 <style> 태그 내에 있는 코드를 복사해 원하는대로 편집하면 간단합니다.