티스토리 뽀개기 - 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> |
|
사용예) <div>블로그로 돈벌기팁</div> 결과. 블로그로 돈벌기팁 |
<SPAN> 태그
- 입력하는 내용만큼 공간을 준비한다. (table의 td와 비슷)
- <span>태그로 시작해서 </span>으로 끝내야 한다.
- 줄바꿈이 생기지 않아 앞뒤 내용이 이어진다.
- div와 마찬가지로 style 속성이 같이 활용이 되며 사용방법도 <div>와 똑 같다.
|
사용예. <span>블로그로 돈벌기팁</span> 결과 블로그로 돈벌기팁비앤아이 블로그(http://ccoma.tistory.com) ※ span은 줄바꿈을 하지 않기 때문에 두줄로 작성을 했어도 위의 결과처럼 한줄로 표시가 된다. |
<DIV>와 <SPAN> 태그의 차이
1. div는 한줄을 차지하는데 span 태그는 입력되는 내용만큼 공간을 준비(차지)한다는 점
2. div는 앞뒤로 줄바꿈을 하는데 span 태그는 줄바꿈을 하지 않는다는 점
웹의 구조를 만드는데는 <table>태그와 <div>&<span>을 이용하며 만들게 됩니다.
티스토리 스킨의 구조는 왼쪽 그림과 같습니다. 이 그림과 같이 table태그와 <div>&<span> 두가지 방법으로 구조를 만들어보도록 하겠습니다.
참고로
왼쪽의 구조를 보면
container는 전체 및 한줄,
헤더(header)는 한줄,
content와 sideinfo는 같은줄에,
footer는 한줄에 표시가 됩니다.
크기지정은 하지 않고 영역구분만 해보도록 하겠습니다.
<table> 태그 이용해서 구조 만들기
table태그를 이용하는 방법은 아래 내용처럼 매우 복잡하다.
|
<table> |
<div> & <span> 이용해서 구조 만들기
|
<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) 이해하기
- 티스토리 치환자 정리
'CSS for 티스토리' 카테고리의 다른 글
| (css) border로 꾸미는 나만의 이미지 스타일 (29) | 2009/09/24 |
|---|---|
| 티스토리 치환자 정리 (31) | 2009/09/08 |
| 티스토리 뽀개기 - div 와 span (14) | 2009/09/07 |
| 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기 (47) | 2009/09/03 |
| 서식으로 배우는 스타일시트(CSS) (29) | 2009/02/16 |
| [html] table 태그 확실하게 이해하기 (18) | 2009/02/15 |
댓글을 달아 주세요
div 태그 이후로 웹은 포기 했는데 시간내서 한번 차분히 읽어봐야겠네요 ㅠ.ㅠ
^^ 아 그러세요? ^^
사실 div가 table에 비하면 조금 난해하긴 합니다. ^^
그렇군요. div와 span의 역할구분이 확 이해됩니다^^
예. table을 알면 이해하기가 더 쉽지요!
태그를 하나도 몰랐던 블로거예요 ㅋㅋ ;; 점점 블로그하면서 알게된 태그는 <center> 요거랑 <br /> 그리고 마지막으로 <p> 이제 여기서 하나하나씩 배워야겠어요 ㅎㅎ
^^ 그렇죠. 태그는 전체를 몰라도 아는 만큼은 사용을 할수가 있지요!
특히 center나 br은 사이드바 꾸밀때 많이 사용하는 태그지요! ^^
정말 제가 알고 싶었던 겁니다. ^^ 감사합니다.
요즘 너무 유용하게 보고 있습니다.
지금은 비몽사몽이니, 내일 다시 낮에 한번 정독하겠습니다. 감사합니다.
세상에-
저 심한 컴맹이거든요.
컴언어라면 기겁을 하는데. ㅠ
kay님 글 읽고 완전 정리됐어요.
어쩜 이렇게 쉽게 설명해주셨을까?
복받으실거에요.
자주 놀러올게요.^^
저는 단순히 span은 글자에만 적용하는 거라 알고 있었는데... 줄바꿈의 차이가 있었네요~^^
div 가 뭘까 했는데...
정말 고맙습니다~!
포스팅이 너무 강같아요!
너무 좋네요.. 상세한 설명감사용^^
아하! 그렇군요...
저는 몰라서 매번 table 태그만 사용했네요..이런.
이래서 배워야 한다니까..
잘 보았어요.. ^^;;
티스토리 들어온지 3일밖에 안되어서 뭐가 뭔지 하나도 모르겠지만 도움 많이 될것 같은곳을 발견해서 기분이 너무 좋은 1인입니다~ 잘보고 가여 종종 들어올게요
아하~~ 자주 방문해주실것 같은 예감이 들어서
잔뜩 기대가 됩니다. ㅎㅎ