DIV, SPAN, FIELDSET 공통점

▶ DIV, SPAN, FIELDSET 공통점
  - 특별한 태그 속성이 없음
  - 쓰이는 style속성은 동일. 
  - style속성에 따라 형태가 달라짐
  - 태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기도 자동으로 결정

▶ DIV, SPAN, FIELDSET 다른점
  DIV             - 태그의 시작 전후에 자동으로 줄바꿈 기능 
  SPAN          - 태그의 시작 전후에 자동 줄바꿈 기능 없음. 이웃으로 위치.
  FIELDSET    - DIV, SPAN태그와 달리 테두리 존재. 모서리 부분이 둥근것이 특징.
                    - FIELDSET 태그 하위로 제목 추가 가능 (ex. <LEGEND align="left | right | center">제목</LEGEND>)
                    - 태그의 시작 전후에 자동으로 줄바꿈 기능 존재

▶ 중요 style 정리
 * width, height 
    - 크기 결정 속성
    - DIV, SPAN, FIELDSET은 style속성내의 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>

 * background
    - 배경 결정 속성
    - 색상 또는 이미지 주소 사용 가능
    - 사용법 
       * 색상인 경우 
         <DIV style="background: 색상">내용</DIV>
         <SPAN style="background: 색상">내용</SPAN>  
         <FIELDSET style="background: 색상">내용</FIELDSET>
       * 이미지인 경우 
         <DIV style="background: url('이미지 주소')">내용</DIV>
         <SPAN style="background: url('이미지 주소')">내용</SPAN>
         <FIELDSET style="background: url('이미지 주소')">내용</FIELDSET>
 
 * border         
    - 테두리 결정 속성
    - 테두리 두께, 형태(8가지), 색상 사용
    - 형태는 필수, 나머지는 생략 가능
    - 형태의 종류 : dotted, dashed, solid, double, groove, ridge, inset, outset 
    - 사용법 
       <DIV style="border: 1 solid #ff0000">내용</DIV>
       <SPAN style="border: 5 dotted #ff0000">내용</SPAN>
       <FIELDSET style="border: 10 double #ff0000">내용</FIELDSET>
 
 * 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 여백생성)

 * margin
    - 위치 결정 속성
    - padding은 외각 경계에서 여백을 통해 내용의 위치가 바뀌지만 margin은 DIV, SPAN, FIELDSET 자체의 위치 변경
    - 상, 우, 하, 좌 의 크기(정수) 사용
    - 사용법 
       <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
    - 영역 내 스크롤 생성 결정 속성
    - overflow를 사용하지 않는다면 내용물의 크기에 맞게 영역의 크기가 늘어남
    - 요소 종류 : auto, hidden, scroll
       auto : 내용물의 크기가 큰 경우에만 스크롤바 생성
       hidden : 지정된 크기 이외의 부분은 보여지지 않음
       scroll : 내용물의 크기와는 상관없이 스크롤바 생성
    - 사용법 
       <Div style="overflow: auto">내용</DIV>
       <SPAN style="overflow: hidden">내용</SPAN>
       <FIELDSET style="overfloe: scroll">내용</FIELDSET>
 
 * font 
    - 글자 스타일 결정 속성
    - 글씨형태, 글씨의 크기/줄간격, 글씨체 지정 가능
    - 글씨형태 : bold(두껍게), italic(기울임)등..
    - 글씨의 크기 단위 : pt, 1pt부터 사용가능
    - 글씨의 줄간격 : pt의 단위나 글씨의 크기에 비례하여 사용 가능
    - 글씨체 : 각 개인 컴퓨터에 설치된 글꼴 이름 (굴림체, 돋움체, 바탕체 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
    - 글자의 색상을 결정
    - 영문으로 된 색상명 또는 RGB코드 사용
    - 사용법 
       <DIV style="color: #ff0000">내용</DIV> 
       <SPAN style="color: skyblue">내용</SPAN>
       <FIELDSET style="color: gold">내용</FIELDSET>

 * display 
    - 영역의 숨김, 보여짐 여부 결정
    - none, block, inline 속성으로 결정됨
    - none : 숨김
    - block : 보여짐(다른줄에 보여짐)
    - inline : 보여짐(같은줄에 보여짐) 
    - default는 inline임
    - 사용법 
       <DIV style="display:inline">내용</DIV> 
       <SPAN style="display:block">내용</SPAN>
       <FIELDSET style="display：none">내용</FIELDSET> 

출처 - http://biju.tistory.com/284