DIV, SPAN, FIELDSET 태그 설명

DIV 태그

DIV 태그는 DIVISION의 약자로 시작태그인 <div 속성="요소">와 마감태그인 </div>로 구성되어 있습니다. 태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라집니다.

SPAN 태그

SPAN 태그는 시작태그인 <span 속성="요소">와 마감태그인 </span>으로 구성되어 있습니다. 태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라집니다.그 공간은 내용에 국한되며, DIV와 달리 태그의 시작 전후 자동 줄바꿈 기능이 없어 연속으로 사용하면, 이웃하게 위치합니다.SPAN 태그는 연속사용시 이웃하는 성질을 가지고 있기에 글씨에 관한 style을 적용할 때 많이 사용되는 태그입니다.

FILEDSET 태그

FILEDSET 태그는 시작태그인 <fieldset 속성="요소">와 마감태그인 으로 구성되어 있습니다.DIV와 SPAN과 다르게 테두리가 존재하며 모서리 부분이 둥근것이 하나의 특징입니다. 또 하나의 특징이라면, <LEGEND align="left | right | center">제목</LEGEND>를 삽입하여 제목을 추가할 수 있습니다. 태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라집니다. DIV와 마찬가지로 그 공간은 줄단위로 할당되어 태그의 시작 전후에 자동으로 줄바꿈 기능을 가지고 있습니다.

공통적으로 사용되는 STYLE 속성

DIV, SPAN, FILEDSET 세 태그 모두 사용하는 속성중에 가장 중요한 속성은 style 이라 해도 과언이 아닙니다. style 속성을 어떻게 사용하느냐에 따라 그 크기와 모양 그리고 기능이 달라지기 때문입니다. style 속성에 사용하는 세부적인 속성들은 무수히 많지만, 가장 많이 사용되는 몇가지만 알려드리겠습니다. 궁금하신 속성들은 W3schools에서 검색을 통해 알아보시기 바랍니다.

▶ width, height

DIV, SPAN, fieldset의 크기를 결정짓는 속성입니다. 지금까지 배운 태그들은 크기를 결정짓는 속성을 독립적으로 사용 가능했지만, DIV, SPAN, FIELDSET의 경우는 style 속성내에서만 사용 가능합니다. 요소로는 크기를 결정짓는 숫자와 동시에 단위(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>

▶ background

DIV, SPAN, FIELDSET의 배경을 결정짓는 속성입니다. 요소로는 색상을 사용할 수도 있고, 이미지의 주소를 사용할 수도 있습니다. 이전 강좌에서 TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

<div style="background: 색상">내용</div>                  - 배경색 사용시
<div style="background: url('이미지 주소')">내용</div>     - 배경 이미지 사용시
<span style="background: 색상">내용</span>                 - 배경색 사용시
<span style="background: url('이미지 주소')">내용</span>   - 배경 이미지 사용시
<fieldset style="background: 색상">내용</fieldset>        - 배경색 사용시
<fieldset style="background: url('이미지 주소')">내용</fieldset>  - 배경 이미지 사용시

▶ border

DIV, SPAN, FIELDSET의 테두리를 결정짓는 속성입니다. 요소로는 테두리의 두께, 형태(8가지), 색상을 사용합니다. (주의, 요소의 3가지를 모두 적지 않아도 무방하지만 형태는 반드시 적어야 합니다.) border의 형태 8가지는 dotted, dashed, solid, double, groove, ridge, inset, outset 입니다. 이전 강좌에서 TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

<div style="border: 1 solid #ff0000">내용</div> 
<span style="border: 5 dotted #ff0000">내용</span>
<fieldset style="border: 10 double #ff0000">내용</fieldset>

▶ padding

DIV, SPAN, FILEDSET의 경계에서 내용까지의 여백을 결정짓는 속성입니다. 요소로는 상, 우, 하, 좌 의 여백의 크기(0을 포함한 양의 정수)를 사용합니다. 이전 강좌에서 TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

<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 여백생성)

▶ margin

