반응형 웹디자인

저자
송태민 지음
출판사
위키북스 | 2013-11-28 출간
카테고리
컴퓨터/IT
책소개
반응형 웹디자인 제작을 위한 실무 노하우를 알려드립니다!반응형 ...
가격비교





이번에는 책 '반응형 웹디자인'에 있는 내용대로(사실 내용대로는 아니고 조금 변형을 했습니다. 책에 있는 예제 코드를 그대로 따라하는건 저작권 문제가 있을 수도 있어서요 여튼 내용상 거의 비슷하게...) 홈페이지 레이아웃을 그대로 따라 해봤습니다.


이 책에 등장하는 반응형 홈페이지 레아이웃의 전체적인 구조는 다음과 같습니다.




영역 구분은 다음과 같습니다.


회색 바탕 - wrap 영역(전체를 감싸는 div 영역)

1 - header

2 - main

3 - contents

4 - foot


위의 구조에 html5를 적용하지 않았다면 모든 영역을 div 로 구분했겠지만, 이번 반응형 웹페이지에서는 html5를 활용하므로, html5에서 추가된 <header>와 같은 요소들을 추가하여 레이아웃을 구성하였습니다.


책에서 의도하는 것과 똑같이 구현해낸 것은 다음과 같습니다.




예제 보기 : https://googledrive.com/host/0Bx1we5sxte1BckpPQjZoLTNlUDQ/interlayout001.html


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>책 '반응형 웹디자인' 실습</title>

<!-- 책 그대로 따라한 것. -->

<style>

#wrap { width:1200px; margin:0 auto; background:#bfbfbf; position:relative; }

#header { width:178px; float:left; padding:0 32px 0 33px; min-height:200px; background:#d88888; 

-ms-box-sizing:border-box;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;}

#main { margin:0 220px 0 243px; border-left:1px solid #ddd; border-right:1px solid #ddd; min-height:300px; background:#d8cf88; 

box-sizing:border-box;

-o-box-sizing:border-box;

-ms-box-sizing:border-box;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;}

#contents { width:220px; position:absolute; top:0; right:0; min-height:150px; background:#88d8b7; }

#foot { clear:both; height:120px; border-top:1px solid #ddd; background:#af88d8; }

/* responsive web design area */

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

#wrap{ width:95%; }

}

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

#wrap{ width:100%; }

#main{ margin:0 0 0 243px; border:none;}

#contents{ margin:0 0 0 243px; width:auto; position:relative; clear:left; overflow:auto; padding-bottom:10px; min-height:70px; }

}

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

}

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

#header { width:100%; float:none; padding:0; min-height:50px; margin-top:10px; }

#main { border-left:0; margin:0; clear:both; }

#contents { margin:0; }

}

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

#wrap{ min-width:300px; }

}

</style>

</head>

<body>

<div id ="wrap">

<header id="header">1 header</header>

<article id="main"><section>2 main</section></article>

<div id="contents">3 contents</div>

<footer id="foot">4 foot</footer>

</div>

</body>

</html>




이번 코드에서 가장 관건이 될 만한 부분은 tablet 모드일 때 (max-width 1024px일 때) main(2번) div 와 content(3번) div를 어떻게 setting하느냐입니다. 이 책에서는 정답이 이미 제시되어 있기 때문에 따라하기만 하면 되지만, 만일 예제 코드 없이 처음부터 디자인 시안만 받아서 다짜고짜 구현하라는 요구사항이 들어왔을 때에는 이를 구현하는 것이 쉽지 않을 것 같습니다. 그래서 <이렇게도 할 수 있지 않을까?> 라는 부분을 구현해 봤습니다. 결론적으로 말해서 어떤 방법은 예제 코드에서 구현한 것과 똑같이 구현되었고, 어떤 방법은 그렇지 못했습니다. 여러분들도 예제 코드가 없다면 하다가 이 부분에서 고생하실 수 있을 거라는 생각이 드네요. 


슬퍼2


1. contents(3번 div) 영역을 tablet mode일 때 clear:left; >> clear:both; 속성으로 바꾼다

2. main(2번 div) 영역을 tablet mode일 때 clear:both; 삽입

