티스토리 뽀개기 - div 와 span

티스토리 스킨을 이해하기 위해서 div와 span의 이해는 필수입니다. 티스토리의 스킨 및 블로그의 구조를 담고 있는 파일인 skin.html은 대부분 div와 span 태그로 이루어져 있기 때문입니다.

웹(www) 페이지를 구성하고 있는 html 태그중에서 영역을 지정하거나 표(table)을 구성하는데 사용되는 태그는 <table>, <div>,<span>가 있습니다.

구조를 튼튼하게~~

<div>와 <span>은 <table>태그를 대신할 수 있고 <table>태그를 사용하는 것보다 파일의 크기를 줄일 수 있을 뿐만이 아니라 웹의 속도도 올려줄 수가 있는 태그입니다.

티스토리의 구조는 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기 에서 설명했듯이 헤더영역과 본문(포스트)영역, 사이드영역과 하단영역으로 구분이 되어 있는데 이렇게 영역 구분을 <table>태그를 이용한것이 아니고 <div>와 <span>을 이용하여 구현을 하였기 때문에 티스토리 스킨을 이해하기 위해서는 먼저 <div>와 <span>을 이해해야 합니다.

<table>태그를 이미 이해하고 있는 분이라면 <div>와 <span>을 쉽게 이해할 수가 있지만 모른다고 해도 그리 어려울것은 없습니다.

 

<DIV> 태그

 
  • <div> 태그는 무조건 한줄의 공간을 준비한다.(table의 tr과 비슷)
  • <div>로 시작해서 </div>로 끝나야 한다.
  • <div>를 사용하면 위아래로 줄바꿈이 생긴다.
  • 테두리, 정렬, 문단모양등 필요한 기능들은 style을 이용하여 지정하므로 style 속성에 대해서 알아야 제대로 활용이 가능하다.

사용법1. <div> 표시할 내용1 </div>
사용법2. <div  style="속성"> 표시할 내용2 </div>
사용법3. <div id="name" style="속성"> 표시할 내용3 </div>

사용예)

