2011. 5. 18. 00:03ㆍIT/Tistory Tips
티스토리는 일반 웹페이지와 똑같은 구성으로 스킨을 만들 수 있어서 스킨 만들기에 제한이 없다. 모든 HTML 및 XHTML 요소를 사용할 수 있고 CSS 사용 역시 아무런 문제가 없다. 물론 사용자가 원하면 JavaScript도 사용할 수 있다. 일단 스킨을 만들려면 기본 구성을 선택해야 한다. 네이버나 다른 블로그 서비스 스킨 만들기에서 [페이지 구성] 또는 [페이지 레이아웃]이라는 이름으로 3단, 2단, 1단 등 스킨 구성을 선택하는 것처럼 티스토리 스킨에서 역시 사용자가 이 구성을 정해야 한다. 스킨 만들기의 가장 기본이 되는 페이지 구성을 만들어보자.
페이지 구성은 사용자가 어떤 스타일의 스킨을 원하는가에 따라 바뀐다. 사이드바가 없는 1단 스타일, 왼쪽이나 오른쪽에 사이드바가 있는 2단 스타일, 양쪽 또는 어느 한 쪽에 사이드바가 2개 있는 3단 스타일. 그 외에도 개인의 취향에 따라 얼마든지 다양한 레이아웃을 사용할 수 있다. 페이지 레이아웃을 지정하는 작업은 각 영역에 해당하는 div 요소를 알맞게 배치하는 것과 여백을 포함해서 정확한 너비를 정하는 것만 해결하면 끝이다.
내가 이제껏 방문한 웹페이지 또는 블로그가 어떻게 생겼는지를 잠깐 생각해보자. 맨 위엔 사이트 이름과 간단한 설명, 사용자가 원하는 곳으로 찾아갈 수 있는 내비게이션 메뉴 등이 위치한다. 그 아래 본문이 나오고 사이드바가 있기도 하고 없기도 하다. 맨 아래엔 사이드바 대신 메뉴가 들어가기도 하고 단순히 저작권 및 연락 정보 등이 표시된다. 페이지 레이아웃을 만들기 위해 가장 먼저 할 일은 맨 위에 사이트 이름이 나오는 부분(header), 내용이 포함되는 부분(article), 사이드바(aside), 맨 아래 정보 제공 부분(footer)을 나누는 것이다.
네 부분을 나누는 방법은 크게 두 가지가 있다. 하나는 div 태그로 각 부분을 지정하는 것이고 다른 하나는 HTML5의 header, article, aside, footer 요소를 사용하는 것이다. 그러나 HTML5의 각 영역 요소는 IE9, Chrome 9, Safari 5.0, Firefox 4.0, Opera 11.10 이상을 사용할 때만 문제없이 지원되므로 IE6-8이 대세인 우리나라에선 아직은 HTML5의 영역 요소를 사용하긴 이르다. 그럼 이전부터 사용해오던 div 태그로 페이지를 구성해보자.
지금 /'pəlp/ 블로그에서 사용하는 레이아웃이다. 맨 위에 header, 맨 아래 footer가 있고 그 사이에 본문이 들어가는 content, 사이드바로 사용하는 aside가 있는 2단 구성이다.
| 레이아웃 HTML 코드 |
|---|
|
<div id="header">header 내용</div> <div id="content"> <div class="article">article 내용(본문)</div> </div> <div id="aside">사이드바 내용</div> <div id="footer">footer 내용</div> |
HTML 코드는 위 표처럼 아주 단순하다. div 영역을 4개 만들면 끝이다. article은 content 내부 요소이니 지금은 생각하지 않아도 된다. 만약 사이드 바를 두 개 사용하려면 div id="aside", div id="aside1"처럼 사이드 바로 사용할 영역 개수를 늘리면 되고 반대로 사이드 바를 없애려면 div id="aside"를 없애면 된다. 그런데 위 표로 HTML을 만들면 앞에서 본 모습과는 다르게 표시된다. 아마 아래와 같은 모습일 것이다.
내용을 표시하는 content 아래에 aside가 위치한다. 앗, aside는 content 옆에 있어야 하는데? div 요소는 span이나 img 등과 달리 block 속성을 지니므로 나열된 요소가 연결되어 나오지 않고 줄 단위로 구분된다. 이때 aside를 content 옆에 붙이기 위해 사용할 것이 바로 CSS다. CSS의 float 속성을 사용하면 아주 간단하게 content와 aside가 block 속성을 유지하면서 왼쪽으로 순서대로 붙게 할 수 있다. float 속성은 block 속성을 가진 요소를 붕~ 띄워서 지정한 방향으로 몰아넣는다. float:left라는 스타일이 지정되면 해당 요소가 전부 왼쪽 정렬되고 float:right란 스타일이 지정되면 해당 요소가 전부 오른쪽 정렬된다. div class="content"와 div class="aside"에 float:left란 스타일을 지정하면 content와 aside 모두 왼쪽 정렬되므로 aside가 content 옆에 나란히 표시된다. 그런데 float 속성은 다음 요소에 상속되는 성질이 있다. 즉, 다음에 오는 footer에도 영향을 미쳐서 content가 aside보다 길 땐 footer가 content 아래에 붙고 aside가 content보다 길 땐 footer가 aside 밑에 붙는다. 이런 상황을 막으려면 footer에 clear 속성을 사용한다. clear는 float 속성을 없애는 것으로, float:left를 없앨 땐 clear:left, float:right를 없앨 땐 clear:right, float:left/ float:right를 모두 없앨 땐 clear:both를 사용한다. footer에 clear:left 스타일을 지정하면 footer가 content나 aside에 붙지 않고 제 위치를 유지한다.
위 그림에서 content는 왼쪽, aside는 오른쪽이다. 두 요소에 모두 float:left를 지정하면 왼쪽 정렬이 되므로 content는 왼쪽, aside는 오른쪽에 표시된다. 그런데 content에 float:left, aside에 float:right를 지정해도 content는 왼쪽, aside는 오른쪽에 표시된다. 둘의 차이는 content와 aside 사이의 간격 조절 방식이다. 만약 /'pəlp/ 블로그처럼 본문과 사이드바가 떨어져있다면 content, aside에 모두 float:left를 지정하고 content에 margin-right를 지정해서 간격을 조정할 수 있다. 그런데 content에 float:left, aside에 float:right를 지정하고 body의 전체 너비를 [content너비 + aside 너비 + 둘 사이 간격]으로 지정하면 지정된 body의 너비 안에서 content는 왼쪽 정렬, aside는 오른쪽 정렬되므로 둘 사이엔 일정한 간격이 생긴다. 둘 다 float:left라면 margin을 사용해서, 하나는 float:left, 다른 하나는 float:right라면 body나 기타 상위 요소의 전체 너비를 조정해서 두 요소 간격을 조정한다. 여기선 이 정도만 이야기하고 넘어가자.
| 레이아웃 CSS 코드 |
|---|
|
#header {width: 550px; height: 50px; background: #f55; border-radius: 10px; padding: 10px; margin-bottom: 5px} #content {float: left; width: 385px; height: 200px; background: orange; border-radius: 10px; padding: 10px; margin-right: 5px} .article {width: 80%; height: 60%; background: #5f5; margin: 5px auto; border-radius: 10px; padding: 10px; margin-bottom: 5px} #aside {float: right; width: 140px; height: 200px; background: #55f; border-radius: 10px; padding: 10px; margin-bottom: 5px} #footer {clear: both; width: 550px; height: 50px; background: #ddd; border-radius: 10px; padding: 10px} |
앞에서 이야기한 내용이 말로 설명하면 복잡하지만, 실제 적용된 CSS는 간단하다. CSS에서 붉은 글씨로 표시된 부분이 요소 배치 및 너비 지정과 관련된 부분이다. content는 float:left로 왼쪽으로 붙였고 aside는 float:right로 오른쪽으로 붙였다. footer에는 왼쪽 오른쪽 float 속성을 모두 없애기 위해 clear:both를 적용했다.
float 속성을 지정한 다음 할 일은 각 영역의 너비를 지정하는 것이다. content는 내가 쓴 글이 들어갈 부분이다. 내가 원하는 블로그 본문 너비가 얼마인지 생각한 다음 content의 CSS에 width를 추가한다. /'pəlp/ 블로그는 본문 너비가 760px이다. width:760px이라고 스타일에 지정하면 된다. 만약 600픽셀 너비의 본문을 사용하려면 width:600px이라고 지정한다. 그런데 화면에 표시되는 실제 content의 너비는 width에 지정한 너비에 좌우 padding 값을 더한 크기다. 만약 content 영역 padding 값이 10px이라면 화면에 표시되는 content 너비가 760px + 10px(좌측 여백) + 10px(우측 여백) = 780px이 된다. 물론 글이 표시되는 너비는 760px이다. content 너비를 정했으면 이제 aside 너비를 정한다. 사이드 바 너비를 200px로 하려면 #aside에 width:200px을 추가한다. 사이드 바 너비 역시 width에 화면에 표시되는 크기는 padding 값이 추가된 220px이다. content와 aside 너비를 정했으면 이젠 header와 footer 너비를 정할 차례다. header와 footer는 content와 aside 너비를 합친 값이다.
여기서 주의할 점은 padding과 margin을 모두 함께 계산해야 한다는 점이다. 예를 들어 CSS의 content와 aside 스타일이 다음과 같다면 header와 footer 너비는 얼마가 돼야 할까?
#aside {float:left; width:150px; padding:20px}
일단 화면에 나타나는 content와 aside의 너비와 간격을 계산한다. content 너비는 600px. 좌우에 20px씩 padding이 있으니 화면에 표시될 content 너비는 총 640px이다. aside도 같은 방법으로 계산하면 190px이다. content와 aside를 더하면 640px + 190px = 830px이다. 그런데 content엔 margin-right가 10px 지정되어 있다. content와 aside가 10픽셀만큼 떨어져 있는 것이다. 이 값 역시 더해야 한다. 그럼 총 너비는 840x이 된다.
그럼 header와 footer에 width:840px을 지정하면 될까? 아니다. header와 footer에도 padding이 지정되어 있을 수 있기 때문에 먼저 살펴야 한다. 만약 header와 footer에도 padding:20px을 지정했다면 좌우 합쳐 40px의 padding이 있으니 width는 800px이 된다. 전체를 정리하면 CSS는 다음과 같다.
#content {float:left; width:600px; padding:20px; margin-right:10px}
#aside {float:left; width:150px; padding:20px}
#footer {clear:left; width:800px; padding:20px}
블로그 레이아웃 형태에 따라 너비 계산이 조금씩 다를 수 있지만, 기본적인 레이아웃은 위에서 이야기한 div 요소 배치(float, clear)와 너비를 제대로 지정하면 완성된다.블로그 레이아웃이 완성되면 이제 그 안에 내가 원하는 바에 따라 내용을 채워 넣는다.