style div 옵션들
div - display
display : block;
display : none;
display : inline;
이 옵션은 div 가 공간을 차지하는냐 아니면 차지 하지 않냐를 조절할 수 있다.
block 과 none 으로 해 놓을 경우 none 으로 하면 원래 div 가 있던 공간이
없다고 생각하고 화면이 구성이 된다.
그러다가 block 으로 하면 그 뒤의 내용들이 뒤로 밀리면서 div 가 생성되듯이 보인다.
토글 기능처럼 생각하면 된다.
div - position
position : absolute;
position : relative;
div 를 이용하여 일반적으로 많이 사용하는 style 이다.
이 스타일은 div 의 위치를 설정할 때 사용하며 두 스타일 모두 각자 자리를 차지하는게 아니라
떠 있는 상태(플로팅 상태) 로 있게 된다. 즉 다른 내용을 덮을 수 있다는 뜻이다.
absolute 를 설정하게 되면 div 태그가 있는 위치와는 무관하게 절대 위치가 지정된다.
left, right, top, bottom 내용을 지정해서 위치를 지정 할 수 있다.
백분율, em, 픽셀이 가능하며 이건 해 보면 알꺼다.
relative 를 설정하게 되면 상대적 위치가 지정되게 된다. 즉 원래 div 가 있어야 하는 위치에서
top, left 를 지정함으로서 위치가 변하게 된다.
당연히 absolute 와 다르게 div 의 위치에 따라서 보여지는 모양이 다르게 된다.
position : fixed;
fixed 는 화면과 관련된다. 위의 두개는 전체 렌더링 된 화면에서 어디에 위치하냐를 의미한다면
fixed 는 현재 보여지는 화면에서 (심지어 화면이 스크롤 되 내려간 상황이라도)
어느 위치에 보일지를 결정 할 수 있다.
position : abosolute ;
position : relative ;
div에 위의 옵션이 들어가야 레이어 구실을 한다.
플로팅상태이기 때문에 자리를 차지하는게 아니고 내용을 가린다.
해보면 알겠지만 position옵션만 스타일에서 빠져도 일반적인 div영역으로 정의되어버린다.
보통 visibility옵션과 함께 사용된다.
레이어가 아닌 div는 display옵션으로
레이어인 div는 visibility옵션으로 보이고 안보이고를 조정하는게 일반적이다.
'health & beauty' 카테고리의 다른 글
이런 집에 살고 싶다; (5) | 2011.01.25 |
---|---|
낙서하지 말고 화장을 하자. (4) | 2009.10.23 |
바람이 강하게 불고 있다(風が强く吹いている) (15) | 2009.04.30 |
거지같은 스팸이 된 어도비(Adobe)문자!! (8) | 2009.01.20 |
티스토리달력 도착.. (26) | 2009.01.06 |