셰이프 위치 지정

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

참고

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

 

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

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

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

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

이 항목의 내용:

static

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

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

shape1-ps.gif (2123 bytes)

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

back to top 맨 위로

relative

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

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

shape3.gif (2048 bytes)

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

back to top 맨 위로

absolute

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

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

shape2.gif (2006 bytes)

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

back to top 맨 위로

Z-인덱스

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

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

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

shape4.gif (572 bytes)

<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 bytes)

<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 bytes)

<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>

back to top 맨 위로

회전

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

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

back to top 맨 위로

flip

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

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

 

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

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

back to top 맨 위로

요약

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

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