티스토리 뽀개기 - div 와 span

티스토리 뽀개기 - 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) 이해하기
- 티스토리 치환자 정리