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

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

(3) 기본 블로그 레이아웃 짜기




저번 포스팅의 <(3) 기본 블로그 레이아웃 짜기>에서 블로그 레이아웃을 짜면서, 이 방법은 반응형에서 문제가 될 소지가 있으므로 고쳐야 할 여지가 있다고 설명드렸었습니다.


이 부분에 대해서 먼저 부연설명을 좀 드린 다음에, 반응형 레이아웃 코딩에 들어가도록 하겠습니다.




블로그 2단 레이아웃을 짜는 방법은 크게 두가지입니다.


1. 왼쪽에 #sidebar(서브메뉴가 올 부분)를 위치시키고 오른쪽에 #content(블로그 본문 내용)를 위치시킨다

2. 왼쪽에 #content를 위치시키고 오른쪽에 #sidebar를 위치시킨다


그 중 우리가 했던 방식은 2번입니다. 저번 레이아웃을 짤 때부터 그렇게 했었지요.


근데 1번을 하던, 2번을 하던간에, 조금 다른 관점에서 블로그 2단 레이아웃을 반응형으로 만든다면 또 크게 두가지 방식으로 나눌 수 있습니다.


1. 화면을 줄일 때 #sidebar의 가로 크기(width)의 변화 없이 #content의 가로 크기만 줄인다

2. 화면을 줄일 때 #sidebar와 #content가 비율에 맞춰서 같이 줄어든다


결론적으로 말해서 1번 방법으로 반응형 레이아웃을 짜면 <(3) 기본 블로그 레이아웃 짜기>에서 설명드린 배경이미지 넣는 방법을 그대로 쓰시면 아무 문제 없이 동작합니다. 하지만 제가 짤 것은 2번 방법입니다. 이 경우 저번 포스팅에서 설명드린 방법으로 배경이미지를 활용하면 십중팔구 문제가 발생합니다.


일단 우리가 짠 레이아웃을 반응형으로 바꿔보도록 하겠습니다.


html 부분은 변화 없이, css 부분만 변화시키면 됩니다.


tistory_p000002a.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;}


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

#header h1{width:95%;}

#container{width:95%;}

#footer{width:75%;padding:3% 10%;}

}


원래 있던 css에서 굵은 글씨체로 표기된 부분만이 변화하였습니다. 미디어쿼리를 사용하여 레이아웃을 반응형으로 만드는 부분입니다.


그 결과는 다음과 같습니다.




그냥 PC화면에 꽉 채워서 볼 경우에는 레이아웃이 깨지지 않고 잘 보일 것입니다. 대부분이 해상도 1200px 이상인 모니터 화면 쓰잖아요?


하지만 브라우저를 좀 줄여서 보면... 문제가 발생합니다.


브라우저를 줄일수록 오른쪽 #sidebar에 들어간 배경색이 #content 부분을 침범하기 시작합니다.


이럴 경우 태블릿, 모바일 환경에서는 십중팔구 문제가 발생합니다.


특히 위와 같은 모양의 레이아웃의 경우, #content 부분은 밝은 배경에 어두운 글자이고, #sidebar 부분은 어두운 배경에 밝은 글자이기 때문에 글의 가독성에도 문제가 생겨 결과적으로 장애인 웹 접근성 문제가 발생합니다. 따라서 이 문제는 반응형 스킨으로 제작한 블로그 뿐 아니라 반응형 웹사이트 제작 실무에서도 경우에 따라 상당히 심각한 문제가 될 수 있습니다.






이 문제를 해결하기 위해서는 다음과 같은 방법을 써야 합니다.


레이아웃 전체를 감싸는 #container의 최대 크기가 1140px이므로, 가로 1140px, 세로 1px의 이미지를 준비합니다. 이번 이미지도 저번 이미지처럼 repeat-y를 적용할 것입니다. 하지만 저번과는 달리 #sidebar 부분만이 아니라 #container 전체를 감싸는 배경이미지라는 것이 중요합니다.



참고로 이 이미지는 최종 완성된 반응형 스킨인 nQuark 1.0에 쓰인 배경이미지 (images/mdivbackground.gif) 와 완전 똑같습니다. 따라서 이미지를 만들기 귀찮다면 스킨을 다운받아서 이미지를 가져다 쓰셔도 무방합니다.


nQuark 1.0 다운로드 : http://zoahaza.tistory.com/335


그리고 #container 부분에 들어가는 배경이미지를 다음과 같이 바꿔줍니다.


background:url("이미지 경로") repeat-y 70% top;


결과적으로 만들어지는 CSS 부분은 다음과 같습니다.


tistory_p000002b.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_p000002a.gif") repeat-y 70% top;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;}


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

#header h1{width:95%;}

#container{width:95%;}

#footer{width:75%;padding:3% 10%;}

}


이 코드를 넣고 실행시켜 봅시다. 브라우저 사이즈를 줄여도 잘 동작합니다.




혹여나 이미지 경로는 바꾸지 않고 이미지 위치만 70% top으로 바꿔도 되지 않냐고 물어보실지도 모르겠습니다. 하지만 결과론적으로 말해서 이렇게 만들면 잘 동작하지 않습니다. 특히나 이 경우 사이즈를 완전히 키웠을 때에도 배경이미지가 제 위치로 가지 않는 것이 문제입니다.







일반적으로 반응형 사이트를 만들 때 모바일에서는 2단구조 -> 1단구조로 스킨을 바꿉니다. 왜냐하면 모바일같이 작은 화면에서 2단구조를 그대로 유지시키면 글의 가독성이 많이 떨어지거든요. 일반적으로 블로그 스킨에서 2단을 1단으로 바꾸는 기준은 720px 정도로 잡습니다만, 이번에 만들어질 스킨의 경우 양쪽 여백이 있는 구조이므로 이 기준을 조금 넉넉하게 잡을 필요가 있습니다. 따라서 기준을 800px로 잡도록 하겠습니다.


CSS 부분 하단에 다음 코드를 추가시킵니다.


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

#content{float:none;width:86%;background-color:#fff;}

#sidebar{float:none;width:96%;background-color:#2c3e50;}

}


1단구조일때에는 더이상 #container의 배경대로 2단배경이 보여지면 안되므로, float을 해제시킨 다음 배경색을 덮어씌웁니다.


결과적으로 만들어지는 CSS코드는 다음과 같습니다.


tistory_p000002d.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_p000002a.gif") repeat-y 70% top;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;}


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

#header h1{width:95%;}

#container{width:95%;}

#footer{width:75%;padding:3% 10%;}

}


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

#content{float:none;width:86%;background-color:#fff;}

#sidebar{float:none;width:96%;background-color:#2c3e50;}

}


실행시켜보세요. 잘 동작할 것입니다.




혹여나 브라우저 사이즈를 많이 줄였을 때 제목이 짤리는 문제가 발생할 수 있습니다만, 그 문제를 해결하는 방법은 다음 연재 포스팅에서 알려드리겠습니다.




* 이번 포스팅에 쓰인 방법은 <에릭 마이어의 CSS 노하우>라는 책에 나와 있는 테크닉을 응용한 것입니다. 기본 원리가 알고 싶으시면 이 책을 읽어보길 추천드립니다.





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

댓글을 달아 주세요

  1. 피아랑 2015.01.24 09:22 신고  댓글주소  수정/삭제  댓글쓰기

    와우.. 저도 반응형 블로그 스킨으로 개량해야 할 텐데요, 좋은 정보입니다.

티스토리 툴바