유동형 웹사이트

반응형 웹사이트는 하나의 HTML 파일과 각 장치에 따른 여러개의 CSS 를 이용해서 대응하는 방법을 말한다. 유동형 웹사이트는 CSS 마저도 하나를 이용해서 구축을 하는데, 이렇게 할 수 있는 핵심 내용은 상대적인 크기를 이용하는 즉, % 를 이용한 크기 설정을 이용한다는 것이다.

그러나, %로 지정하게 되면 세부적인 크기들은 지정할 수가 없기 때문에 간단한 레이아웃에서만 사용하게 되는 방식이다.

width 값을 %을 이용하게 되면 부모의 크기로부터 비율을 얼마로 지정하는가의 의미가 된다.

img 요소에 max-width: 100% 을 지정하게 되면 그림 크기가 원래 크기만큼 도달한 후에는 더 이상 커지지 않고, 작아질 경우는 계속 작아진다.

max-width: 100%, min-width: 100% 을 함께 지정하면, 부모의 크기에 따라 그림도 함께 변하게 된다.