Enable!

반응형 레이아웃이란?


  반응형 레이아웃은 화면의 넓이에 따라 컨텐츠의 배치를 유연하게 바꾸어 각 기기에 최적화된 화면을 보여주는 것이다. em과 %로 코딩해서 실시간으로 비율을 다르게 조정할 수도 있고, 특정 해상도에서 보일 모습을 지정할 수도 있다. 반응형 레이아웃은 일반 모바일 최적화 레이아웃보다는 용량이 더 많이 들긴 하지만 별도의 모바일 페이지를 만드는 수고를 줄일 수 있다는 점에서 좋다.




메타태그 추가


  반응형 레이아웃을 코딩하기 전에 html에서 뷰포트를 인식할 수 있도록 메타태그를 추가해주자. 해당 레이아웃의 설정에서 헤더 스크립트에 다음을 붙여넣으면 된다.


<meta name="viewport" content="width=device-width, initial-scale=1">




반응형 코딩


  이제 css 파일을 열고 코딩을 시작하자. 기본형태는 다음과 같다.


@media screen and (넓이){

해당 넓이에서 보여질 css

}


  본인은 지난 장에서 500px짜리 레이아웃을 만들었으므로 다음과 같이 만들 것이다.


/* 반응형 레이아웃 */

@media screen and (max-width:500px){}


  이제 어떻게 해야 모바일에서 보기가 편할지를 생각해보며 css를 추가해보자. 1단은 반응형을 적응하기가 쉬운 편이다.


@media screen and (max-width:500px){

body{width:auto;left:0;right:0;margin:0;padding:0;} /* 모바일에서는 폭이 좁으므로 꽉 채우는 것이 좋다. 그러므로 body의 쓸데없는 여백은 모조리 지워주었다. */

.layout_container{width:auto;left:0;right:0;margin:0px auto;border:none;} /* 컨테이너의 마진 역시 필요가 없다. 화면을 꽉 채워야 하니까. 외곽선도 필요없다. */

  .layout_container .header .menu{overflow:auto;} /* 실제 폰에서 메뉴가 짤려서 추가 */

}


  강좌에서 짠 레이아웃에서는 이 정도만 해주니 완성되었다.



  이제 레이아웃 강좌는 정말로 끝이 났다. 다음엔 게시판 스킨 제작으로 찾아뵙겠다. 아쉽지만 다음 연재는 지금 만들고 있는 스킨을 완성한 후에 가능할 것 같다.