본문 박스 사이드바 박스 만드는법
태그를 사용하여 테두리를 만드는 법은 간단합니다.
블로그에도 특정 내용에 테두리를 만들어서 효과적으로 강조하기에도 아주 유용합니다. 테두리태그는 홈페이지 스킨을 제작하는데도 많이 사용됩니다.
그런데 둥근테두리를 만들 때 두께는 지정할 수가 없네요. 그래서 다른 곳에 적용된 소스를 보니 둥그런 테두리모양의 이미지 파일을 아래위로 덧부쳐서 만들더군요. ^^
아래의 기본적인 태그를 보면서 원하는 색이나 두께를 블로그에 적용해보세요.
1. 일반적인 방법
<TABLE width="400" height=100 bgcolor=ffffff style="border:solid 3 purple;"><tr><td>내용</td></tr></table>
| 내용 |
<TABLE width="400" height=100 bgcolor=ffffff style="border:solid 3 #6CC22F;"><tr><td>내용</td></tr></table>
| 내용 |
2. fieldset 태그 및 제목으로 legend 사용하는 방법
<fieldset style="width: 400; height: 100"; text-align: left; margin: 0; padding: 3px; style="border: 1 solid #ff0000"><legend style="margin: 0; padding: 0" align=center>인기글</legend>내용</fieldset>
3. DIV를 이용하여 테두리 작성하는 방법
<DIV style="BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; BORDER-BOTTOM: #ff0000 1px solid">
<DIV style="TEXT-ALIGN: center"><br />내용</DIV>
내용
4. 테두리를 둥글게 하는 방법
<fieldset style="width: 400; height: 100"; text-align: left; margin: 0; padding: 3px><legend style="margin: 0; padding: 0" align=center>인기글</legend>내용</fieldset>
설명닫기
공간지정태그에는 DIV, SPAN, FIELDSET 3가지 종류가 있다.
비슷한 태그로서는 TABLE 태그가 있다.
하지만 TABLE은 하나의 공간을 표현하기 위해 TR, TD로 나누어 표현하지만,
DIV, SPAN, FIELDSET은 바로 보여지고 표현되는 것이 특징이다.
DIV, SPAN, FIELDSET 태그 모두 특별한 속성은 없으며, style속성에 따라 형태가 달라진다.
▶ 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>
