DIV태그와 SPAN태그의 정의, DIV태그와 SPAN태그의 차이와 같이 쓰는 방법을 설명하겠습니다.
웹디자이너가 아니라서 DIV태그에는 소홀했었는대 회사에서 필요성을 느끼더군요..
인터넷에서 찾아봐도 너무 분포 되있어서.. 책과 인터넷검색을 동원해서 div, span태그를
정리하였습니다. 길어도 웹디나 HTML(css),JAVASCRIPT,JSP에 공부하시는 분들에게는 꼭 필요한 자료가 아닌가 싶습니다.
DIV태그란?
DIVISION의 약자로 DIV안에있는 줄은 속성과 크기등을 바꿀 수 있습니다.
레이어를 만들때 가장 많이 사용 됩니다.
태그가 끝나면 자동줄바꿈이 됩니다.
** 레이어라는 개념을 알고 계셔야 합니다.
포토샵에 레이어와 같은 개념으로, 쉽게 설명하면 한그림이 있으면 겹쳐서 다른그림을
보이게 할 수 있습니다. 넓이가 100자리인 흰색 사각형안에 넓이가 50인 빨간색
사각형이 가운대 있게 할 수있습니다. 물론 포토샵이나 다른 편집프로그램으로 가능하지만,
css의 스타일 속성으로도 할 수 있습니다. 그림을 한 레이어 안에 집어넣고 다른그림도 다른
레이어에 집어넣어서 위치를 조정하는 것이죠.
기본형식
<DIV id, class, title, stlye, align >내용...</div>
id : head속성 안에 지정된 id
class : head속성 id안에 지정된 class id
title : 제목, 웹접근성에 의거하여 사용되기도 함.
align(center,left,right) : 정렬
style: div는 style이 정말 중요합니다. 따로 설명하겠습니다. 너무길어서..
ex)
<DIV id="contents" class="logo" title="로고" align="left" stlye= "border:1px solid #c3dc8b;
background-color:#f9fceb; padding:15px 0 15px 10px;">
1. 위치 style 속성
- position :속성; top:숫자; botoom:숫자; right:숫자; width:숫자; heigth:숫자; z-index:숫자;
visibility:속성;
ex) <DIV stlye="position:absolute; top:200px; left:-50px; width:250; heigth:250; z-index:3;">
1) position : 레이어의 위치를 지정합니다. 속성으로 일반 그림이나 글자와 같이 현재 위치에 고정적으로
배치되는 absolute, 삽입되는 위치를 기준좌표로 x와 y좌표를 정할 수 있는 relative,
웹브라우저에서 11시 지점으로 기준좌표를 정한후 x,y 좌표를 정할 수 있는 absolute가 있습니다.
fixed는 ie7부터 사용할 수 있으며, 스크롤이 위아래도 움직여도 지정한 곳에서 벗어나지 않습니다.
인터넷 뉴스같은거보면 팝업창이 스크롤바를 움직였는대도 그대로인 것들이 있을 겁니다.
그것은 다 position : fixed를 이용한 것들 입니다.
static속성도 있지만 필요가 없는.. 그냥 기본값 입니다.
-정의 : position:(absolute, relative, fixed, static)의 속성이 있다.
2)top/left : position이 relative일 경우에 현재 삽입되는 위치를 기준으로 x와 y좌표를 입력합니다.
position이 absolute일 경우 11시 지점을 기준으로 x와 y좌표를 입력합니다.
3)bottom/right: top/left 속성과 같이 사용할수 없으며 top/left 속성과 차이점은 5시 방향으로 x,y표를
지정합니다.
4)width/height : 레이어의 가로세로 크기를 입력합니다. 단위는 픽셀입니다.
5)z-index : position이 absolute일 경우에만 사용할 수 있습니다. 겹치기 순서를 지정하며, 높은숫자일
경우 위에 나타나게 됩니다.
6)visibility : hidden과 visible 값을 가지며 레이어를 눈에 보이게 하거나 보이지 않게 합니다.
자바스크립트와 함께 사용합니다. 기본값은 visible로 입력합니다.
----------------------------------------------------------------------------------
(그림예제)
position 속성 안에 absolute와 relative의 차이점
<absolute를 줬을경우>
ex)
<html>
<head>
<title>
position : absolute와 relative의 차이
</title>
</head>
<body>
<DIV style="background:red; width:200; height:200;"></div>
<DIV style="position:absolute; top:50px; left:50px; width:200; height:200; background:green"></div>
</body>
</html>
<relative를 줬을경우>
<html>
<head>
<title>
position : absolute와 relative의 차이
</title>
</head>
<body>
<DIV style="background:red; width:200; height:200;"></div>
<DIV style="position:relative; top:50px; left:50px; width:200; height:200; background:green"></div>
</body>
</html>
absolute를 줬을때는 첫번째 그림과 같이 처음 빨간사각형에 겹쳐서 position:absolute를 한 그린 사각형이 11시를 기점으로 위 아래로 50px를 이동했다.
하지만 relative를 주었을경우 2번째 그림과 같이 빨간색 사각형을 기준으로 position:relative를 한 그린사각형이 위아래로 50px를 이동했다.
2. 그 밖에 style 속성
top : 위부터 아래쪽으로 위치
left : 왼쪽으로부터 오른쪽 위치
width : 가로길이
heigth : 세로길이
z-index : 레이어 순서(값이 높을수록 위쪽)
visibility : hidden(레이어 숨김), visible(레이어 보임)
background : 레이어 배경색
overflow :
- visible : 정해진 크기 무시하고 모두 보여줌
- scroll : 스크롤을 보여줌
- auto : 넘치면 스크롤을 보여줌
- hidden : 정해진 크기만 보여주고 나머지 내용은 짤림
font-family : 폰트종류
font-size : 폰트크기
padding-top : 위쪽으로 부터 안쪽 여백
padding-left : 왼쪽으로 부터 안쪽 여백
padding-rigth : 오른쪽으로 부터 안쪽 여백
padding-bottom : 아래쪽으로부터 안쪽 여백
float:left - 레이어가 좌측으로 부터 정렬된다.
float:right - 레이어가 우측으로 부터 정렬된다.
clear:both - float 속성이 해제된다.
#float
style 속성중에 float를 설명하자니.. span 태그를 하나도 설명 안했는대 여기서
설명하기에는 좀 무리가 있는 듯 싶다. 3장 쯤에 float의 이해와 사용방법을 적도록 하겠습니다..
출처 : http://blog.naver.com/baegaha
'IT > HTML' 카테고리의 다른 글
| [HTML] TABLE 태그중 THEAD, TFOOT, TBODY 태그에 대해 알아보기 (0) | 2011.11.17 |
|---|---|
| [HTML] DIV 태그와 SPAN 태그의 차이점 (0) | 2011.11.16 |
| [HTML] 메타 태그 (META) (0) | 2011.11.16 |
| [HTML] html 기본 폰트 목록 (0) | 2011.10.26 |
| [HTML] 스크롤 따라 다니는 메뉴 (0) | 2011.10.26 |