티스토리 뷰

Network/Web

span, div

비회원 2011. 2. 6. 04:00

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]

'Network > Web' 카테고리의 다른 글

웹개발자라면 알아야될 css tip(?)  (0) 2011.02.06
[style.css] div와 span, id와 class 어떤 차이가 있을까?  (0) 2011.02.06
span, div  (0) 2011.02.06
CSS span 태그에 가로 사이즈를 주기  (0) 2011.02.06
프레임인가? 노프레임인가?  (0) 2008.07.30
PORT NUMBERS  (0) 2008.05.22
댓글
댓글쓰기 폼