HTML 태그 Div 레이어 속성

DIV 태그는
 
Division Marker의 줄임말로서 영역을 구분짓거나 구분지어주는 엘리먼트이다.

웹브라우저가 보여주는 HTML 문서를 별도의 영역으로 나누는데 자주 사용되는 태그입니다.

HTML문서의 다른 내용들과 한 페이지에 나타나지만 위치나 모양을 다르게 해야 할 필요가 있을때 자주사용되며,

HTML문서의 왼쪽이나 오른쪽에 나타나는 배너등을 표현할때에도 많이 사용됩니다.

<div id="divLayer" class="clsLayer" style= 'position : absolute; left:100px; top:100px; width:500px; height:300px; background-color: skyblue; font-size: 11px; color: white; overflow:auto; padding:5 5 5 5; filter:Alpha(opacity=50); clip:rect(0, 282, 100, 0); border:1px none #000000; visibility: visible; z-index:1'> 레이어에 표시될 내용 기록 </div>

< DIV 태그 속성 >


- id
객체를 구별하기위 위해서 사용하며,
자바스크립트로 객체에 접근할때 사용된다.



- class
설정된 같은 태그들 중에서 같은 모양의  Style 속성을 적용할때 사용 한다. 
 


- style
레이아웃의 모양등에 관한 실제적인 설정을 한다.
속성과 속성에 대한 값은 콜론(:)으로 구분하고, 각 속성의 구분은 세미콜론(;)으로 한다.



- position
위치를 정할때 어떤 방식으로 선택할지 지정

, absolute : 브라우저의 위치로 부터 위치가 시작이 된다.
, relative : 특정 엘리먼트로 부터 위치가 시작된다.



- left, top
문서내에서 레이어의 위치를 지정해준다.
레이어의 위치를 이동하거나 수정 할 수 있다.



- width, height
레이어의 크기를 설정하여 준다.



- background-color
레이어의 배경색을 지정할 수 있다.
색상은 색상표를 이용하면 쉽게 적용 할 수 있다.
색상의 16진수 값 (예, #ff00) 을 이용할수도 있고 색상의 이름(Red)을 이용할 수 도 있다.

- background-image : 배경을 이미지로 설정

- background-repeat : 배경 이미지의 반복여부
repeat : xy방향 모두
repeat-x: x방향만
repeat-y : y방향만
no-repeat : 반복하지 않는다.

- background-attachment : 문서가 스크롤 될때 배경 이미지의 스크롤 여부 지정
fixed : 대상이 스크롤이 되더라도 배경 이미지는 고정
scroll : 대상이 스크롤이 되면 배경 이미지도 스크롤이 된다.



- font-size
레이어 안쪽에서 작성될 글자 크기를 설정한다.



- color
레이어 안쪽에서 사용되는 글자의 색상을 설정한다.



- overflow
레이어의 내용이 레이보 크기보다 클경우 스크롤바를 생성할것인지 생성하지 않을것인지를 설정하여 준다.

, auto : 내용이 클 경우에만 스크롤이 생성된다.
, hidden : 지정된 크기에서 벗어나는 부분은 보이지 않는다.
, scroll :  내용의 크기와 상관없이 스크롤바가 생성된다.
, visible : 정해진 크기와 상관없이 내용을 모두 보여준다.



- padding
가장자리(여백)에 관한 속성으로 지정된수치 만큼 가장자리를 갖고 난후 그다음 부분부터 레이어의 내용이 시작된다.
padding-top, padding-right, padding-bottom, padding-left -> 상, 우, 하, 좌 순



- filter
레이어에 적용되는 필터 속성을 지정한다.

, alpha : 투명도 설정 (예, style="filter:alpha(opacity=50)" )
, blur : 빠르게 움직이는 물체를 촬영한 효과 (예, style="filter:blur(direction=135, strength=30)" ) 
, chroma : 특정 색상을 투명하게 (예, style="filter:chroma(color=yellow)" )
, dropshadow : 그림자 효과 (예, style="filter:dropshadow(color=gray, offx=3, offy=3, positive=1)" )
, flipH : 수평방향으로 반사되어 비치는 효과 (예, style="filter:flipH()" )
, flipV : 수직방향으로 반사되어 비치는 효과 (예, style="filter:flipV()" )
, glow : 경계선 바깥쪽에 색번짐 효과 (예, style="filter:glow(color=cornflowerblue, strength=8)" )
, gray : 대상을 흑백으로 표현 (예, style="filter:gray()" )



- clip
레이어의 실제 크기에서 일부부만 보여 주고자 할때 사용한다.
(예, style="clip: rect(0, 282, 100, 0)" ) - top, right, bottom, left 순



- border
레이어의 테두리를 설정한다.
(예, style="border: 1px none #ff0000" )
- 테두리 크기, 테두리 형태 (solid, dotted, dashed, double, groove, ridge, inset, outset ), 테두리 색상 순



- visibility
레이어가 화면에 보이게 할지 숨길지 설정 한다.
display와는 다르게 hidden으로 설정했을때 화면에 레이어가 차지 하는 공간이 남아있다.
, visible OR hidden



- display
레이어가 화면에 보이게 할지 숨길지 설정 한다.
visibility와는 다르게 block으로 설정했을때 화면에 레이어가 차지 하는 공간조차 표시되지 않는다.
, none OR block



- z-index
레이어의 겹치는 순서를 설정한다.
수치가 클 수록 상위에 위치하게 된다.