3. main(2번 div) 영역을 default로 float:left; 삽입 후 tablet mode일 때 float:none; 삽입


이 경우 어떻게 동작할까요?




1. contents(3번 div) 영역을 tablet mode일 때 clear:left; >> clear:both; 속성으로 바꾼다 >> 원본과 똑같이 동작합니다.

왜냐하면 이번 코드에는 float:right; 속성을 줄만한 영역이 없기 때문입니다. clear:both는 clear:left와 clear:right를 합친 효과를 가져온다고 볼 수 있는데, float:right가 아예 없으니 float:left에만 효과가 적용되어 결과적으로 원본과 수정본이 동일하게 동작합니다.




2. main(2번 div) 영역을 tablet mode일 때 clear:both; 삽입 >> 원본과 다르게 동작합니다. 일반적인 디자인적인 의도에는 맞지 않는 형태로 동작하므로, 실전에서 이렇게 코딩하는 것은 실수입니다. 개인적으로는 contents 영역에 clear:both를 삽입하고 나서의 결과가 궁금해지네요. 그렇지만 이 방법을 쓰는 경우 header 영역을 main 영역보다 길게 늘리지 못할 것이라 예상되며, 이렇게 하는 것 또한 일반적인 디자인 의도에 부합하지 않습니다.




3. main(2번 div) 영역을 default로 float:left; 삽입 후 tablet mode일 때 float:none; 삽입 >> 원본과 다르게 동작합니다. 이 경우 default일 때의 동작이 문제입니다. float:left를 삽입했을 경우 main 영역의 width가 정해져있지 않은 경우, 컨텐츠의 크기에 맞게 쪼그라듭니다. 그러나 대부분의 홈페이지 디자인은 이렇게 디자인하지 않죠. 따라서 일반적인 디자인 의도에 부합하지 않는다고 봐야 할 듯 합니다.


https://googledrive.com/host/0Bx1we5sxte1BckpPQjZoLTNlUDQ/interlayout001_modified003.html




결론적으로 이번 레이아웃을 실습해 보면서 float 속성에 대해 조금 더 정확히 이해할 수 있게 되었습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 오자서 2014.05.24 19:58 신고  댓글주소  수정/삭제  댓글쓰기

    저도 반응형 공부해보려고 하는데....
    많은 도움이 되겠네요. 감사합니다.

  2. 구름군단 2014.05.24 23:17 신고  댓글주소  수정/삭제  댓글쓰기

    틈틈히 반응형 공부해봐야겠어요~ 차츰 티스토리 블로거들께서 반응형으로 하는 걸 보니 저도 해보고 싶더라고요~ㅎㅎㅎ^^

    • 책덕후 화영 2014.05.25 11:53 신고  댓글주소  수정/삭제

      아무래도 모바일 기기에서 보여지는거 생각하면 반응형에 신경쓸 수밖에 없을 듯 해요. 물론 티스토리 같은 경우에는 핸드폰으로 접속하면 바로 모바일스킨으로 이동하는 기능이 있긴 한데 태블릿에서는 안된다는게 약점이긴 하죠...;;;

  3. 노녘 2014.06.19 23:45 신고  댓글주소  수정/삭제  댓글쓰기

    아..웹디자이너이신가봐요..?! 어쩐지 블로그가..분위기가 있어보이더라구요^-^

    • 책덕후 화영 2014.06.20 01:56 신고  댓글주소  수정/삭제

      웹디자이너는 아니고 웹디자이너 지망생입니다. ^^; 원래는 프로그래밍 쪽이 직업이었는데 어떻게 하다보니 디자인까지 해야하는 상황에 와서 웹디자인도 개인적인 부분에 한해서는 웬만한건 제가 하고 있답니다. ^^;

  4. 2016.01.08 16:15  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 책덕후 화영 2016.01.08 22:21 신고  댓글주소  수정/삭제

      반갑습니다!!! ^^ 그나저나 네이밍이 락생이네요 락하는 허영생은 완전 멋있죠... 보통 미성이면 락이 잘 안어울릴 것 같은데 영생오빠는 진짜 잘어울려요 ㅋㅋㅋ

티스토리 툴바