티스토리 스킨 만들기 1 - 페이지 구성 만들기

2011. 5. 18. 00:03IT/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 태그로 페이지를 구성해보자.

<div id="header">
<div id="content">
<div class="article">
<div id="aside">
<div id="footer">

지금 /'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을 만들면 앞에서 본 모습과는 다르게 표시된다. 아마 아래와 같은 모습일 것이다.

<div id="header">
<div id="content">
<div class="article">
<div id="aside">
<div id="footer">

내용을 표시하는 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 너비는 얼마가 돼야 할까?

#content {float:left; width:600px; padding:20px; margin-right:10px}
#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는 다음과 같다.

#header {width:800px; padding:20px}
#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)와 너비를 제대로 지정하면 완성된다.블로그 레이아웃이 완성되면 이제 그 안에 내가 원하는 바에 따라 내용을 채워 넣는다.

  • 프로필사진
    Favicon of http://looktique7.tistory.com BlogIcon 룩띠크2011.10.12 18:32 신고

    아 html이런거 잘몰라서 그런데....각 구조에 따른 html를 써놓으셧는데..그냥 현재 티스토리 스킨에 skin.html 내용 다 없애고 그걸 복사해서 넣으면 대나요? 스킨에 있는 내용이 엄청긴데 여기 올려져있는건 간단해서 여줘봅니다....자세히 설명좀 부탁드려요 ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.10.15 09:52 신고

      절대로!!!! 안됩니다!!!!


      이 부분은 단순히 스킨에 사용하는 영역을 구분한 것이라 실제 내용 부분이 전혀 없습니다. 이 내용을 적용하면 화면에 아무것도 안나옵니다.

      일단 시리즈로 구성된 글이니 차근차근 읽어보세요. 아직 완성되지 않아서 직접 적용하실순 없을겁니다.

      그리고 HTML만 완성되었다고 그대로 적용할수도 없습니다. HTML 코드에 맞춰서 CSS를 구성해야 하는데 그게 서로 맞지 않으면 제대로 적용이 안되거든요^^;;


      HTML이나 CSS를 전혀 모르시고 앞으로 차근차근 알아볼 계획이 없으시다면 이런 글보다는 실제 다른 스킨 제작자가 배포하는 스킨을 적용하시는게 훨씬 빠르고 안전합니다^^

  • 프로필사진
    Favicon of https://bloping.tistory.com BlogIcon 새라새2011.12.16 00:47 신고

    항상 무턱대고 만지작 거렸었는데..
    이렇게 꼼꼼하게 설명을 해주셔서 많이 배우고 정확히 인지가 되었네요..
    아마 조만간 스킨을 하나 만들어 보는데 도움이 많이 될 것 같습니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.12.16 15:45 신고

      멋진 스킨 만들어 배포해주세요. 저도 오랜만에 블로그 옷 갈아입고 싶은데 블로그 관리하고 스킨 만들 시간이 없네요ㅜㅜ

      제 블로그가 원하고 있습니다... '환복'!!!!plz.

      화이팅입니다~~

  • 프로필사진
    Favicon of https://dagachieunha.tistory.com BlogIcon !하은이!2011.12.22 21:58 신고

    최근에 어렵게 초대장을 얻어 블로그를 개설했는데 아무래도 html이니 css가 첨이라 많이 어렵더라구요^^;;그런데 이렇게 알기쉽게 설명해주시니 다시 용기가 나네요!감사히 읽고갑니다!

  • 프로필사진
    Favicon of http://infommall.tistory.com BlogIcon 지나가는나그네2012.01.21 18:36 신고

    저도 블로그를 운영한지는 좀 됐지만,, 스킨을 제작하려니,, 어렵네요!!!!!! 도와주세요~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.01.25 22:28 신고

      스킨 만드는 것이 처음이라면 내가 원하는 레이아웃을 가진 스킨을 수정하는 것부터 시작하는 것을 추천해드립니다. 일단 사이드바와 본문, 헤더의 위치를 정해서 그에 맞는 스킨을 CSS만 수정하면 마음에 드는 스킨 만드실 수 있을 꺼에요^^

  • 프로필사진
    Favicon of https://xiyo.tistory.com BlogIcon 엽기토끼이요2012.03.29 03:57 신고

    나는 지금 행복하다!

  • 프로필사진
    Favicon of http://yourwebsite.com BlogIcon 이름을 입력하세요2012.03.30 22:53

    티스토리 개설만 해놓고 어쩔줄을 몰라 계속 구글링을 하다가 이렇게 강같은 포스팅을 보게되서 정말 기쁩니다 ㅠㅠ
    개념부터 잡아야 나중에 응용도 가능할 것 같기에, 기초는 어찌 다지나 걱정 했는데 이렇게 잘 설명되어 있는 글이라니.... 감사합니다 잘 보고 열심히 공부해야겠어요 :-)

  • 프로필사진
    Favicon of http://artist-bback.tistory.com BlogIcon 2012.04.22 22:15

    좋은 글 정말 감사합니다. 찬찬히 읽으니 보이긴 보이네요~ㅎ

    저는 티스토리 기본 스킨 적용하면 자꾸 버그가 걸리는지 스킨이 이상하게 적용되서
    아예 제가 만들어보려고요~

    완전 초보지만~여기서 배울 수 있을 것 같아서 자주 오려고요 ^^

    감사합니다 ^^

  • 프로필사진
    Favicon of https://euntori7.tistory.com BlogIcon Euntori2012.05.06 21:57 신고

    아..정말 뭐라고 말씀드려야 할지 모르겠습니다. 너무많이 배우고갑니다.
    테이블로 정렬하는건 해봤지만 웹표준방식은 처음이라..
    이틀밤을 새면서 티스토리를 만들어가는데,, 이렇게 자세한 설명을 봤더라면
    생각보다 쉬웠을것같네요.
    푸터부분이 자꾸 이리갔다 저리갔다해서..막혔었는데
    clear 속성이란게 있었네요 ^ ^;;
    웹표준 코딩은 소스를 잘몰라서 엄청 헤맸었거든요.
    친절한 포스팅 정말 감사합니다.^^ 너무너무 감사합니다.!

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.05.07 00:15 신고

      블로그 꾸미는데 도움이 되었다니 좋네요^^
      멋진 블로그 꾸미시길 바라겠습니다!

  • 프로필사진
    Favicon of https://lemonave.tistory.com BlogIcon lemoncoa2012.06.21 08:47 신고

    검색해서 블로그 들어오자마자 감탄했어요.
    속으로 한 감탄사 "와 천재다." ㅎㅎㅎ

    만들어보려고 하는데 영 얕은 HTML/CSS지식으로는 쉽지가 않아요. ㅠㅠ
    질문이 하나 있어요.
    티스토리에 블로그 형식 말고 실제 웹사이트 처럼 템플렛을 만들어도 사용이 가능한가요?
    블로그 형식과 실제 웹사이트랑 살짝 다르잖아요.

    만들고 나서 티스토리에서 제공하는 티에디터로도 수정이 가능한지 궁금합니다. :D

    감사합니다. ^-^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.06.23 18:04 신고

      일단 티스토리는 기본 형식만 지켜주면 원하시는 대로 스킨을 바꿀 수 있을겁니다~ body 영역에 들어갈 부분에 필요한 치환자를 넣어주기만 하면 되거든요^^

      블로그 형식 말고 웹사이트 형식이라는게 어떤 이미지를 떠올리시는 건지 잘 모르겠어요. 평소 비슷하게 꾸미고 싶었던 사이트 주소를 알려주시면 좋을 것 같습니다!

      티에디터가 글 쓸때 나오는 부분 이야기하시는 건가요? 스킨 만들 때 빠뜨리거나 한 부분만 없으면, 글 작성할 때 에디터 쓰는건 문제 없습니다. 아니면 티에디터가 스킨 수정하는 건가요?;;;; 스킨 수정 역시 문제 없이 될 겁니다^^

      일단 비슷하게 꾸미고 싶은 사이트 주소 알려주시면 다시 답변 남기겠습니다.

  • 프로필사진
    Favicon of https://twr3.tistory.com BlogIcon BakaD2012.08.17 18:53 신고

    우연히 구글링 하다 들어왔네요 ㅠㅠ . .

    다른분 스킨을 사용하다 , 번뜩 " 한번 만들어 봐야겠다 "는 도전 2일째 되는 초보 입니다 !
    대쉬님은 설치형 블로그 이신지 , 아니면 html/css 인코딩과 javascript를 이용하신건가요?

    지금 티스토리 기본 스킨 끄적거리며 뭐가 뭔지 배우고 있는대 . . 나중에 스킨 제작을 한다면
    html이나 css부분을 싹 지우고 , 직접 틀을 맞춰가는건가요 ?

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.08.18 16:49 신고

      전 그냥 티스토리 이용자입니다. 티스토리에서 제공하는 블로그 틀에 HTML, CSS, Javascript를 사용해서 스킨만 꾸민 거죠^^

      특별히 생각하는 디자인이 있다면 그 디자인에 맞춰 HTML을 조금만 수정하면 될테고 다른 분들이 흔히 사용하는 기본 틀에 맞춰 가겠다면 HTML은 거의 바꾸지 않아도 됩니다. HTML로는 큰 틀, 레이아웃만 잡는 거라 보시면 되요. 맨 위에 제목이 있고 그 밑에 글이 있고 오른쪽에 사이드바를 두겠다 뭐 이런 거죠.

      실제 색상, 디자인, 글꼴과 글자색, 크기, 각 요소의 상세 위치나 그런건 전부 CSS에서 조정합니다.
      CSS는 자신이 원하는 디자인에 맞춰서 싹 새로 만드는 것도 괜찮은 방법입니다.

      아, 특정 스킨의 특정 부분이 마음에 든다! 라고 하면 그 부분의 CSS를 복사해서 사용하는 것도 도움이 됩니다.

  • 프로필사진
    Favicon of https://canor.tistory.com BlogIcon Canor2012.11.17 16:01 신고

    아아...그런 거군요...정말 감사합니다 (_ _)ㅎㅎ

  • 프로필사진
    Favicon of http://harupress.tistory.com BlogIcon 하루2014.01.21 10:57

    구글에서 검색하다가 이 글 보고 정주행 합니다.
    자세한 설명 정말 감사합니다ㅠㅠ!!! 티스토리 스킨 가이드북 하나 내셔도 될 것 같아요...
    쉬운 설명덕에 귀에 쏙쏙 들어오네요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2014.01.26 06:11 신고

      일이 바쁘다는 핑계로 블로그에 투자하는 시간이 적어져서 스킨 관련된 글을 시작만 하고 마무리를 못하고 있네요;;;
      아직 글을 보시는 분이 계시니 시간 날 때마다 틈틈이 하나씩 적어가야겠습니다.^^

  • 프로필사진
    Favicon of https://imaesblog.tistory.com BlogIcon Cacka IMae2020.05.01 10:01 신고

    안녕하세요 제가 html,css,자바스크립트배우고잇는데
    책보고 모르는거부분쪽 물어보면 답변부탁드립니다^^
    https://roachsblog.tistory.com/ 여기블로그 처렴
    Cacka Roach Technology 2019. 6. 1 이부분쪽 잘모르겠어요
    'Software' 관련 글
    'Technology' 관련 글
    'Hardware' 관련 글
    'Game' 관련 글

    Reply Edit

    이름
    비밀번호
    비밀 댓글
    등록
    댓글창
    여기부분쪽 만들고싶어서요
    검색창하고
    질문 & 답변
    빠른 질문, 답변 & 방명록
    비밀글로 쓴 글에 대한 답변에는 닉네임을 언급하지 않아 "익명성"을 보장합니다. 편안하게 글을 써주세요.
    이 곳은 방명록 역할도 함께 합니다.
    개인정보가 들어가지 않을 경우 가능하면 "공개글"로 적어주세요.
    질문은 가능하면 이메일 문의 말고 이곳에 질문을 해주세요. 질문답변의 수는 31,420개를 넘었습니다.

    이매의 블로그은 티스토리 앱 알람을 켜놓았기 때문에 질문이 올라오면 거의 곧 바로 답변 드립니다.( 특정 사정이 있는 경우 제외 )

    전화상담이 필요한 경우 비밀글로 전화번호를 남겨주시면 전화를 드립니다. 단 제가 시간이 가능할때만 허용
    https://cdmanii.com/guestbook
    여기들어가시면
    Secret

    s;s s;s

    Submit 이미지 업로드
    제블로그도 추가하고싶는데 답변부탁드립니다^^