블로그 리뉴얼을 끝내고.. 디자인 팁 몇개 정리를 해봅니다 +ㅂ+

블로그 디자인을 자주 바꾸는 편이다 보니, 아무래도 티스토리의 기능들을 자주 찾아보는 경우가 많습니다. 제딴에는 또 디자인과 개발을 해봤던 자부심으로 꼼꼼하고 예쁜블로그로 만들어 볼려고 노력하는데, 생각보다 쉽지가 않네요. ㅠ_ㅠ

저는 그나마 소스를 이해하고 있는터라, 이미지를 수정하거나 기타 css를 수정하는데는 별 큰 어려움은 없었지만..
개발에 초보인 분들이 디자인을 하려면 여간 어려운게 아닐거라는 생각이 문득 들더군요. DIV는 뭔지.. CSS는 뭔지.. 정말이지 제한이 없어서 너무 좋은 티스토리이지만, 초보분들을 위한 메뉴얼이 많이 필요하다는 생각을 해봅니다.

이런저런 생각에 정말 간단한 소스정보라도 팁으로 정리해서 드려보기 위해서 글을 쓱싹쓱싹 적어봅니다 +ㅂ+
style.css 파일의 내용들만 간단히 정리해서 올리는 것이라, 큰 기대는 하지 않으셨으면 좋겠습니다. ㅠ_ㅠ 크흑!

css의 기본약속 지키기

skin.html을 보면 아래처럼 어렵게 생긴 애들이 엄청나게 많이 적혀 있죠.
하나하나 뜯어보면 별것아닌 녀석들이니 한번 뜯어보도록 해 보아요 -
모든 소스는 "상자" 라고 먼저 기억합시다.

<div id="sideinfo">
   <li>
      <div id="dnt">내용 1</div>
      <div id="name">내용 2</div>
   </li>
</div>

기본적으로 이렇게 생긴 소스 속에 규칙적으로 나열되어 있다는걸 볼 수 있습니다. 
이 소스들은 전부 서로서로 감싸고 있죠.
그리고 <<< 내용 >>> 이렇게 감싸져 있지 
<<> 내용 ><> 이렇게 마구잡이로 감싸져 있지 않지요. 이걸 우선 이해하시는게 중요합니다.

그리고 모든 속성에 대한 정의는 "안에서 밖으로" 라고 머릿속에 미리 생각을 그려두시길 바랍니다.
모든 css 속성은 가장 가까이 있는것이 최우선으로 적용 됩니다.
예를 들자면 이렇습니다.

<font color="black">
   <font color="red">내용</font>
</font>

red 의 속성과 black 속성이 함께 묶여 있지만, red가 우선 적용 된다는 걸 반드시 이해해야 합니다.
이 부분을 이해하셨다면 바로 style.css 를 뜯어볼 수 있기 때문입니다. 정말 별것 아닙니다.
어렵게 생각하고 시작도 하지 않으시면 영원히 모를수 밖에 없겠죠. (으름장을 놓습니다;;)

style.css는 skin.html를 지배하고 있다.

티스토리 스킨 개발자들을 보면, 참 다정하다는 생각을 합니다. 주석(소스설명)을 얼마나 정성껏 적어주시는지 개발자 입장에서도 너무너무 보기가 편합니다. 간혹 헷갈릴때는 한글로 검색해도 찾을 수 있게끔 스킨을 개발해주신 분들도 있더라구요!

자 이제 "상자" 의 개념과 "안에서 밖으로" 의 개념을 익히셨다면 슬슬 css를 수정할 준비를 해보도록 하겠습니다.
모든 디자인의 수정은 "소스보기"에서 찾는게 가장 편합니다. 출력된 소스를 보면서 해당 내용을 찾고, 그 해당 내용이 어떤 상자에 묶여 있는지를 확인한다면 이미 이야기는 끝났습니다.

먼저 수정하는 순서를 익혀봅시다.

1. 자신의 블로그에서 "아! 이부분을 수정하면 좋을텐데.." 라고 생각하는 부분이 있다면 기억해둡니다.
   (간혹 예를 들어 "앗 - 동영상 이미 끊긴.." 이라고 표기된 최근댓글 목록의 글자를 수정한다고 가정하겠습니다.)
2. 마우스 우클릭 "소스보기" 를 통해서 "앗 - 동영상 이미 끊긴.." 이라는 글자를 찾아봅니다.
3. 그부분의 소스만 잘 볼수 있게 복사를 해줍니다. 그럼 아래와 같은 소스를 얻을 수 있습니다.

<div id="sideinfo">
    <!-- 최근에 달린 댓글-->
    <div class="recentComment">
      <h3>최근에 달린 댓글</h3>
      <ul>
       <li> <a href="/52#comment7281269"> 다른곳도 마찬가지일테.. </a> </li>
       <li> <a href="/52#comment7280093"> 앗 - 동영상 이미 끊긴.. </a> </li>
       <li> <a href="/52#comment7280074"> 동영상좀 볼라했더니.... </a> </li>
       <li> <a href="/51#comment7279892"> ㅋㅋㅋㅋㅋㅋㅋ....... </a> </li>
       <li> <a href="/45#comment7279722"> 앗. 유치원 선생님과.. </a> </li>
       <li> <a href="/45#comment7278727"> 제 직업이 살짝 특이하.. </a> </li>
       <li> <a href="/45#comment7278642"> 음.. 요즘은 좀 무섭다.. </a> </li>
       <li> <a href="/51#comment7278631"> 앗 아이디가 &quot;꿀&quot; 이.. </a> </li>
       <li> <a href="/49#comment7278624"> 애초에도 큰 논란이었.. </a> </li>
       <li> <a href="/49#comment7277063"> 더욱더 많은 진실이 요.. </a> </li>
      </ul>
    </div>
