span, div

Source : http://jobdahan.net/css2/1225581

 

- span, div, fieldset
span 및 div 알것이고, fieldset은 모서리가 둥글다.
-공통적 style속성
width, height : 넓이, 높이(기본값 px)
background : 컬러나 이미지 가능
예)background:yellow, background:url('이미지주소')
border : 테두리 굵기
padding : 상 우 하 좌
overlow : auto(자동생성),hidden(크기외부분숨김),scroll(무조건생김)
font : 글자폰트
예)font:bold 10pt 돋움;
color : 글자색

visibility와 display의 차이점.
visibility : 공간을 차지한
display : 공간을 차지하지 않음

visibility : hidden(안보임), visible(보임)
display：none(안보임), block(보임)
이 외에도 엄청 많다 ㅡㅡ*

[출처] span, div, fieldset 사용법. (visibility와 display 차이점.) (자바를 통하여 세계로) |작성자 세피룸

시작하기 전에.. '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]