<div>블로그로 돈벌기팁</div>
<div>비앤아이 블로그(http://ccoma.tistory.com) </div>

결과.

블로그로 돈벌기팁
비앤아이 블로그(
http://ccoma.tistory.com)

 

<SPAN> 태그

 
  • 입력하는 내용만큼 공간을 준비한다. (table의 td와 비슷)
  • <span>태그로 시작해서 </span>으로 끝내야 한다.
  • 줄바꿈이 생기지 않아 앞뒤 내용이 이어진다.
  • div와 마찬가지로 style 속성이 같이 활용이 되며 사용방법도 <div>와 똑 같다.

사용예.

<span>블로그로 돈벌기팁</span>
<span>비앤아이 블로그(http://ccoma.tistory.com) </span>

결과

블로그로 돈벌기팁비앤아이 블로그(http://ccoma.tistory.com)

※ span은 줄바꿈을 하지 않기 때문에 두줄로 작성을 했어도 위의 결과처럼 한줄로 표시가 된다.

 

<DIV>와 <SPAN> 태그의 차이


위에서 특징을 봤듯이 두개의 태그는 딱 한가지 빼고는 큰 차이가 없습니다.

1. div는 한줄을 차지하는데 span 태그는 입력되는 내용만큼 공간을 준비(차지)한다는 점
2. div는 앞뒤로 줄바꿈을 하는데 span 태그는 줄바꿈을 하지 않는다는 점

 

웹(www)페이지의 구조만들기

웹의 구조를 만드는데는 <table>태그와 <div>&<span>을 이용하며 만들게 됩니다.

티스토리 스킨의 구조는 왼쪽 그림과 같습니다. 이 그림과 같이 table태그와 <div>&<span> 두가지 방법으로 구조를 만들어보도록 하겠습니다.

참고로
왼쪽의 구조를 보면
container는 전체 및 한줄,
헤더(header)는 한줄,
content와 sideinfo는 같은줄에,
footer는 한줄에 표시가 됩니다.

 

 크기지정은 하지 않고 영역구분만 해보도록 하겠습니다.

 

<table> 태그 이용해서 구조 만들기

table태그를 이용하는 방법은 아래 내용처럼 매우 복잡하다.

 <table>
  <tr><td> container </td></tr>
  <tr><td>
       <table>
           <tr><td colspan=2> header </td></tr>
           <tr>
                <td> content </td>
                <td> sideinfo </td>
           </tr>
      </table>
  </td><</tr>
  <tr><td> footer </td></tr>
</table>

 

<div> & <span> 이용해서 구조 만들기

 <div>
      <div> container </div>
      <div> 
         <div> header </div>
         <span> content </span>
         <span> sideinfo </span>
      </div>
     <div> footer </div>
</div>

위 두개의 예에서 볼 수 있듯이 div와 span을 이용하면 table을 이용하는 것보다 훨씬 심플한 소스로 구현을 할 수가 있습니다. 위 소스의 결과는 그림처럼 영역을 구분한것으로 각각의 구분한 영역에 필요한 내용을 세부적으로 표현을 하는데 이 역시 div와 span을 이용하게 됩니다.

 

DIV 와 SPAN 태그 요약정리

 

1. 티스토리의 스킨(skin.html)은 div 와 span, 치환자로 구성되어 있으므로 티스토리 관리를 위해서는 꼭 알아야 할 태그입니다. (표준 스킨이 아닌경우 table을 이용하는 스킨도도 간혹있음)
2. div 는 한줄의 공간을 준비하여 내용을 표시하고
3. span은 표시되는 내용만큼만 공간을 준비합니다.
4. 두개의 태그는 style 속성을 이용하여 여러가지 형태로 표현할 수 있습니다.
5. 다양한 style sheet (css)를 알아야 div와 span을 제대로 활용할 수 있습니다.
6. <br>등의 불필요한 소스를 줄여 소스가 심플합니다.
7. 치환자에 대해서는 추후에 정리합니다.

 

관련글.
- 스타일시트(CSS) 이해하기 for 티스토리
- 스타일시트(CSS)의 선언방법 1
- 스타일시트의 선언방법 및 사용 예제 2
- 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
- 티스토리 치환자 정리


Kay~의 글을 RSS로 편하게 구독해보세요!  

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 구차니 2009/09/07 09:54  댓글주소  수정/삭제  댓글쓰기

    div 태그 이후로 웹은 포기 했는데 시간내서 한번 차분히 읽어봐야겠네요 ㅠ.ㅠ

  2. BlogIcon IT구라 2009/09/07 10:30  댓글주소  수정/삭제  댓글쓰기

    그렇군요. div와 span의 역할구분이 확 이해됩니다^^

  3. BlogIcon 분홍별장미 2009/09/07 13:21  댓글주소  수정/삭제  댓글쓰기

    태그를 하나도 몰랐던 블로거예요 ㅋㅋ ;; 점점 블로그하면서 알게된 태그는 <center> 요거랑 <br /> 그리고 마지막으로 <p> 이제 여기서 하나하나씩 배워야겠어요 ㅎㅎ

    • BlogIcon Kay~ 2009/09/07 15:18  댓글주소  수정/삭제

      ^^ 그렇죠. 태그는 전체를 몰라도 아는 만큼은 사용을 할수가 있지요!
      특히 center나 br은 사이드바 꾸밀때 많이 사용하는 태그지요! ^^

  4. BlogIcon 검도쉐프 2009/09/08 01:51  댓글주소  수정/삭제  댓글쓰기

    정말 제가 알고 싶었던 겁니다. ^^ 감사합니다.
    요즘 너무 유용하게 보고 있습니다.
    지금은 비몽사몽이니, 내일 다시 낮에 한번 정독하겠습니다. 감사합니다.

  5. BlogIcon 키르케 2009/09/08 11:22  댓글주소  수정/삭제  댓글쓰기

    세상에-

    저 심한 컴맹이거든요.
    컴언어라면 기겁을 하는데. ㅠ
    kay님 글 읽고 완전 정리됐어요.
    어쩜 이렇게 쉽게 설명해주셨을까?
    복받으실거에요.
    자주 놀러올게요.^^

  6. BlogIcon 좋은사람들 2009/09/08 22:27  댓글주소  수정/삭제  댓글쓰기

    저는 단순히 span은 글자에만 적용하는 거라 알고 있었는데... 줄바꿈의 차이가 있었네요~^^

  7. BlogIcon mintry 2010/05/12 00:43  댓글주소  수정/삭제  댓글쓰기

    div 가 뭘까 했는데...
    정말 고맙습니다~!
    포스팅이 너무 강같아요!

  8. 홍반장 2010/07/13 15:31  댓글주소  수정/삭제  댓글쓰기

    너무 좋네요.. 상세한 설명감사용^^

  9. BlogIcon cashbank 2011/03/09 16:09  댓글주소  수정/삭제  댓글쓰기

    아하! 그렇군요...
    저는 몰라서 매번 table 태그만 사용했네요..이런.
    이래서 배워야 한다니까..

  10. BlogIcon 지현아이 2011/06/17 17:15  댓글주소  수정/삭제  댓글쓰기

    잘 보았어요.. ^^;;
    티스토리 들어온지 3일밖에 안되어서 뭐가 뭔지 하나도 모르겠지만 도움 많이 될것 같은곳을 발견해서 기분이 너무 좋은 1인입니다~ 잘보고 가여 종종 들어올게요




티스토리 툴바