<HTML5+CSS3>반응형 웹사이트 만들기

반응형 웹사이트 만들기

그리드 레이아웃

-요즘 많이 사용하는 반응형 웹사이트 기법은‘그리드 레이아웃’을 이용한 것이다.

그리드란 용어가 ‘격자’라는 뜻을 가지고 있고, 브라우저 화면을 다양한 크기의 사각영역(그리드)로 나눈 후 브라우저 창의 너비에 따라 그리드의 배치를 다르게 만드는 것입니다.

그리드는 너비 값과 높이 값을 가지고 있고, 가로로 나열할 수도 있고 세로로 나열할 수도 있기 때문에 앞서 배웠던 css의 미디어 쿼리와 유동형 레이아웃을 함께 사용할 수 있다.

 

그리드 레이아웃 구상하기

-최근에는 pc,스마트폰용 웹 사이트를 만드는 것이 아니라, 하나의 사이트로 모든 기기에서 볼 수 있도록 하는 ‘반응형 웹 디자인’이 주류를 이루고 있다.

반응형 웹 디자인을 염두에 두고 사이트 레이아웃을 구상 할 때 , 사이트의 각 부분이 화면 크기에 따라 위치가 옮겨질 수 도 있다는 점을 생각해야한다.

가장 먼저 할 일은 종이에 그리거나 프로그램을 이용해 레이아웃을 구상하는 것이다.

그후 시맨틱 태그나 <div>태그를 사용하여 태그 id를 정확히 지정한다.

681참고 DO IT

 

전체 구조 만들기

681p 참고