참고 : (1) 티스토리 반응형 스킨을 왜 만들어야 하는가?

(2) 이번 반응형 스킨에 쓰인 기법들




이번 포스팅에서는 마크업의 기본이 되는 레이아웃을 짜겠습니다.


실전으로 바로 들어가는건 아니고, 간단히 아래와 같은 구조의 페이지를 짜도록 합니다.



다소 허접해 보이지만 이 블로그의 기본 골격과 같습니다. 따라서 이 블로그의 레이아웃을 보는 데에도 참고가 많이 될 것입니다.






웹페이지 제작의 세계에서 모든 마크업의 기본이 되는 것이 바로 이 레이아웃을 짜는 것 입니다.


레이아웃을 짜는 게 안되면, 세부적인 것을 잘 짜봤자 입니다.


왜냐하면 기본적인 골격 자체가 갖추어지지 않아서 레이아웃이 다 깨지면... 웹페이지를 보는 사람으로 하여금 굉장한 불편함과 짜증을 불러 일으키게 되어 있기 때문입니다.


따라서 UX, UI적인 측면에서 레이아웃을 잘 짜는 것의 중요성은 아무리 강조해도 지나치지 않습니다.




이번에는 그 레이아웃을 짜는 것 중에, 특별히 <블로그의 레이아웃을 짜는 방법>을 이야기하고자 합니다.


블로그의 레이아웃을 짜는 것은 일반적인 기업용 웹페이지의 레이아웃을 짜는 것보다는 간단하지만, 몇가지 주의사항이 있습니다.


* 참고 : 익스플로러 구버전에 대응하는 레이아웃이므로, Top down 방식으로 반응형 레이아웃을 짜야합니다. 따라서 모바일 레이아웃을 먼저 짜는게 아니라 데스크탑용 레이아웃을 먼저 짜도록 합시다.


일단 실전으로 들어가 봅시다.




먼저 CSS를 넣지 않고 html을 간단히 짜 보고 내용을 넣읍시다.


여기서의 내용은 제 블로그 글의 일부를 복사한 것입니다.


tistory_p000001a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title>tistory_p000001</title>


</head>


<body>

<div id="header">

<h1>화영의 인생교향곡</h1>

</div>

<div id="container">

<div id="content">

<p>이 책은 제가 네이버 블로그에서 창의적인 자기계발서로 극찬했던 책 &lt;관점을 디자인하라&gt;의 이론적인 토대가 되는 책입니다. 대부분의 브랜드들이 차별화를 주장하지만 실제로는 경쟁에 내몰린 나머지 다른 브랜드들과 비슷비슷해지는 현상을 고발하면서, 진정한 차별화를 하려면 어떤 전략이 필요한지를 이야기하는 경영서적입니다.</p>

<p>이 책은 그저 남들 하는 방법과 똑같이, 똑같은 목표를 가지고 열심히 노력해서는 성공할 수 없다는 사실을 극명하게 보여줍니다. 오히려 무작정 열심히 노력하는 것보다는 관점을 바꿔서 남과는 다른 목표를 가지고 다른 방식으로 노력해야 한다는 사실을 보여줍니다. 이 책의 이야기는 기업 경영에 대한 이야기이지만, 퍼스널 브랜드를 통해 성공하고자 하는 사람들에게도 유용한 전략이 될 것으로 보입니다.</p>

<p>이 책을 읽으면서 이 책에서 이야기하는 전략이 정말 필요한 곳은 우리나라의 사회적기업이라는 생각이 들었습니다. 우리나라 사회적기업들은 일반적으로 사회적인 가치에 있어서는 우수한 브랜드이지만, 일반적인 영리기업보다 경쟁의 측면에서 불리한 위치에 서 있기 때문입니다. 경쟁에서 불리한 환경을 갖춘 브랜드가 성공하는 방법이 있다면 이 책에서 말한 혁신적인 아이디어를 통한 차별화가 될 것으로 보입니다. 하지만 이 책에서 말하는 전략을 실천하는 사회적기업은 많지 않은 것으로 보입니다. 어쩌면 그런 현실 때문에 우리나라에서 성공적인 사회적기업이 드문 것이 아닌가 라는 생각을 해 봅니다.</p>

