6. <div> 태그 -바닥부터 시작하는 HTML-

6. <div> 태그     -바닥부터 시작하는 HTML-

 

 

<div> 태그는 웹페이지에서 영역을 구분해 레이아웃을 잡는 역할을 합니다.

<table>보다 더 다양한 형태를 구현할 수 있으며 대표적인 block 요소이고 레이아웃은 대부분 CSS를 사용해 지정합니다.

align속성은 <div>태그 내에 직접 쓸 수 있지만 현재에는 CSS를 사용해서 지정하는 것을 추천합니다.

<table> 태그는 레이아웃보다는 게시판이나 표 등에 여전히 많이 사용되기 때문에 꼭 공부하시기 바랍니다.

 

align="left/right/center/justify"

 

<div> 내용의 중앙 정렬 예:( 현재에는 잘 쓰이지 않음)

pop-uptext

<div align="center">
This is some text!
</div>

<div align="center">
This is some text!
</div>

<div>의 대부분의 속성은 CSS style시트로 설정합니다. 그래서 자세한 레이아웃을 잡는 방법은 CSS에서 공부할 것입니다. 

여기서는 <div>에 사용되는 간단한 속성들에 대해서만 언급하고 지나갑니다.

 

예

pop-uptext

< div id="Layer" style="position:absolute;top:20px;left:20px;width:200px;height:100px;z-index:1;visibility:hidden;overflow:auto;background:#ffcc00">
div에 스타일을 적용한 예입니다.
</div>

< div id="Layer" style="position:absolute;top:20px;left:20px;width:200px;height:100px;z-index:1;visibility:hidden;overflow:auto;background:#ffcc00">
div에 스타일을 적용한 예입니다.
</div>

 

<div>에 적용되는 속성들

 

id : <div>에 id이름을 지정합니다.(CSS, 자바스크립트에서 이용함)

display : 화면 출력 방식을 지정합니다. <div>의 기본값은 block.

-block 요소를 차곡차곡 쌓는 형식

-inline 요소를 한 줄로 연결시켜 출력하는 형식

-inline-block inline과 block의 특징을 다 갖는 형식.

-none 화면에 출력을 안 하는 형식.(즉 안보임)

display에 대한 심화학습 가기

position : absolute(절대좌표) 또는 relative(상대좌표)를 지정합니다.

절대좌표

position:absolute; top:100px; left:150px

브라우저기준으로 위에서 100px, 좌에서 150px 떨어진 곳에서 시작함.

상대 좌표

position:relative; top:100px; left:150px

상위태그기준으로 위에서 100px, 좌에서 150px 떨어진 곳에서 시작함.

position에 대한 심화학습 가기

 

width : 영역의 가로길이

heigth : 영역의 세로길이

 

z-index : 영역의 높낮음 순서 1 ,2 ,3 ,4 ....(값이 클수록 맨 위로 나타납니다.)

 

visibility : 영역을 보여줄지 말지를 결정하는 속성입니다.

-hidden - 영역을 숨깁니다.

-visible - 영역을 보여줍니다.

-inherit - 영역 안에 영역이 있을 경우 부모의 속성을 상속합니다.

 

background : 영역의 배경색.

 

overflow : 영역속의 내용이 영역보다 클 경우

-visible - 영역의 크기가 늘어나면서 내용을 모두 보여줍니다.

-hidden - 영역의 크기만큼만 보여 줍니다. 넘는 내용은 짤립니다.

-scroll - 수평, 수직 스크롤을 보여줍니다.

-auto - 내용이 넘치는 방향으로 스크롤 보여줍니다.

 

float : block 요소를 정렬할 때 사용하는 속성.

-inherit - 기본 값으로 요소를 감싸는 바깥 요소에서 float 속성을 상속받습니다.

-left - 요소는 왼쪽에 부유하는 block 박스를 생성합니다.

display 속성은 무시됩니다.

-right - 요소는 오른쪽에 부유하는 block 박스를 생성합니다.

display 속성은 무시됩니다.

-none - 요소를 부유시키지 않습니다.

float에 대한 심화학습 가기

 

font-family : 폰트종류

font-size : 폰트크기

padding-top :영역의 위에서부터 내용 부분까지의 공간

padding-left  :왼쪽으로부터 내용 부분까지의 공간

padding-right :오른쪽으로부터 내용 부분까지의 공간

padding-bottom : 아래로부터 내용 부분까지의 공간

 

이상으로 <div>에서 많이 사용되는 속성들에 대해서 정리해 보았는데 몇 가지 중요하고도 까다로운 속성들에 대해서는 따로 링크를 달아 놓았으니 참고하기 바랍니다.