<div>

4. "앗 - 동영상 이미 끊긴.." 이 글자를 감싸고 있는 상자의 이름(id)을 찾아봅니다.
    딱 보니 <li> 가 먼저 감싸고 있고, <ul> 이 그위를 감싸고, <div class="sideinfo">가 제일 위를 감싸고 있군요.
    class보다 id를 우선해서 찾아주세요. class는 가상으로 이름을 짓는 경우가 있습니다.
5. 찾아야될 상자의 이름들을 적어놓습니다.
    a,li,ul,h3,recentComment,sideinfo <- 이 상자들만 찾으면 뭔가 해결할 수 있을 것 같습니다!
6. style.css 에서 sideinfo 이녀석을 찾아주세요. 뭔가 있죠?

.sideinfo .category h3 { background:url(images/barCategory.gif) !important; }
.sideinfo .recentPost h3 { background:url(images/barRecentPost.gif);}
.sideinfo .recentComment h3 { background:url(images/barRecentComment.gif);}
.sideinfo .recentTrackback h3 { background:url(images/barRecentTrackback.gif);}
.sideinfo .link h3 { background:url(images/barLink.gif);}
.sideinfo .calender h3 { background:url(images/barCalendar.gif);}
.sideinfo .tagbox h3 { background:url(images/barTagcloud1.gif);}

중간쯤 보니까. 찾으려고 적어놨던 recentComment  와 h3 상자도 있군요.
설명을 하면 이렇습니다.

.sideinfo .recentComment h3 { background:url(images/barRecentComment.gif);}
sideinfo 상자안에
recentComment 상자안에
h3 상자에 images/barRecentComment.gif 이미지를 배경으로 깔아라. (제일 작은 상자)

그럼 이제 찾는 방법을 알아내면 뭐든지 다 수정할 수 있습니다. 
그것도 아주 체계적으로 말입니다. 무조건 가장 작은 단위부터 찾아나가면 못찾을게 없지요 -

만약 수정해야 될 부분을 찾았다면 빙고!
그 뒤에는 반드시 {    } 이렇게 중괄호가 존재하는데, 이속에 모든 속성을 넣을 수 있습니다.
글자의 색상,크기,밑줄 등 모든 부분을 {    } 이속에 정의해줍니다.

기술적으로 어려울건 전혀 없습니다.
다만 눈이 좀 아플뿐이지요 -

 {  } 이속에 넣을 속성들은 어떤것들이 있나 -

{   } 이속에 보면 정말 머리아픈 글자들이 많습니다.
하지만 이것 역시 별 것 아닙니다.
이 글자들은 모두 약속된 언어들이며 그 속성의 설명 역시 검색엔진에서 찾으면 5분이면 다 찾습니다.
우선 속성의 나열순서부터 미리 알고 넘어가도록 해야겠지요?

속성명 : 속성정의 ;
: 이모양은 속성정의의 시작을 뜻하며, ; 이모양은 속성정의가 끝났다는 의미 입니다.
글자색:흰색; <-이런식으로 말입니다.

간략하게 이속에 어떤 속성들이 있는지 알아보겠습니다.

font-family:; > 폰트종류 정의
font-size:; > 폰트크기 정의
font-weight:; > 폰트두께 정의
font-decoration:; > 폰트 꾸밈정의 (테코레이션 한다고 하죠? 밑줄 윗줄 등등..)
color:; > 폰트색상 정의
width:; > 상자길이 정의
height:; > 상자높이 정의
padding:; > 상자속 객체들이 위치할 장소를 정의
margin:; > 상자속 객체들이 시작하는 장소를 정의 (padding 과 다릅니다.)
text-align:; > 상자속 객체들의 정렬정의 (왼쪽,중앙,오른쪽)
letter-spacing:; > 상자속 글짜들의 상하간격을 정의 (자간,자평)
background:; > 상자속 배경색을 정의
background:url(); > 상자속 배경을 이미지로 정의
border:; > 상자의 테투리를 정의
overflow:; > 상자범위를 정의 (넘침의 이미 입니다. width,height 와 다릅니다.)
display:; > 상자의 디스플레이를 정의 (보여줄까,숨길까 등등)

모두 적을수가 없어서 자주 사용되는 것들만 우선 적어봤습니다.
많은 설명을 해드리고 싶었는데, 정말 끝이 없군요. ㅠ.,ㅠ 궁금한게 있으면 리플에 적어주세요.
그럼 하나하나씩이라도 찾아서 알려드리도록 하겠습니다!

블로그 개설하시는 분들은 블로그 꾸미시면서 컴퓨터와 굉장히 친해지실듯 한데요~
기왕 친해지실꺼면 가까이 다가가셔서 좀 더 친하게 지내시면 더욱 좋겠지요!

이상, 너무 설명할 부분이 많아 포기하고 도망치는 꿀곰! 이었습니다!;;;