티스토리 블로그 스킨 분석해보자 - 둘째편

이전글 보기 :
2009/04/21 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 처음편

* 개요

티스토리 블로그 스킨에 대해서 전반적인 이야기를 해보겠습니다. 실제 스킨의 코드를 보면서 살펴보죠.
너무 전문적인 내용은 링크로 대체하겠습니다.
틀린 점이 있다면 지적해주시면 감사하겠습니다. 수정하도록 하겠습니다. *

참고주소들 :
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4
http://www.mozilla.or.kr/ko/docs/web-developer/web-standard-guide-2005.pdf
* 테터툴즈 스킨 레이아웃 간략 보기



테터툴즈 스킨 레이아웃 간략 보기


티스토리 스킨의 일반적인 구성도

container 안에 상단에는 header 가 중간에는 content 와 sidebar 가 있고 아래에는 footer 가 있는 형태가 보통입니다.
당연히 sidebar 를 양쪽에 생성도 가능하며 아래부분에다가 sidebar 를 둘 수 도 있습니다.


*skin.html 살펴보기

자신이 사용하는 스킨의 skin.html 을 열어보면 복잡하겠지만 큰 부분을 정리를 해서 단순화 시켜보면


( #id 의 이름은 조금씩 다를 수 있습니다 )

div 로 레이어(layer) 구성이 되어 있고 container 안에 header , content , sidebar , footer 가 있는 형태입니다.




* 자세히 살펴보기 (http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=3)



스킨은 XHTML 을 따르고 있습니다. XHTML (eXtensible HyperText Markup Language) 는 HTML 을 좀더 명확하게 구조화 시킨 개념이라고 보면 되겠습니다. 큰 특징으로는 태그를 열었다면 반드시 닫는 형태로 되어있습니다.

몇가지 예를 들어보겠습니다.

틀린 예시:
<img src=/images/test.jpg><br>
<h1>텍스트

옳은 예시:
<img src="/images/test.jpg" width="40" height="30" alt="테스트 그림" /><br />
<h1>텍스트</h1>


img 태그의 경우 보통 위와 같은형태로 쓰지만 틀린점을 지적해보자면 열었을때 닫지를 않았습니다. 보통 짝지가 없는 태그의 경우
끝을 " />" 의 형태로 닫아주면 되겠습니다. 그리고 속성값은 모두 소문자로 모두 적어주어야합니다. alt 의 속성은 보통 사용하지 않는걸로 알고있지만 써주는것이 좋습니다. 대체문자는 만약 그림이 어떤 문제로 인해서 뜨지를 못했을때 대체해서 그림자리에 뜨게 되어
그림이 있는 자리임을 알려주게 됩니다. <br> 의 경우도 <br /> 와 같이 닫아주어야합니다.

웹표준이라는건 강압성이 있는것은 아닙니다. 하지만 W3C 에서 이렇게 하는것이 옳다 라고 회의가 끝나면 그렇게 지정하고 권고안으로 됩니다. 여러개의 웹 브라우저가 지구상에는 존재하며, 앞으로 서로 다른 브라우저에서 같은 화면이 나오도록 이끌어 나가기 위해서의 권고안이라고 보면 될것같습니다. 하지만 웹표준이라고 해서 반드시 그게 옳다고 생각하는건 조금 잘못이 있으며, 아직까지도 이렇게하는게 좋다 나쁘다등의 토론을 통해서 권고안이 계속 제시가 되는 상태입니다. 앞으로도 쭉 그렇게 될것입니다.


* 실제 Skin.html / style.css 분석해보기
테스트 페이지 : http://cdmaniiii.tistory.com

티스토리 또는 테터툴즈 기반의 스킨을 살펴보면 skin.html 과 style.css 로 크게 구성되어있고 나머지 이미지들과 또 추가적으로 자바스크립트등을 사용해서 꾸며놓은게 있다면 .js 파일등도 몇개 있는 형태로 되어있습니다.

크게 중요한것은 skin.html 과 style.css 입니다. skin.html 은 내부적으로 대부분 div 의 아이디를 가지고 있는 레이어 형태로 이루어져 있으며, 이 레이어들이 실제 위치하고 그리고 배경그림은 어떻게 되며 색은 어떻게되고 글꼴은 어떻게 되지 그리고 링크의 형태는 어떻게될지등은 style.css 에서 지정되어 있습니다.

skin.html 의 뼈대부분과 그리고 살을 입히고 색을 입히는 style.css 의 스타일시트 부분을 분리하는것이 웹표준에서 강조하는 부분입니다. 분리를 했을때의 장점은 분리를 하지 않고 각 레이어마다 스타일을 따로 지정한다면 공통된 부분을 다시 여러번 지정해야하기때문에 텍스트 용량이 늘어나게 되며,  만약 html 파일의 상단부분에 스타일시트를 따로 구분해서 작성을 한다고 치더라도 어쩔 수 없이
반복되는 부분이 생기기 때문이며, 그리고 따로 분리를 해놓을경우에는 style.css 를 한번만 내려받고 난뒤에는 다시 읽어들일 필요가 없기때문에 속도에서 이득을 보기 때문입니다. 또하나는 분리를 해놓고 한쪽에 모아서 써놓을경우에는 css 만 살펴보고 수정하는것만으로도 페이지의 모든 스타일을 한번에 모두 지정하는것이 가능합니다.

이렇게 하기 위해서는 한가지 지켜야할것이 있으니, 반드시 태그는 태그의 목적에 부합되는것을 사용해야한다는 점입니다.
(이부분에 대해서는 따로 포스트를 만들어보겠습니다 * )
티스토리의 기본스킨은 테터툴즈 기반의 스킨으로 웹표준을 잘 이행하고 있습니다. 모델로서 적합하죠.

위에 예제로 제시한 스킨의 실제 내부를 살펴보면서 하나하나 알아보도록 하겠습니다.


* skin.html 상세 설명




해당 스킨을 위에서 부터 아래까지 차례대로 설명을 하겠습니다.



가장 윗부분에는 여러 브라우저에서 페이지가 읽어질때 표현 방법을 미리 지정하여 적절하게 표기하도록 선언하는 부분이 있습니다.

선언된부분은 XHTML 1.0 표준 문서 형식이군요. 붉은 색 글자료 표기한 부분에 Strict , Transitional , Frameset 으로 3가지로 구분이 됩니다. 보통은 Strict , Transitional 로 구분을 하는데 Strict 는 엄격한 잣대로 XHTML 을 지정한다. Strict 로 지정을 해두면 skin.html 내에 따로 각 태그마다 스타일을 지정해놓았다고 치더라도 그것보다는 style.css 에 있는것을 지정하게된다. 어떻게 보면 가장 이상적인것이긴하지만, 블로그를 쓰면서 각종 애드온을 설치하고 따로 스타일을 어쩔 수 없이 지정하는 경우도 있고 , 지금은 웹표준에서 제외된 태그들도 가끔 사용자가 쓰는경우도있기 때문에 Strict 로 지정해둘 경우 자신이 원하는대로 출력되지 않을 수 도 있다. 이유는 위에 설명한 바와 같다. 지금은 그것보다는 조금은 덜 엄격한 Transitional 로 지정이 되어 있다. 때문에 따로 skin.html 에 스타일을 지정해서 넣더 라도 또는 웹표준에서 더이상 지원하지 않기로 정해진 태그를 쓰더라도 스타일로 지정이 되며 사용도 가능하게 된다.

조금 더 자세히 알아보고 싶은 분은 아래의 링크를 참조하기 바란다.

참고 주소 : http://www.w3.org/QA/2002/04/valid-dtd-list.html

Recommended DTDs to use in your Web document.

When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult. To ease the work, below is a list of recommended declarations that you can use in your Web documents.





XHTML 의 일반 문법을 준수하겠다는 내용이다. skin.html 에는 <head><title></title></head><body></body> 로 반드시 구성이 되어있어야하며, 태그를 반드시 열었다면 닫아야한다. (<p></p> <i></i> 등등) 그리고 모든 속성값은 따옴표 나 작은 따옴표 로 묶어야하며, 모든 요소 및 속성값은 소문자로 적어야한다.

틀린 예시
<a HREF=http://cdmanii.tistory.com>틀린예</A>
<img SRC="/images/cdmanii.jpg" border=0>  

옳은 예시
<a href="http://cdmanii.tistory.com" title="cdmanii블로그">옮은예</a>
<img src="/images/cdmanii.jpg" border="0" alt="" />

한가지 더 추가하자면 <br> 의 경우 <br/> 로 쓰는경우가 있지만 이전 브라우저와의 호환성을 위해서는 공백을 넣어주는게 좋다

<br>,<br/> 는 <br /> 로 써주는것이 좋으며, 가능하다면 줄내리는 것은 <br /> 을 사용하지 않고 style.css 에서 줄간격을 조정하는등으로 인해서 조정해주는것이 좋다.






<head></head> 내에는 이 문서(skin.html) 에서 선언해야 할 부분들이 내포 되어있다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
는 컨텐츠 타입을 지정하는 부분으로 케릭셋이 utf-8 로 되어있다는걸 미리 지정을 해놓는 부분이다. 웹브라우저에서 인코딩에 해당하는 부분이며 이부분을 미리 지정해 놓으므로서 문서내에 포함된 글들이 옳바르게 출력되는걸 돕는다.


<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
웹브라우저의 블로그 주소 부분에 rss 에 대한 부분을 나타낼 때 필요한 부분이다. title 와 href(경로) 는 치환자로 되어있으며 블로그의 환경설정에서 지정해둔 타이틀과 rss 주소를 따라가게 된다. 또는 직접 RSS 주소를 기입할 수 도 있다.


<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
스타일시트 파일의 경로를 지정해주는 부분이다.


<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
블로그의 즐겨찾기부분에 사용될 ico 파일을 지정하는 부분이다. 블로그 환경설정에서 이부분을 설정해놓는다면 이태그에서 이부분이
동작하여 해당 ico 파일을 뛰우게 된다.


<title>[##_title_##] :: [##_page_title_##]</title>
<title></title> 는 대부분 알다시피 문서의 타이틀을 선언하는부분이다. 내부에 있는 치환자를 지워버리고 자신이 원하는 내용을 넣어버릴 수 도 있긴하지만, 스킨은 모든사람이 쓰는 부분이기때문에 해당 설정내용에 따라서 변환하는 치환자를 사용했다.
[##_title_##] 는 블로그의 타이틀(제목)을 의미하며
[##_page_title_##] 는 블로그의 각 페이지의 제목을 의미한다.

예를 들어 블로그의 타이틀([##_title_##])은 cdmanii's computer story 이며, 블로그의 어떤글의 제목([##_page_title_##])이 "오늘 블로그 시작" 이라면, 위에것이 동작하면 문서의 타이틀이 아래와 같이 출력된다

cdmanii's computer story :: 오늘 블로그 시작 - Internet Explorer

가지 여기서 이라면 [##_title_##] :: [##_page_title_##] 의 순서를 [##_page_title_##] :: [##_title_##] 로 바꿔줄경우 검색사이트에서 앞부분의 유효한 제목 즉 각 게시물의 제목을 먼저 읽기 때문에 검색에 유리하다고 한다.






<body></body> 는 실제로 문서에 보여질 부분을 지정하는 부분이다. 안쪽을 보면 <s_t3></s_t3> 로 되어 있는것을 볼 수 있다.
문서내에 자바스크립트를 쓸 수 있기때문에 지정하는 부분이다.




이제부터 나올부분은 실제로 div 로 이루어진 실제 부분을 밝혀 볼 차례이네요.




처음 볼 부분은 테스트 스킨의 상단 부분 입니다. 붉은색으로 넓게 표시된 부분은 wrapTop 라는 id 를 가진 div 틀이며, 그 안에는
tCenter 와 tRight 의 두개의 클래스 이름을 가진 2개의 div 틀이 있습니다.



div 는 아시다싶이 레이어를 선언하는 부분입니다. 그런데 조금 이상하죠? 따로 위치나 넓이 속성값을 나타낸 부분이 전혀 없습니다.
아이디만 wrapTop 이라고 덩그러니 있네요. 이제 style.css 에서 wrapTop 라는 아이디의 속성값을 찾아봅니다.




해당 레이어 아이디를 위와같이 지정을해놓았군요. background : 는 백그라운드를 지정하는 부분이며 transparent 는 투명하게, url 은 배경주소는 (images/box_topleft.gif) 를 no-repect left top 는 반복하지 않고 왼쪽위에서 그림 시작, margin-top: 30px 는 상단에 공백을 30px 두라는 뜻입니다.

좀 더 상세한 CSS 에 대한 설명은 다음편에서 준비하겠습니다. *

* 치환자 및 반복되는 부분 처리

skin.html 의 내용을 살피다보면 치환자라는 부분이 있습니다.




위에 코드에서 보면 [## 로 시작하는 특이 한 부분이 있습니다. 이부분이 치환자 입니다. 치환자는 즉 말 그대로
상황에 맞게 치환이 되는 부분을 뜻합니다.

치환자에 대한 좀 더 자세한 설명 (티스토리 문서)
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4

예를 들어 보겠습니다.

<a href="[##_blog_link_##]">블로그홈</a>


위에 줄이 스킨에서 실행이 되면 [##_blog_link_##] 치환자는 자신의 블로그 주소를 뜻하므로 자신의 블로그
주소로 치환(대체) 됩니다.

즉,

<a href="http://cdmaniiii.tistory.com/">블로그홈</a>


로 바뀌게 됩니다.


당연히 아래와 같이 임의로 수정해서 넣어도 아무런 문제없이 동작이 됩니다. 하지만 치환자를 왜 쓸까요? 이유는 스킨은 혼자만 쓰는것이 아니기 때문입니다. 다른사람에게 자신의 스킨을 줬을때 저 주소부분을 다시 자신의 주소로 일일이 바꾸어야할까요?
만약 아래와 같이 치환자 없이 써 두었다면 일일이 다 바꾸어야 하는 수고를 감수 해야 할것입니다.

하지만, 치환자로 해두었다면 타인의 스킨을 받아서 자신의 스킨에 적용해도 치환자가 적절하게 치환되면서 자신의 스킨으로 탈바꿈
하게 되는것이죠. 때문에 치환자는 필요합니다.


-

반복 되는 부분의 처리도 있습니다. 예를 들면 댓글이 달리는 부분이나, 또는 글 보관함등을 찍어 줄 때 필요합니다.
보통은 홈페이지를 만들때 특히 게시판이겠죠, 댓글이 달리는 부분은 반복문을 사용하여서 그부분을 반복하여 찍습니다.
그부분을 수정하여 얼마든지 꾸밀 수 있죠. 하지만, skin.html 을 살펴보면 for while 등의 반복문은 보이지 않습니다.

글 보관함을 예로 들어보죠





글보관함은 자신이 쓴글의 달(month) 순으로 갯수가 저장되어 쉽게 그 달에 쓴 글을 찾을 수 있습니다.

이부분이 어떻게 구현되어있나 살펴보죠.



생각보다는 간단하게 되어있죠? 차례대로 살펴보겠습니다.

479 줄의 <s_sidebar_element> 는 이 부분이 사이드바의 한 요소라는 것을 나타내는 부분입니다. 맨 아래쪽에는 닫히는 태그가 있죠.
480 줄은 주석입니다. 이부분이 최근 보관함 모듈이라는 걸 써놓았네요.
481 줄은 레어어를 구성하고 id 는 archive 를 주었습니다. style.css 에 해당 아이디를 찾아가면 스타일을 어떻게 정의했는지 알수있습니다.
482,483 줄은 글 보관함의 제목과 그리고 리스트 형태로 뿌리기 위해서 <ul><li></li></ul> 로 구성했군요.

그런데 여기서 자세히 봐야할 부분은 빨간색 박스 부분입니다. 자신이 12개월동안 글을 적었고 각 달마다 글을 꾀 많이 적었다면
리스트는 길게 나타날 것 입니다.

이 리스트 부분에서 반복되는 부분이 저 빨간색 박스 부분으로, 저 빨간색 박스부분은



글보관함의 저 빨간색 박스 부분을 나타냅니다. 코드상의 빨간색 박스 부분이 반복되면서 글보관함의 실제 리스트를
1개씩 만들게 되죠.

즉 <s_archive_rep></s_archive_rep> 안에 있는 부분이 실제 값을 모두 찍을 때까지 반복되게 됩니다.

반복되는 부분의 내용을 살펴보면


<a href="[##_archive_rep_link_##]">[##_archive_rep_date_##] </a>
<span class="cnt">([##_archive_rep_count_##])</span>

로 되어있네요. 이부분은 처음 1번 실행될때

2009/04 (1) 이라는 값을 만듭니다.

두번째 반복될때는

2009/02 (1) 이라는 값을 찍게 되죠.

치환자를 설명하면,

[##_archive_rep_link_#] : 각 월별 보관함으로 이동할 주소
[#_archive_rep_date_#] : 년과 월을출력
[#_archive_rep_count_#] : 각 월별에 속한 글의 갯수

입니다. 쉽게 풀어 쓰자면

<a href="[각 월별 보관함으로 이동할 주소 ]">[년과 월을출력] </a>
<span class="cnt">([각 월별에 속한 글의 갯수])</span>

가 되는것이죠. 이렇게 반복되면서 출력이 되게 되어 있습니다.



잘 살펴보면 이 이외에도 많은 부분이 반복되는 구문이 사용되었음을 알 수 있습니다.
반복문을 사용하면 코드가 더 간결해지고, 속도가 더 빠르다는 장점이 있습니다.


이정도에서 일단 둘째편을 마치고 다음편에서는 CSS 를 사용하여 꾸미는 방법, 그리고 자신의 블로그를 꾸미는 방법들을
소개해보겠습니다 *

이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

s;s s;s

     이미지 업로드

  1. 이전 댓글 더보기
  2. pop-up 2009.07.26 01:34 신고

    정말 유용한 정보네요, 특히나 제목 설정하는 부분은 바로 실행해보았습니다.
    검색에 유리해지길 바라며~

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.07.26 11:18 신고

      바꾸면 확실히 검색에 유리해집니다 ㅋ 태그나 또는 검색에 활용되는 단어가 포함된 제목부분이 블로그 명 보다 먼저나오기에 유리해지죠 ㅋ 바꾸신거 잘하신거예요 ^^

      perm. |  mod/del. | 
  3. 므흣한아저씨 2009.07.26 02:42 신고

    br에 공백을 관련 팁은 처음알았습니다. @_@
    멋진 팁 너무 잘보고 가요~

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.07.26 11:19 신고

      저도 정확히 왜 뛰우는지 이유를 알 수 없었지만 글 적으면서 저도 이해를 하게 됬어요. ㅋ 저도 글쓰면서 많이 배운 ;; 다음에는 팁 관련 글 적어볼께요 ^^

      perm. |  mod/del. | 
  4. 소인배닷컴 2009.07.26 12:03 신고

    ㄷㄷㄷ;; 이런 전문적인 글을. . . 대단하십니다. . . +_+

    perm. |  mod/del. |  reply.
  5. 하늘다래 2009.07.26 17:57 신고

    윽...
    이 귀찮은 작업을
    일일이 다 하시다니;;;;

    전 그냥 소스 수정하고
    기록은 안남긴다는;;

    분석하려면
    끝도 한도 없이
    글이 길어지니깐요 ㅋㅋ

    perm. |  mod/del. |  reply.
  6. 로이스 2009.07.26 20:00 신고

    와 정말 대단하시네요.
    전 그냥 제가 아는 범위안에서 스킨이 틀어지지 않게만 고쳐서 쓰긴 하는데..
    바꾸고싶은게 한두개가 아니죠.

    코드를 다 보는것도 공부라 게으름을 하고 있답니다.

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.07.29 16:48 신고

      저도 그래요. 그래도 뭔가 괜찮은걸 발견했을때는 너무 기분좋더라구요. 글쓰면서 저도 뭔가 자세히 알아가는 기분이구요 ^^

      perm. |  mod/del. | 
  7. Yasu 2009.07.26 23:59 신고

    정말 정리를 깔끔하게 잘 해 주셨네요. 시간날때 한번 쑥 훑어봐야겠어요~
    그리고 요즘에 제 스킨이 ie에서 무한로딩이 자꾸 생긴다던데...
    아무리 살펴봐도 원인을 못 찾겠네요. 저는 괜찮은데... 다른분들 컴의 문제일까요??

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.07.29 16:49 신고

      여러번 야수님 블로그 갱신해봤는데 깔끔히 잘 뜨는데요. 아마도 잠깐 티스토리 서버가 그 시간대에서만 느려져서 그런건 아닐지.. 지금은 너무 깔끔히 잘 뜨네요.

      perm. |  mod/del. | 
  8. 구차니 2009.07.27 09:33 신고

    오 나중에 보고 만들어 봐야겠어요 ㅋㅋ

    perm. |  mod/del. |  reply.
  9. 백마탄 초인™ 2009.07.29 01:41 신고

    오호,,,스낀을 해부 하시는군용,,,^ ^
    베리 유용할듯,,,


    긍데, cdmanii님 폰트크기를 한단계 키우실 생각은 없으신감?? ^ ^;;

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.07.29 16:50 신고

      아 그러고보니 본문내용글이 좀 작긴 하네요. 근데 항상 이크기로 쓰다보니.. 필요한 부분만 강조를 해야겠습니다 ㅋ

      perm. |  mod/del. | 
  10. 카타리나^^ 2009.07.29 17:14 신고

    오호...1탄도 찾아서 읽어봐야겠어요
    저는 티스토리 만들면서 대충....ㅎㅎㅎ

    perm. |  mod/del. |  reply.
  11. 아이사랑♡ 2009.07.29 17:26 신고

    오우~~최근에 블로그 스킨을 따로 만들어 볼까 생각중이었는데 팁 감사드려요^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.08.02 10:29 신고

      스킨을 만들정도의 내용은 못적어서 죄송해요 ㅠ 다음에는 팁이라고 할 수 있는 핵심 부분을 적어볼께요 ^^

      perm. |  mod/del. | 
  12. T1M 2009.07.29 17:31 신고

    멋진 내용입니다~

    감사합니다. ^^

    perm. |  mod/del. |  reply.
  13. 투투다 2009.08.02 22:16 신고

    우와 멋진데요 ^^

    perm. |  mod/del. |  reply.
  14. 이미모든 2009.08.14 05:52 신고

    제 블로그의 경우 전체 구성 (>이게 container 인가요? 저 - 무식쟁이 -.-;) 을 전체적으로 왼쪽으로 이동시키고 싶은데 어떻게 해야할까요? 흠... 지금은 너무 가운데라 큰 모니터로 보면 좀 이상하더군요. 님께서는 방법을 아실 듯 (이곳은 검색하다가 들름 -.-) 좋은 정보 감사. 총총.

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.08.14 09:35 신고

      안녕하세요 ^^ 큰모니터라면 24" 이상이시겠군요 ! 일단 설명드리면 지금 블로그 가지고 계신건 가운데 정렬로 되어있구요. 제 블로그도 가운데 정렬입니다. 제가 알기로 거의 80% 이상은 가운데 정렬로 보통 되어있구요. 하지만 왼쪽정렬이나 오른쪽정렬로 되어 있는 블로그들도 있습니다. 개인 취향이니 일단 이정도 하구요. 설명드릴께요.

      지금 블로그는 스킨을 크게 나누어보면

      <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="sidebar"></div>
      <div id="footer"></div>
      </div>

      로 되어있습니다. 말씀하신 #container 로 크게 묶여있는게 맞습니다. 이 #container 레이어를 어떻게 정렬하느냐에 따라서 블로그의 위치가 바뀌게 됩니다.

      (먼저 위에부분 잠깐 설명드리면 div 로 열고 /div 로 닫는 형태로 되어있는데요. container 로 크게 묶여있고 그안에는 블로그의 상단에 해당하는 header 와 본문에 해당하는 content , 그리고 사이드바에 해당하는 sidebar , 그리고 하단에 카피라이터나 등등 을 나타내는 foot 로 나누어져 있습니다.)

      이제 정렬을 바꿔봐야겠죠?

      먼저 스킨설정에서 style.css 를 모두 복사해서 editplus 나 또는 메모장에 복사한뒤,

      찾기에서 #container 를 찾습니다.

      #container {
      background-color: #FFFFFF;
      border: 0 solid #BBBBBB;
      margin: 30px auto;
      padding: 20px;
      width: 870px;
      }

      이런식으로 나올텐데요. 제가 본건 firebug 로 살펴본거라 약간 다르게 나올 수 도 있습니다.

      여기에서 정렬에 해당하는 부분은

      margin: 30px auto; 입니다.

      이 뜻은 margin 즉 여백을 두는데 위아래로 30px 를 두고 오른쪽, 왼쪽은 자동으로 설정하라는 뜻입니다.

      이렇게 되면 블로그의 상단과 하단부분에 여백이 30px 가 되며 가운데 정렬이 되게 됩니다.

      다만 margin 을 조정해서 왼쪽 정렬을 하게 하려면 아무래도 상대적 위치이기 때문에 조정이 쉽지 않으며,

      한가지 옵션을 추가해서 가능합니다.

      float: left; 를 넣으면 왼쪽으로 정렬이 가능합니다.

      정리하자면 ,

      #container {
      background-color: #FFFFFF;
      border: 0 solid #BBBBBB;
      margin: 30px auto;
      padding: 20px;
      width: 870px;
      float: left; /*왼쪽정렬부분 */
      }

      이렇게 추가해서 (추가된부분은 아래쪽 주석부분 1줄)
      왼쪽 정렬이 가능합니다. 왼쪽 정렬을 했더니 너무 왼쪽으로 달라붙어서 왼쪽을 약간 뛰우고 싶다면,

      margin: 30px auto; 부분을

      margin: 30px auto 30px 100px; 로 설정해서 왼쪽을 100px 를 뛰울 수 있습니다.


      margin 에 값인 4가지 값의 순서는 위쪽,오른쪽,아래쪽,왼쪽의 순으로 정해져 있습니다. 끝에 100px 가 왼쪽의 여백의 값이니 이 수치를 조정해서 왼쪽을 조금 뛰울 수 있게 되는것이죠.

      궁금하신점 있다면 더 질문해주시구요 ^^
      조만간 스킨관련된 총 집합 팁을 공개할 예정이니 (지금 열심히 쓰는중 ;;) 참고해주세요 ~

      perm. |  mod/del. | 
  15. 기은아빠 2009.08.19 09:30 신고

    포스팅 하나 하나 멋집니다. Jaea님 블로그 타고 놀러왔습니다. ^^ 종종 찾아 오겠습니다.

    perm. |  mod/del. |  reply.
  16. 모노마토 2009.09.28 14:24

    피가 되고 살이되는 강좌~~
    고맙습니다.
    3탄도 기대 할께요!

    perm. |  mod/del. |  reply.
  17. J-Bo 2010.01.27 02:42

    우와... 여기서 공부좀 많이 해야겠어요...

    이런 자료를 찾고 있었는데, 드디어 찾았네요....

    공부하러 자주 놀러오겠습니다.

    perm. |  mod/del. |  reply.
  18. 강의좋아요 2010.04.17 19:05

    많은 도움을 얻고 갑니다

    perm. |  mod/del. |  reply.
  19. 010-9275-9233 2010.12.29 09:48 신고

    요즘 레이어랑 css때문에 골치가 많이 아팟는데... 도움이 많이되네요... 구글 꾹꾹 누렀어요~ ㅋ
    감사합니다.

    perm. |  mod/del. |  reply.
  20. ruCat 2011.03.10 20:14

    오우;;;; 어렵군요;;

    요즘 블로그 관리에 너무 관심이 많아져서 차근 차근 읽고있는데 ㅠ

    너무 어렵습니다.

    전문 툴로는 어떤게 좋을까요? ^^;;;

    perm. |  mod/del. |  reply.
  21. 민들레~ 2014.08.13 09:55 신고

    초보라서 헤더를 화면에 꽉차게 넓게 해주는 방법 좀 알고 싶습니다. ㅠ

    perm. |  mod/del. |  reply.