HTML Div 태그 및 속성

Div 태그 속성

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

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

style : 레이아웃의 모양등에 관한 실제적인 설정을한다. 

    속성과 속성에 대한 값은 콜론(:)으로 구분하고, 각 속성의 구분은 세미콜론(:)으로 한다.

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

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

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

left : y좌표(좌측기준)

top : x좌표(상단기준)

width : 레이어 너비

height : 레이어높이

overflow : 레이어속의 내용이 레이어보다 클경우 스크롤바생성

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

visibility ; 레이어를 보여줄지 말지를 결정하는 속성(visible,hidden,inherit)

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

background-color : 레이어의 배경색

background-repeat : 배경 이미지의 반복여부

• repeat : xy방향모두
• repeat-x : x방향만
• repeat-y : y방향만
• no-repeat : 반복하지않는다.

backgournd-attachment : 문서가 스크롤 될때 배경 이미지의 스크롤 여부 지정

• fixed : 대상이 스크롤이 되더라도 배경 이미지는 고정
• scroll : 대상이 스크롤이 되면 배경 이미지도 스크롤이 된다.

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

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

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 = 0"
• 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)"   - 상 , 우 , 하, 좌 순서이다.

border :  레이어의 테두리를 설정한다. (테두리크기,테두리형태,테두리색상) 순서다.

display : 레이어가 화면에 보이게 할지 숨길지 설정한다.  (none 또는 block)