위치 지정 style 속성 정리
| position | 웹 페이지 안의 다른 요소들과 비교해서 현재 블록을 어떻게 배치할 것인지 지정한다.
사용가능값 : "position:absolute;" 블럭을 기준으로, 브라우저 창에서 절대 위치로 배치된다. "position:relative;" 부모 블록을 기준으로 하는 상대적인 위치에 배치된다. 웹 페이지의 흐름에 따른다. |
| width | 블록의 콘텐츠가 어디쯤에서 줄바꿈할 것인지, 블록의 폭을 지정한다. 정확한 단위와 함께 폭을 지정할 수도 있고(예, 50px), 부모 블록의 폭을 기준으로 퍼센트 단위로 지정할 수도 있으며(예, 50%), auto로 지정할 경우 부모 블록의 폭에 맞춰 결정된다. 예 : "width:50px;" 또는 "width:50%;" |
| height | 블록의 높이를 지정하는데, 정확한 단위나(예, 50px) 퍼센트 단위(50%)로 지정할 수도
있고, auto로 지정할 수도 있다. 블록의 높이를 지정할 때는 최소한 블록 내의 콘텐츠가 모두 보이도록 지정해야 하며,
콘텐츠의 길이보다 길게 지정할 수도 있다. 예 : "height:50px;" 또는r "height:50%;" |
| left | position 속성과 함께 블록의 왼쪽 모서리가 브라우저 창의 모서리에서 얼마나 떨어져 있는지
지정한다. 양수값(예, 5px)은 오른쪽으로 진행하며 음수값(예, -5px)은 왼쪽으로 진행한다. 예 : "left:5px;" 또는r "left:-5px;" |
| top | position 속성과 함께 블록의 상단 모서리가 브라우저 창의 상단 모서리에서부터 얼마나 떨어져
있는지 지정한다. 양수값(예, 5px)은 아래쪽으로 진행하며 음수값(예, -5px)은 위쪽으로 진행한다. 예 : "top:10px;" 또는r "top:-10px;" |
| clip | 블록에서 화면에 표시할 사각 영역을 지정한다. 일반적으로 블록의 일부만 화면에 보여주고 나머지
부분을 가리고 싶다면 clip 프로퍼티를 사용한다. 구문은 다음과 같다: MSIE: clip:rect(top right bottom left) 예 : "clip:rect(0px 30px 50px 0px);" Netscape: clip:rect(left,top,right,bottom) 예 : "clip:rect(0,0,30,50);" clip 프로퍼티의 구문은 브라우저마다 서로 다른데, 특히 익스플로러의 경우 측정 단위(예, px)를 명시해야 하고 익스플로러나 넷스케이프 모두 매개변수의 순서를 정확히 따라야 한다. |
| visibility | 블록을 화면에 보여줄지 여부를 지정한다. 보이지 않게(not visible)지정한다면 브라우저
화면에 블록이 표시되지 않는데, 이것은 나중에 자바스크립트를 통해 보이게(visible) 바꿀 수 있다. visibility
프로퍼티에서 사용 가능한 값은 브라우저마다 서로 다르다. MSIE: "visibility:inherit;" 부모 블록의 visibility를 상속한다.. "visibility:visible;" 블록이 보인다. "visibility:hidden;" 블록이 보이지 않는다. Netscape: "visibility:inherit;" 부모 블록의 visibility를 상속한다.. "visibility:show;" 블록이 보인다. "visibility:hide;" 블록이 보이지 않는다. |
| z-index | 한 블록 위에 다른 블록을 겹쳐 쌓을 수 있도록 "쌓는 순서"를 지정한다. 이 순서를 지정하기
위해서는 블록에 z-index 값을 할당하면 되는데 이 값은 어떤 정수도 가능하다. 블록을 겹쳐 쌓을 때 좀더 큰 z-index
값을 가진 블록이 좀더 작은 z-index 값을 가진 블록보다 위에 놓인다. 만일 z-index 값이 같다면 소스 코드에서
먼저 정의한 블록이 아래에 놓인다(가장 먼저 정의한 블록이 가장 아래에 놓이고 가장 마지막에 정의한 블록이 가장 위에 쌓인다). 예 : "z-index:3;" |
| background-color | 블록의 배경색을 지정한다. 예 (MSIE) : "background-color:green;" 또는 "background-color:FF8F00;" 예 (Netscape) : "layer-background-color:green;" 또는 "layer-background-color:FF8F00;" |
| background-image | 블록의 배경 이미지를 지정한다. 예 (MSIE) : "background-image:url('images/tilewood.jpg');" 예 (Netscape) : "layer-background-image:url('images/tilewood.jpg');" |