▶ 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>