[XE 1.x 강좌] 3.6. 반응형 레이아웃2017. 2. 24. 23:53
반응형 레이아웃이란?
반응형 레이아웃은 화면의 넓이에 따라 컨텐츠의 배치를 유연하게 바꾸어 각 기기에 최적화된 화면을 보여주는 것이다. 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;} /* 실제 폰에서 메뉴가 짤려서 추가 */
}
강좌에서 짠 레이아웃에서는 이 정도만 해주니 완성되었다.
이제 레이아웃 강좌는 정말로 끝이 났다. 다음엔 게시판 스킨 제작으로 찾아뵙겠다. 아쉽지만 다음 연재는 지금 만들고 있는 스킨을 완성한 후에 가능할 것 같다.
'자유잡담' 카테고리의 다른 글
근황 (0) | 2018.02.16 |
---|---|
20170502 블로그 리뉴얼 (0) | 2017.05.02 |
[XE 1.x 강좌] 3.5. 레이아웃 상단 코딩 3(검색창), 컨텐츠 영역, 하단 코딩 (0) | 2017.02.24 |
[XE 1.x 강좌] 3.3. CSS 기본 설정, 컨테이너, 상단 코딩 1 (1) | 2017.02.24 |
[XE 1.x 강좌] 3.2. 레이아웃 기본 틀 만들기 (2) | 2017.02.01 |