스킨) 강좌 - 이글루스 스킨 간단하게(?) 바꾸는 방법

스킨을 만들기엔 너무나 많은 시간과 노력이 들어가고, 있는 스킨을 쓰기엔 어딘가 부족하신 분들이 많으시죠? 많은 부분이 맘에 안든다기 보다, 색이라던가 크기라던가 여백이나 한두개의 그림이 맘에 안들어서 바꾸고 싶은데 어디를 어떻게 바꿔야 할지 모르시는 분들을 위해 준비해보았습니다. 자자.. 이 강좌는 모든 이들에게 한 줄당 새로나온 아담한 10원짜리...는 아니고 그냥 무료 배포합니다.

실제 예제를 통해 배워보도록 하죠.

Q : 포스팅 제목 크기를 바꾸고 싶어요.

A : 좀 길기 때문에 잘 따라오셔야 합니다. 그럼 시작합니다.

[스킨편집] 메뉴로 잘 가보시면, [HTML 편집하기] 부분이 있습니다. 여기서 "메인화면 편집 편집을 원하는 섹션을 클릭하세요"라고 되어있는 옆의 네모칸 섹션 선택부분을 찾으세요. 거기서 '본문' 영역을 클릭하면 html 소스 부분이 본문에 해당하는 소스로 바뀝니다. 기본 스킨이라면 이런 모습이죠.

<div class="post">
    <h2 class="postdate"><$postdate$></h2>
    <h3 class="posttitle"><$postsubject$></h3>
    <p class="postadmin"><$postadmin type=1$></p>
    <div class="content">
        <$postcont$>
    </div>
    <p class="posttail">
        <$posttail$>
    </p>
    <$cmtjs$>
</div>

전체 post 라는 class 명을 가진 div 태그로 둘러쌓여 있고 그 안에 h2, h3 등의 태그가 있습니다. 그안을 보시면 $postdate$ 이런 것들도 있죠.

postdate - 포스팅 날짜
postsubject - 포스팅 제목
postadmin - 포스팅 수정, 삭제 등 메뉴
postcont - 포스팅 내용

$어쩌구$들은 대강 설명하자면 이런 것들이 표시되는 위치인 셈이죠. 그렇다면 포스트 제목을 수정하기로 했으니 postsubject 앞 뒤에 뭐가 있는지 봐야 합니다. 

 <h3 class="posttitle"><$postsubject$></h3>

이렇게 되어있죠. 저 <h3> 태그의 속성을 바꾸어 주면 제목이 표시되는 방법을 마음대로 바꿀 수 있습니다. 그냥 h3 라고만 되어 있는게 아니라 class 속성에 'posttitle'이라고 되어있죠. 중요하니 이것도 기억해 두어야합니다. 그리고 그 위에 div 에 지정된 class 명인 'post'도 기억해야 하구요.

다시 '본문'섹션을 선택하기 전으로 돌아가서, 외각 모양을 선택해보면 또 그에맞는 html 소스가 보일겁니다. 여기서 <$post$> 부분을 찾아보세요. 그리고 그걸 어떠한 태그가 덮고 있는지 보죠.

<div id="content">
    <$post$>
    <p class="page"><$prepage$>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<$nextpage$></p>
</div>

역시 기본 스킨이라면 이런 식입니다. 저기 $post$ 부분이 아까 보았던 '본문'섹션의 내용이 들어갈 공간입니다. 그렇다면 이렇게 '본문'을 통체로 감싸고 있는 태그도 무엇인지 봐두어야 합니다. div 태그에 id로 'content'란 값이 지정되어 있네요. 자 이걸로 알아야할 이름은 모두 알아냈습니다. 정리해보자면 제목이 있는 h3 태그의 정확한 위치는 이러합니다.

<div id="content">
    <div class="post">
        <h3 class="posttitle"><$postsubject$></h3>
    </div>
</div>

이제 위치를 알았으니 바꿔줄 차례입니다. 바꾸는건 html에서 하는게 아니라 css에서 한다고 생각하시면 됩니다. 밑에 보면 css 편집하기라고 해서 매우 많은 소스가 보일겁니다. 수 많은 소스 중에 제목을 어떻게 찾아갈까요. 답은 이미 정리되어 나와있습니다. 약간의 보는 방법만 알면 됩니다.

위에 정리한 h3 태그의 위치 html를 보시면 id 값과 class 값이 있죠. 일단 알아야 할 것은 id 값의 위치는 css에서 #을 붙여서 표현하고 class값은 . 을 붙여서 표현한다는 겁니다.

즉 저 복잡한 태그의 h3 위치를 찾아가려면 이렇게 써주어야 합니다.

#content div.post h3.posttitle {}

왜 id 값 앞에는 div를 안붙이고 class 앞에는 div를 붙였나는 의문에 대한 답은 그냥 규칙이니까 그렇습니다. 속성을 바꾸는 법은 { } 안에 속성값을 써주기만 하면 됩니다. 쓰는것도 규칙이 좀 있죠. 속성을 바꾸는 방법을 간단하게 몇개만 말씀드리겠습니다.

#content div.post h3.posttitle {
    font-size:18px;
    color:#005dc6;
    background:url(그림주소) no-repeat left bottom;
    margin:17px 0 0 0;
    padding:13px 0 11px 17px;
}

이는 제 스킨에 실제로 쓰인 속성값들의 일부입니다. 일단 모든 줄마다 맨 뒤에 들어간 ; 표시는 반드시 해야하는걸 알고 갑시다.