<p>여러모로 괜찮은 책이라는 생각이 듭니다. 리디북스에서 싸게 산 책인데 내용이 좋아서 본전 이상을 뽑았다는 생각이 드네요.</p>

</div>

<div id="sidebar">

<ul>

<li><a href="#">책 리뷰</a></li>

<li><a href="#">블로그 만들기</a></li>

</ul>

</div>

</div>

<div id="footer">

Copyright by <a href="http://zoahaza.tistory.com" target="_blank">Hwayoung</a>

</div>

</body>

</html>


위의 코드를 실행시켜보면 결과는 이렇게 나옵니다.


아직 이렇다할 레이아웃이 잡히지 않은 모습인데, 사실 이는 당연한 것입니다.


CSS를 아직 넣지 않았기 때문입니다.




사실 실전에서는 html과 css 파일을 따로 나눠서 제작하고, 티스토리의 시스템도 html과 css를 나누도록 만들어져 있지만 이번에는 간단한 예제를 설명하는 것이므로 html 파일 안에 css 넣는 부분을 추가시키겠습니다.


일단 <head> 안쪽에 reset css 가 될 만한 <초기화>를 해 줍니다. 이번 예제에서 쓰는 태그가 많지 않으므로 필요한 태그들만 초기화를 시키겠습니다.


tistory_p000001b.html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title>tistory_p000001</title>

<style type="text/css">

*{padding:0;margin:0;font-size:1em;font-family:"돋움";line-height:1.5;}

ul, ol{list-style-type:none;}

</style>

</head>


이 부분을 넣어도 큰 변화는 없을 겁니다. 이는 당연한 것입니다. 레이아웃을 짠 것도 아니고 단순히 초기화만 시킨 것이기 때문입니다.







이제 기본적인 레이아웃을 짤 차례입니다.


CSS 부분만 긁어 왔으니 참고 바랍니다.


tistory_p000001c.html

*{padding:0;margin:0;font-size:1em;font-family:"돋움";line-height:1.5;}

ul, ol{list-style-type:none;}


