시작하기 전에.. 'Div와 Span 태그'란?
* 공간을 지정하고 style을 적용하는 태그로서 공간을 지정하는 것에 대해서는 fieldset도 마찬가지이기에 함께 다루도록 하겠다.
* div와 span의 경우 공간을 지정하는 것에서는 거의 같은 역할을 하지만 실상 미세한 부분에서 차이가 있다. 그 차이점을 알아보고, div와 span 그리고 fieldset을 공간을 담는 상자로 이해하고 시작하는 것이 빠르다.
* 공간에 관한 태그로서 대표적으로 table 태그가 있다. table은 하나의 공간을 <td></td>로 나누고 이 <td></td>를 묶어 놓은 집합체이다. 반면 div, span, fieldset은 그 각각이 하나의 공간을 이룬다.
* 또한 table의 경우 td의 크기를 먼저 계산한 후 table을 보여주는 방법을 취하지만, div, span, fieldset은 바로 보여지기에 렌더링에도 table보다 뛰어나다.
* div, span, fieldset 세 태그 모두 특별한 속성은 없으며, style 속성에 사용되는 요소로서 형태와 기능이 달라진다.
Div 태그
* Division의 약자로 시작태그 <div 속성="요소">와 종료태그</div>로 구성된다.
* 태그내에 속성을 적지 않아도 시작태그와 종료태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라진다.
* 그 공간은 줄 단위로 할당되어 태그의 시작 전후에 자동으로 줄바꿈 기능을 가지고 있다.
* 대표적으로 사용되는 속성으로는 style 속성이 있는데 span과 fieldset도 공통으로 사용되는 속성이기에 3가지 태그의 소개후에 style 속성을 따로 다루도로 하겠다.
Span 태그
* 시작태그 <span 속성="요소"> 종료태그</span>으로 구성된다.
* 태그내에 속성을 적지 않아도 시작태그와 종료태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라진다.
* 그 공간은 내용에 국한되며, div와 달리 태그의 시작 전후에 자동 줄바꿈 기능이 없어 연속으로 사용하면 이웃하게 위치한다.
* span 태그는 연속 사용시 이웃하는 성질을 가지고 있기에 글씨에 관한 style을 적용할 때 많이 사용되는 태그이다.
Fieldset 태그
* 시작태그인 <fieldset 속성="요소">와 종료태그 </fieldset>으로 구성되어 있다.
* div와 span과 다르게 테두리가 존재하며 모서리 부분이 둥근것이 하나의 특징이다.
* 또 하나의 특징이라면, <legend align="left/right/center">제목</legend>를 삽입하여 제목을 추가할 수 있다.
* 태그내에 속성을 적지 않아도 시작태그와 종료태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라진다.
* div와 마찬가지로 그 공간은 줄 단위로 할당되어 태그의 시작 전후에 자동으로 줄 바꿈 기능을 가지고 있다.
공통적으로 사용되는 style 속성
* div, span, fieldset 태그는 style 속성에 따라 그 크기와 모양 그리고 기능이 달라진다.
* style 태그의 속성들은 따로 자세히 배우도록 하고 여기서는 가장 많이 사용되는 몇가지만 알아보자.
1. width, height - 크기를 결정짓는 속성
* 요소로는 크기를 나타내는 숫자와 단위(px, pt, cm, %, etc)를 사용. 단위를 사용치 않으면 자동으로 px로 인식한다.
|
<div style="width:100px; height:300px;">내용</div>
<span style="width:200; height:200">내용</span>
<fieldset style="width:100%; height:100%;">내용</fieldset> |
2. background - 배경을 결정짓는 속성
* 요소로는 색상을 사용할 수도 있고 이미지 주소를 사용할 수도 있다.
|
<div style="background:색상;">내용</div> - 배경색 사용시
<div style="background:url('이미지 주소');">내용</div> - 배경 이미지 사용시
<span style="background:pink;">내용</span>
<span style="background:url('http://~');">내용</span>
<fieldset style="background:#FFFFFF;">내용</fieldset>
<fieldset style="background:url('img/bgimg.gif');">내용</fieldset> |
3. border - 테두리를 결정짓는 속성
* 요소로는 테두리의 두께, 형태(8가지), 색상을 사용한다.
(주의, 용소의 3가지를 모두 적지 않아도 무방하지만 형태는 반드시 적어야 한다.)
* border의 8가지 형태는 dotted, dashed, solid, double, ridge, inset, outset 이다.
| <div style="border:1 solid #ff0000;">내용</div>
<span style="border:5 dotted #ff0000;">내용</span>
<fieldset style="border:10 double #ff0000;">내용</fieldset> |
4. padding - 경계에서 내용까지의 여백을 결정짓는 속성
* 요소로는 상, 우, 하, 좌의 여백 크기(0을 포함한 양의 정수)를 지정한다.
| <div style="padding:10;">내용</div> - 외곽 경계에서 상, 우, 하, 좌 모두 10px씩 여백 생성
<div style="padding:10 20;">내용</div> - 외곽 경계에서 상·하:10px, 우·좌:20px 여백 생성
<span style="padding:10 20 30;">내용</span>
- 외곽 경계에서 상:10px, 우·좌:20px, 하30px 여백 생성
<fieldset style="padding:1 2 3 4">내용</fieldset>
- 외곽 경계에서 상:1px, 우:2px, 하:3px, 좌:4px 여백 생성 |
5. margin - 위치를 결정짓는 속성
* padding과 유사하나 다른 속성으로 padding은 외곽경계와 내용 사이의 여백을 결정하여 내용의 위치가 바뀌지만 margin은 박스 자체와 윈도우 사이의 여백을 결정하여 박스의 위치를 결정한다.
* 요소로는 상, 우, 하, 좌의 크기(음의 정수도 가능)를 지정한다.
|
<div style="margin:10;">내용</div> - 경계 외곽에 상·우·하·좌 모두 10px씩 여백 생성
<div style="margin:10 20;">내용</div> - 경계 외곽에 상·하:10px, 우·좌:20px씩 여백 생성
<span style="margin:-10 20 30;">내용</span>
- 경계 외곽에 상:-10px, 우·좌:10px, 하:30px 여백 생성
<fieldset style="margin:1 2 3 -4;">내용</fieldset>
- 경계 외곽에 상:1px, 우:2px, 하:3px, 좌:-4px 여백 생성 |
6. overflow - 내용의 크기가 클 경우 스크롤바 생성
* overflow속성을 사용하지 않는다면, 내용물의 크기에 맞게 div, span, fieldset의 크기가 늘어난다.
* 요소로는 auto, hidden, scroll이 있다.
| <div style="overflow:auto;">내용</div>
- auto의 경우 내용물이 클 경우에 자동으로 스크롤바가 생성
<span style="overflow:hidden;">내용</span>
- hidden의 경우 지정된 크기 이외의 부분은 보여지지 않는다.
<fieldset style="overflow:scroll;">내용</fieldset>
- scroll의 경우 지정된 내용물의 크기에 상관없이 스크롤바가 생성된다. |
7. font - 내용에 들어가는 글자의 style을 결정짓는 속성
* 요소로는 글씨의 형태, 글씨의 크기/ 줄간격, 클씨체가 있다.
* 개별적으로 지정할 수도 있으나 한꺼번에 지정하는 것이 간략하기 대문에 여기서는 한꺼번에 지정하는 방법을 알아보겠다.
| <div style="font:bold 9pt/1.3 돋움;">내용</div> - 글씨의 형태 bold:두껍게, italic:기울임
<span style="font:italic 12pt/15pt 굴림체;">내용</span>
- 글씨의 크기/줄간격 크기의 단위는 pt이며 줄 간격은 pt 단위로 사용할 수도 있고
글씨의 크기에 비례하여 2배이면 2, 1.5배이면 1.5 이렇게 배수를 사용할 수도 있다.
<fieldset style="font:normal 15pt/2 바탕체;">내용</fieldset>
- 글씨체는 글꼴의 이름을 사용한다. |
8. color - 글자의 색상을 결정짓는 속성이다.
* 요소로는 영문으로된 색상명이나 RGB코드를 사용한다.
| <div style="color:#ff0000;">내용</div>
<span style="color:skyblue;">내용</span>
<fieldset style="color:gold;">내용</fieldset> |
[출처 : http://blog.naver.com/dohyun5?Redirect=Log&logNo=70014023876]