font-size:18px;
 - 글씨 크기를 조절합니다. 18 이게 글씨 크기이고 px는 단위입니다. 픽셀의 약자로 1px은 모니터에 표현되는 점하나 크기입니다.

color:#005dc6;
 - 색을 바꿉니다. #과 6자리의 16진수값으로 되어있는데요. 웹색상코드 표 같은걸 참고해 보시거나 포토샵, 기타 등등의 툴에서 색을 지정할때 코드가 뜨기도 하니 그 수치를 이용해 다른 색으로 바꿔주시면 됩니다. 기본적인 색인 black, white 같은건 영어로 써도 인식합니다.

background:url(그림주소) no-repeat left bottom;
 - 배경 그림을 넣는 속성입니다. background:#000000 처럼 url 값이 아닌 색상코드를 넣어주시면 배경 색을 바꿀 수도 있습니다. 둘 다 넣어도 됩니다. 그림을 넣으려면 저 '그림주소'라고 된 부분에 넣고 싶은 그림의 http 주소값을 넣어주세요. 뒤의 no-repeat 는 그림이 반복되지 않게 하는 값이고, left와 bottom은 그림이 표시될 기준위치입니다. 왼쪽 아래를 기준으로 표현된단 뜻이고 right와 top 을 쓰거나 위치값을 쓸수도 있지만 설명이 길어지므로 생략합니다.

margin:17px 0 0 0;
padding:13px 0 11px 17px;
- 여백을 지정하는 속성입니다. margin 은 바깥쪽 여백, padding 은 안쪽 여백을 지정합니다. 뒤의 숫자가 4개 써있는데 이는 각각 위쪽, 오른쪽, 아랫쪽, 왼쪽의 값을 나타냅니다. 값이 0일경우 px같은 단위를 생략해서 적어도 되지만 값이 있을경우 단위를 꼭 써줘야합니다. 여기서 안쪽과 바깥쪽의 기준까지 설명하기엔 벅차므로 대강 설명하자면 안쪽 여백을 늘리면 해당 태그가 차지하는 영역이 늘어나고, 바깥쪽 여백을 늘리면 해당 태그와 다른 태그와의 간격이 조절된다고 보시면됩니다.

좀 복잡하죠? 하지만 잘 따라 해보시면 그리 어렵지 않다는걸 느낄 수 있을겁니다. 위에 나온 속성값 외에 좀 더 많은걸 고쳐보려면 html/css 레퍼런스를 찾아보시는게 도움이 될겁니다.

이해를 돕기위해 부가적인 설명도 간략하게 준비해보았습니다.

html/css 구조에 대한 이해

html은 인터넷에서 문서를 표현하기 위해 만들어진 언어입니다. 구조가 <태그 속성>내용</태그> 이런 식이죠. 초기의 html은 저기 속성 값을 추가하여 '내용'부분의 모양을 표현했습니다만 html/css 구조에서는 모양을 바꾸는 표현은 css에서 맡도록 변경되었습니다. 그 이유까지 설명하려면 안그래도 긴 글이 안드로메다까지 길어질 수 있으니(설마..) 일단 생략합니다.

html/css 에선 <태그>내용</태그> 라고 되어있을때 '내용'의 모양을 바꿔주려면 css 에서 태그 { 속성 } 형식으로 작성해주어야 하는 것이지요. 같은 명령어로 적어둘 경우 html내의 해당 태그는 모두 같은 모양으로 표시됩니다. 이로서 html는 내용과 내용의 구분을 위한 <태그>만 쓰이고 껍대기는 모두 css 에서 표현하게끔 구조가 잡혔습니다. 이러한 html/css는 웹표준이 되었고 이글루스에도 사용되었습니다. 그래서 이 구조를 이해해야만 올바르게 스킨을 조작할 수 있지요.

이글루스 스킨의 레이아웃

이글루스 기본 스킨은 해더, 사이드바, 컨탠츠, 푸터 의 기본구조를 가지고 있습니다. 각 영역은 div 태그를 이용해 나누어져 있습니다. (사용자가 만든 일부 스킨은 div가 아니라 table로 나뉘어 있는 경우도 있습니다. 이 경우는 수정하는 방법이 복잡해지므로 본 강좌에서는 언급하지 않습니다.) 

<div id="header">'상단 내용'</div>
<div id="content">'포스팅 내용'</div>
<div id="sidebar">'옆의 메뉴 내용'</div>
<div id="footer">'하단 내용'</div>

이런 식이죠. (실제로는 이것들도 <div id="body">와 <div id="container">로 감싸고 있습니다.) 바꾸고 싶은 부분을 찾으려면 위의 분류대로 찾아가서 </div>로 끝나기전의 내용을 살펴보시면 됩니다. content와 sidebar의 경우는 섹션으로 나뉘어 안쪽의 html을 따로 볼수 있게 되어있고(위에서 본문 섹션을 찾아간것 처럼) 코맨트 부분은 따로 손댈 수는 없게 되어 있지만 css에서 속성을 바꿀수는 있게 되어있습니다. (#content div.post div.comment {} 쪽 부분이죠)

어렵지요? -_-; 좀 어렵습니다. html/css를 공부해보면 그리 어렵지만은 않지만 모르는체 수정하려니 힘들겁니다. 그래도 잘 따라해보시면 소스를 보는 법을 알게되고, 모르는 걸 하나씩 찾다보면 금방 깨우칠수 있게 될것입니다. 자기집은 자기가 손볼줄 알아야죠. -_-)b

ps. 마무리로 '참 쉽죠?' 하고 밥아저씨 따라해볼라다가 말았습니다. 왠지 살아남기 힘들거 같아서요.(...)