body{background-color:#ffa;} 

#header{background-color:#333;position:fixed;width:100%;top:0;left:0;height:7em;} 

#header h1{color:#fff;width:1140px;margin:0 auto;font-size:4em;padding-top:0.15em;} #container{width:1140px;margin:0 auto;overflow:hidden;margin-top:12em;box-shadow:0 0 10px rgba(0,0,0,0.2);} 

#content{width:56%;padding:3.5% 7%;float:left;} 

#sidebar{width:26%;padding:2%;float:left;}

#footer{width:900px;padding:50px 120px;margin:0 auto;}


이 부분을 넣으면 다음과 같이 동작합니다.



<좀 이상한데요?>


당연합니다. 아직 본문 부분에 배경색을 넣지 않았습니다.






이제 본문 부분에 배경색을 넣는 작업을 할 것인데, 이렇게 잘못 오해하기가 쉽습니다.


일반적으로 본문 부분에 배경색을 넣으려면, 이 태그의 본문 부분에 해당되는 #content 와 #sidebar에 맞바로 배경색을 넣기 쉽습니다.


하지만 이 방법은 일반적으로 블로그에서 의도하는 바대로 제대로 동작하지 않습니다.


정말 그런지는... 직접 넣어 보시면 압니다.


여러분이 직접 넣으셔도 되고, 그게 귀찮으시면 제가 짠 코드를 보도록 합시다.


tistory_p000001d.html

*{padding:0;margin:0;font-size:1em;font-family:"돋움";line-height:1.5;}

ul, ol{list-style-type:none;}


body{background-color:#ffa;}

#header{background-color:#333;position:fixed;width:100%;top:0;left:0;height:7em;}

#header h1{color:#fff;width:1140px;margin:0 auto;font-size:4em;padding-top:0.15em;}

#container{width:1140px;margin:0 auto;overflow:hidden;margin-top:12em;box-shadow:0 0 10px rgba(0,0,0,0.2);}

#content{background-color:#fff;width:56%;padding:3.5% 7%;float:left;}

#sidebar{background-color:#2c3e50;width:26%;padding:2%;float:left;}

#sidebar a{color:#fff;text-decoration:none;display:block;padding:5px;}

#sidebar a:hover{text-decoration:underline;}

#footer{width:900px;padding:50px 120px;margin:0 auto;}


sidebar에 진한 색을 넣었으므로, sidebar 내부의 글씨가 잘 보이지 않을 것을 고려해서 색을 바꾸고 스타일을 좀 넣었습니다.


이 코드는 다음과 같이 동작합니다.



<어? 이상한데요? sidebar 쪽이 짤려 보이잖아요!>


네. 사실 이런 결과가 나오기 때문에 맞바로 배경색을 넣으면 안된다고 이야기했던 것입니다.






이런 결과가 나오는 이유는 우리가 본문 레이아웃을 짤 때 float:left; 라는 CSS 속성을 줬기 때문입니다. float:left는 기본적으로 컨텐츠의 크기에 맞춰져서 박스가 줄어들면서 왼쪽으로 정렬되는 특성을 가지고 있습니다. 이 것 때문에 맞바로 배경화면을 넣으면 짤려 보이는 것입니다. (정말 그런지 확인하려면 tistory_p000001c.html 부분을 확인 바랍니다.)


이런 현상을 방지하기 위해, 일반적으로 html 관련 서적에서는 이런 방법을 권장합니다. 이는 <모던 웹 디자인을 위한 html5+css3 입문>이라는 책에 나왔던 방법입니다.


tistory_p000001e.html

*{padding:0;margin:0;font-size:1em;font-family:"돋움";line-height:1.5;}

ul, ol{list-style-type:none;}


body{background-color:#ffa;}

#header{background-color:#333;position:fixed;width:100%;top:0;left:0;height:7em;}

#header h1{color:#fff;width:1140px;margin:0 auto;font-size:4em;padding-top:0.15em;}

#container{background-color:#2c3e50;width:1140px;margin:0 auto;overflow:hidden;margin-top:12em;box-shadow:0 0 10px rgba(0,0,0,0.2);}

#content{background-color:#fff;width:56%;padding:3.5% 7%;float:left;}

#sidebar{width:26%;padding:2%;float:left;}

#sidebar a{color:#fff;text-decoration:none;display:block;padding:5px;}

#sidebar a:hover{text-decoration:underline;}

#footer{width:900px;padding:50px 120px;margin:0 auto;}


차이가 보이시나요? #sidebar 대신 #sidebar를 감싸는 #container에 #sidebar에 들어갈 배경색을 주고 #content에 다시 #content에 들어갈 배경색을 준 것입니다.


이 결과를 확인하시면 정상적으로 동작함을 알 수 있습니다.







......


근데 이게 끝이 아닙니다.


블로그의 경우에는 #sidebar에 해당되는 부분에 위젯을 많이 넣기도 하고, 때로는 #content에 해당되는 블로그 본문을 아주 짧게 작성하는 경우도 있습니다. 아래 처럼 말이죠.



그래서 때로는 #content보다 #sidebar가 더 길어지기도 한답니다.


그런데 이런 상황에서 이 구조는 잘 동작할까요?


tistory_p000001f.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title>tistory_p000001</title>

<style type="text/css">

*{padding:0;margin:0;font-size:1em;font-family:"돋움";line-height:1.5;}

ul, ol{list-style-type:none;}

body{background-color:#ffa;}

#header{background-color:#333;position:fixed;width:100%;top:0;left:0;height:7em;}

#header h1{color:#fff;width:1140px;margin:0 auto;font-size:4em;padding-top:0.15em;}

#container{background-color:#2c3e50;width:1140px;margin:0 auto;overflow:hidden;margin-top:12em;box-shadow:0 0 10px rgba(0,0,0,0.2);}

#content{background-color:#fff;width:56%;padding:3.5% 7%;float:left;}

#sidebar{width:26%;padding:2%;float:left;}

#sidebar a{color:#fff;text-decoration:none;display:block;padding:5px;}

#sidebar a:hover{text-decoration:underline;}

#footer{width:900px;padding:50px 120px;margin:0 auto;}

</style>

</head>


<body>

<div id="header">

<h1>화영의 인생교향곡</h1>

</div>

<div id="container">

<div id="content">

<p>이 책은 제가 네이버 블로그에서 창의적인 자기계발서로 극찬했던 책 &lt;관점을 디자인하라&gt;의 이론적인 토대가 되는 책입니다. 대부분의 브랜드들이 차별화를 주장하지만 실제로는 경쟁에 내몰린 나머지 다른 브랜드들과 비슷비슷해지는 현상을 고발하면서, 진정한 차별화를 하려면 어떤 전략이 필요한지를 이야기하는 경영서적입니다.</p>

</div>

<div id="sidebar">

<ul>

<li><a href="#">책 리뷰</a></li>

<li><a href="#">블로그 만들기</a></li>

<li><a href="#">Front-end 개발</a></li>

<li><a href="#">웹디자인</a></li>

<li><a href="#">포트폴리오</a></li>

<li><a href="#">프로그래밍</a></li>

<li><a href="#">IT일반</a></li>

<li><a href="#">취미생활</a></li>

</ul>

</div>

</div>

<div id="footer">

Copyright by <a href="http://zoahaza.tistory.com" target="_blank">Hwayoung</a>

</div>

</body>

</html>


위의 태그의 CSS 부분은 이전 것과 완전 똑같습니다. 다만 #content에 해당되는 부분에 글을 조금 넣고 #sidebar에 해당되는 부분에 글을 많이 넣었을 뿐입니다.

이 코드를 동작시켜 보세요. 뭔가 이상함을 발견하실 수 있습니다.






이런 단점이 있음에도 대부분의 html 관련 책에서 위의 방법(부모인 #container에 #sidebar에 들어가야 할 배경색을 넣는 방법)을 권장하는 이유는, 일반적인 기업 웹사이트 제작시에는 이런 상황이 거의 일어나지 않기 때문입니다. 하지만 블로그의 경우는 다릅니다. 따라서 블로그의 경우에는 조금 다른 방법으로 이 부분을 대처할 필요가 있습니다.

일단 #sidebar에 들어갈 배경 이미지를 준비해야 합니다. 이 예제의 경우 오른쪽의 사이즈는 1140px * 30% = 340픽셀 이므로, 가로 340픽셀, 세로 1픽셀의 이미지가 필요합니다.(세로축으로 반복시킬 것이므로 세로는 1픽셀이면 충분합니다) 색깔은 #sidebar에 들어갈 색상을 칠해줍니다. 위의 예제의 경우에는 RGB 코드로 #2c3250의 색상이 들어갑니다.


이 이미지를 준비한 다음 #container의 배경 이미지로 삽입합니다. 방법은 이렇습니다.


background:url("이미지 경로") repeat-y right top #fff;


오른쪽에 고정되는 이미지이기 때문에 y축으로 반복시키면서 right top으로 고정시켜 줍시다.


마지막의 #fff는 배경이미지가 들어가지 않는 왼쪽에 자동적으로 흰색이 들어가는 효과를 만들어냅니다.


전체 CSS 코드는 다음과 같습니다.


tistory_p000001g.html

*{padding:0;margin:0;font-size:1em;font-family:"돋움";line-height:1.5;}

ul, ol{list-style-type:none;}


body{background-color:#ffa;}

#header{background-color:#333;position:fixed;width:100%;top:0;left:0;height:7em;}

#header h1{color:#fff;width:1140px;margin:0 auto;font-size:4em;padding-top:0.15em;}

#container{background:url("images/tistory_p000001a.gif") repeat-y right top #fff;width:1140px;margin:0 auto;overflow:hidden;margin-top:12em;box-shadow:0 0 10px rgba(0,0,0,0.2);}

#content{width:56%;padding:3.5% 7%;float:left;}

#sidebar{width:26%;padding:2%;float:left;}

#sidebar a{color:#fff;text-decoration:none;display:block;padding:5px;}

#sidebar a:hover{text-decoration:underline;}

#footer{width:900px;padding:50px 120px;margin:0 auto;}


코드를 실행시켜 봅니다.

제대로 동작합니다.




이제는 #sidebar에 내용이 많거나, #contents에 내용이 많거나, 어떤 경우더라도 잘 동작합니다.







사실 이 코드는 <반응형>으로 만든다면 또다른 문제가 발생하기 때문에 수정할 부분이 조금 있습니다. 그 부분은 다음 포트폴리오.4 연재 포스팅에서 이야기하도록 하겠습니다.


기본적으로 이런 방법으로 블로그의 레이아웃을 잡는다! 라는 사실을 알고 넘어가시면 되겠습니다.


읽어주셔서 감사합니다.





댓글을 달아 주세요

  1. 93m 2015.01.16 09:29 신고  댓글주소  수정/삭제  댓글쓰기

    반응형 웹 제작하실 때도 레이아웃부터 잡고 하시나요 ?

    • 책덕후 화영 2015.01.16 09:33 신고  댓글주소  수정/삭제

      사람마다 개인차가 있지만 저는 레이아웃부터 잡고 시작하는 편입니다. 사실 실무에서는 이렇게 퍼블리싱하기 전에 디자인부터 먼저 나와야합니다만...^^;

    • 김민우 2015.01.16 10:00 신고  댓글주소  수정/삭제

      웹관련된 지식이 부족한 것도 있고 주로 다루는 부분이 아니어서 그런지 보통 저는 HTML 이랑 CSS 를 동시에 사용하려고 합니다. 생각해보니 엄청 비효율적인 방식이었나봅니다.

      여담이지만 웹 퍼블리싱이 정확히 뭘 의미하는건가요?

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

      실무에서 주로 웹퍼블리싱이라고 불리는 작업은, 웹디자이너가 디자인한 대로 홈페이지에 마크업하여 화면상으로 나타나게 하는걸 의미합니다. 동시에 웹프로그래머가 기능을 구현하여 연계할 수 있게 만드는 것을 의미하기도 합니다.

      최근에는 '장애인 웹 접근성' 등의 웹 접근성이 중요하게 요구되는 시대이기 때문에, 웹 접근성에 대한 신경도 좀 써줘야 합니다.

  2. 빌노트 2015.01.16 10:58 신고  댓글주소  수정/삭제  댓글쓰기

    열정을 보고 있으면 엄청난 프로그래머가 될 것 같다는 느낌이 옵니다.
    항상 응원하고 모르면 물어볼께요 ㅎㅎㅎ

  3. 명태랑 짜오기 2015.01.16 11:10 신고  댓글주소  수정/삭제  댓글쓰기

    레이아읏을 잡는다~잘 보고 갑니다.
    저는 아직도 많이 모르는것 같습니다^^

  4. G.J. 제이 2015.01.16 12:02 신고  댓글주소  수정/삭제  댓글쓰기

    우와.. 굉장히 복잡하네요. 전 그냥.... cmsfactory 스킨을 쓰겠어욧 ㅡㅠ

    • 책덕후 화영 2015.01.16 12:30 신고  댓글주소  수정/삭제

      그냥 플랫폼에서 주어진대로 쓰겠다면 저렇게 복잡한 방법은 안쓰셔도 됩니다. ㅎㅎ 부트스트랩 등 좀 더 간편하게 만드는 방법도 많지요. 저의 경우는 제 마음대로 커스터마이징 하고 싶어서 저런 방법을 쓰는 것입니다. ^^;

  5. 스토리포유 2015.01.16 16:18 신고  댓글주소  수정/삭제  댓글쓰기

    html 에 관심없는 저에게 아주 html과 rss의 맛배기 아주 잘봤습니다.
    정말 좋은 글이네요. 추천드립니다.

티스토리 툴바