셰이프 위치 지정

  • 아티클

이 항목에서는 Windows Internet Explorer 9로 사용되지 않는 기능인 VML에 대해 설명합니다. VML을 사용하는 웹 페이지 및 애플리케이션은 SVG 또는 기타 널리 지원되는 표준으로 마이그레이션해야 합니다.

참고

2011년 12월 현재 이 항목은 보관되었습니다. 따라서 더 이상 적극적으로 유지 관리되지 않습니다. 자세한 내용은 보관된 콘텐츠를 참조하세요. 현재 버전의 Windows Internet Explorer 대한 정보, 권장 사항 및 지침은 인터넷 Explorer 개발자 센터를 참조하세요.

 

VML을 사용하여 웹 페이지에서 도형을 그리고 색을 지정하는 방법을 알아보았습니다. 이 항목에서는 VML을 사용하여 웹 페이지에서 그래픽을 정확하게 배치합니다.

VML은 CSS2의 Box Model 및 Visual Rendering Model 섹션에 정의된 것과 동일한 구문을 사용하여 웹 페이지에 셰이프를 배치합니다. 정적, 상대 또는 절대를 사용하여 기본 지점이 웹 페이지에 있는 위치를 확인할 수 있습니다. 그런 다음 위쪽 및 왼쪽 스타일 특성을 사용하여 셰이프의 포함 상자가 배치될 기준점의 오프셋을 지정할 수 있습니다.

z-index를 사용하여 웹 페이지에서 셰이프의 z 순서를 지정할 수도 있습니다.

또한 VML은 회전 및 대칭 이동을 제공하여 셰이프를 회전하거나 대칭 이동합니다.

항목 내용

static

기본 위치 스타일은 정적이며, 브라우저에서 텍스트 흐름의 현재 지점(기준점)에 셰이프를 배치하고 위쪽 및 왼쪽 스타일 특성의 설정을 무시하도록 지시합니다.

예를 들어 다음 VML 표현에서 빨간색 타원은 다음 그림과 같이 "도형의 시작"텍스트 바로 다음에 배치됩니다.

shape1-ps.gif(2123바이트)

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>

맨 위로 돌아가기 맨 위로 돌아가기

relative

위치 스타일 특성을 "relative"로 설정하면 현재 점(기준점)의 오프셋이 있는 포함 상자를 텍스트 흐름에 배치할 수 있습니다. 오프셋은 위쪽 및 왼쪽 스타일 특성의 설정에 따라 결정됩니다. 상대로 배치된 포함 상자가 텍스트 흐름의 공간을 차지한다는 점에 유의하세요.

예를 들어 다음 VML 표현에서 빨간색 타원은 다음 그림과 같이 왼쪽에서 20포인트, 위쪽에서 10포인트로 텍스트 흐름의 현재 지점을 기준으로 배치됩니다.

shape3.gif(2048바이트)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>

맨 위로 돌아가기 맨 위로 돌아가기

absolute

위치 스타일 특성을 "absolute"로 설정하면 포함 상자를 부모 요소(셰이프가 포함된 위치 요소)의 왼쪽 위 모서리(기준점)와 정확히 거리를 배치할 수 있습니다. 절대로 배치된 포함 상자는 텍스트 흐름의 공간을 차지하지 않습니다.

예를 들어 다음 VML 표현에서 빨간색 타원은 요소(전체 웹 페이지) 내에 <body> 포함되므로 기본 지점은 웹 페이지의 왼쪽 위 모서리에 있습니다. 타원의 포함 상자는 다음 그림과 같이 웹 페이지의 왼쪽 위 모서리를 기준으로 왼쪽에서 정확히 20포인트, 위쪽에서 10포인트 위치합니다.

shape2.gif(2006바이트)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>

맨 위로 돌아가기 맨 위로 돌아가기

Z-인덱스

다른 도형과 겹치는 셰이프를 배치할 수 있습니다. 일반적으로 HTML 코드에 마지막으로 나열된 그래픽이 맨 위에 표시됩니다.

VML에서 z-인덱스 스타일 특성을 사용하여 z 순서 를 제어할 수 있습니다. 이 특성의 값은 0, 양수 정수 또는 음수 정수일 수 있습니다. z-인덱스 값이 더 큰 그래픽은 z-인덱스 값이 더 작은 그래픽 위에 표시됩니다. 두 그래픽 모두 z-인덱스 값이 같으면 HTML 코드에서 마지막으로 나열된 그래픽이 맨 위에 표시됩니다.

예를 들어 다음 VML 표현에서 빨간색 타원은 파란색 사각형 위에 표시됩니다. 이는 빨간색 타원의 z-인덱스 값이 파란색 사각형의 z-index 값보다 크기 때문입니다.

shape4.gif(572바이트)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />

다음 VML 표현과 같이 z-index를 변경하면 빨간색 타원은 파란색 사각형 뒤로 이동합니다.

shape5.gif(469바이트)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />

음수 정수는 다음 VML 표현과 같이 z-index를 사용하여 일반 텍스트 흐름 뒤에 그래픽을 배치할 수 있습니다.

shape6.gif(2125바이트)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>

맨 위로 돌아가기 맨 위로 돌아가기

rotation

회전 스타일 특성을 사용하여 셰이프가 축을 켜려는 각도를 지정할 수 있습니다. 양수 값은 시계 방향으로 회전을 나타냅니다. 음수 값은 시계 반대 방향으로 회전을 나타냅니다.

예를 들어 style='...을 지정하는 경우 rotation:90', 셰이프를 시계 방향으로 90도 회전할 수 있습니다.

맨 위로 돌아가기 맨 위로 돌아가기

flip

다음 표에 따라 대칭 이동 스타일 특성을 사용하여 x축 또는 y축에서 도형을 대칭 이동시킬 수 있습니다.

값 설명
x y축을 기준으로 회전된 도형 대칭 이동(x 힌드 반전)
y x축을 기준으로 회전된 도형 대칭 이동(y 힌지 반전)

 

대칭 이동 속성에서 x와 y를 모두 지정할 수 있습니다.

예를 들어 style='...을 입력하는 경우 flip:x y', x축과 y축 모두에서 도형을 대칭 이동합니다.

맨 위로 돌아가기 맨 위로 돌아가기

요약

학습한 내용에 따라 다음 단계에 따라 웹 페이지에 셰이프를 정확하게 배치할 수 있습니다.

  1. 웹 페이지에 셰이프를 표시할 위치와 셰이프 크기를 결정합니다.
  2. style='position:relative(또는 relative)'를 지정하여 기준점을 결정합니다.
  3. 왼쪽 및 위쪽을 사용하여 기준점에서 오프셋을 지정합니다.
  4. 너비와 높이를 사용하여 도형의 포함 상자 크기를 지정합니다.
  5. z-index를 사용하여 셰이프의 z 순서를 지정합니다.