DIV, SPAN, FIELDSET의 위치를 결정짓는 속성입니다. padding과 유사하나 다른 속성으로 padding은 외곽 경계에서 여백을 통해 내용의 위치가 바뀌지만, margin은 DIV, SPAN, FIELDSET 자체가 margin에 사용되는 요소에 따라 위치가 바뀝니다. 요소로는 상, 우, 하, 좌 의 크기(정수)를 사용합니다. 이전 강좌에서 TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

<div style="margin: 10">내용</div> (외곽 경계가 상·우·하·좌 : 10px 위치이동)
<div style="margin: 10 20">내용</div> (외곽 경계가 상·하 :10px, 우·좌 : 20px 위치이동)
<span style="margin: -10 20 30">내용</span> (외곽 경계가 상 : -10px, 우·좌 : 20px, 하 : 30px 위치이동)
<fieldset style="margin: 1 2 3 -4">내용<fieldset> (외곽 경계가 상 : 1px, 우 : 2px, 하 : 3px, 좌 : -4px 위치이동)

▶ overflow

DIV, SPAN, FIELDSET의 크기보다 내용의 크기가 클경우 스크롤바를 생성해서 보여줄 것인지 크기 이외의 부분은 숨길것인지에 대한 속성입니다. overflow 속성을 사용하지 않는다면, 내용물의 크기에 맞게 DIV, SPAN, FILEDSET의 크기가 늘어납니다. 요소로는 auto, hidden, scroll 이 있습니다. auto의 경우 내용물이 클 경우에만 스크롤바가 생성됩니다. hidden의 경우 지정된 크기 이외의 부분은 보여지지 않습니다. scroll의 경우 지정된 내용물의 크기에 상관없이 항상 스크롤바가 생성됩니다. 스크롤바는 각부위의 색상을 지정하지 않는다면 기본적으로 제공되는 형태로 보여집니다. 각부위의 명칭과 관련해서는 이미 카페의 게시물이 있으니 찾아보시기 바랍니다.

<div style="overflow: auto">내용</div>
<span style="overflow: hidden">내용</span>
<fieldset style="overfloe: scroll">내용</fieldset>

▶ font

DIV, SPAN, FIELDSET의 내용에 들어가는 글자의 style을 결정짓는 속성입니다. 요소로는 글씨의 형태, 글씨의 크기/줄간격, 글씨체가 있습니다. 개별적으로 지정할 수 있으나 한꺼번에 지정하는 것이 간략하기에 한꺼번에 지정하는 방법만 알려드리겠습니다. 개별적으로 지정하는 방법은 이미 5강에서 공개하였으니 생략하겠습니다. 요소로 사용되는 글씨의 형태는 bold(두껍게), italic(기울임)등이 있습니다. 글씨의 크기 단위는 pt로 1pt부터 사용가능합니다. 줄간격은 pt의 단위로 사용할 수도 있고 글씨의 크기에 비례하여 2배이면 2, 1.5배이면 1.5 이렇게 배수를 사용할 수도 있습니다. 글씨체는 각 개인의 컴퓨터에 설치된 글꼴의 이름을 사용합니다. (굴림체, 돋움체, 바탕체, etc...)

<div style="font: bold 9pt/1.3 돋움">내용</div> (두껍게 글씨크기:9pt 줄간격:9*1.3pt 글씨체:돋움)
<span style="font: italic 12pt/15pt 굴림체">내용</span>(기울여서 글씨크기:12pt 줄간격:15pt 글씨체:굴림체)
<fieldset style="font: normal 15pt/2 바탕체">내용</fieldset>(글씨크기:15pt 줄간격:15*2pt 글씨체:바탕체)
(normal일 경우 적지 않아도 무방)

▶ color

DIV, SPAN, FIELDSET의 내용에 들어가는 글자의 색상을 결정짓는 속성입니다. 요소로는 영문으로 된 색상명이나 RGB 코드를 사용합니다.

<div style="color: #ff0000">내용</div> 
<span style="color: skyblue">내용</span>
<fieldset style="color: gold">내용</fieldset>