VML 응용: 데이터베이스 모형

Tech: /VML·SVG 2008. 10. 1. 14:24

이번에는 좀 더 고급 기술을 사용한 예제이다. 소스는 좀 복잡하지만 위에서부터 순서대로 데이터베이스 모형, 이미지 모형, 마지막으로 우주선 모형이다. shapetype을 사용한 예제로, 이전 예제들과는 비슷해보이지만 좀 다르다.

 

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* { behavior: url(#default#VML); }
.font_opa { position:absolute; top:0; left:0; color: black; font-size: 10.0pt; font-weight: normal; font-style: normal; text-decoration: none; text-align:center; vertical-align: middle; font-family: "굴림", "Sans Serif"; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70, Style=0); }
.font_opa1 { cursor:hand; position:absolute; top:0; left:0; color: black; font-size: 18.0pt; font-weight: normal; font-style: normal; font-align:center; vertical-align: middle; font-family: "굴림", "Sans Serif"; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0, Style=0); }
.font_opa2 { cursor:hand; position:absolute; top:0; left:0; color: red; font-size: 18.0pt; font-weight: bold; font-style: normal; font-align:center; vertical-align: middle; font-family: "굴림", "Sans Serif"; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, Style=0); }
</style>
</head>
<body bgcolor="#44ddaa">
<v:shapetype id="dataBase1" coordsize="21600,21600" path="m0,3475 l0,18125 qy10800,21600 qx21600,18125 l21600,3475 xe">
 <v:stroke joinstyle="miter" />
 <v:path gradientshapeok="t" textboxrect="1018,10180,20582,18120" />
</v:shapetype>
<v:shapetype id="dataBase2" coordsize="21600,10800" path="m0,3475 qy10800,0 qx21600,3475 qy10800,6950 qx0,3475 xe">
 <v:stroke joinstyle="miter" />
</v:shapetype>
<!-- shapetype을 이용한 화면 출력 1 -->
<span style="position:relative;top:1;left:1">
 <v:shape type="#dataBase1" fillcolor="#3f9fff" style="position:absolute; left:0; top:0; width:100; height:70">
  <v:fill type="gradient" color2="fill lighten(0)" method="linear sigma" angle="235" focus="100%" />
  <v:textbox style="text-align:center">
   <div>name</div>
  </v:textbox>
 </v:shape>
 <v:shape type="#dataBase2" fillcolor="white" style="position:absolute; left:0; top:0; width:100; height:35">
 </v:shape>
</span>
<v:shapetype id="ptCenter" coordsize="21600,21600">
 <v:path textboxrect="5400,5400,18000,18000" />
</v:shapetype>
<span style="position:relative;top:100;left:100">
 <v:shape type="#ptCenter" style="position:absolute;top:0;left:0;width:56;height:56">
  <v:imagedata src="./b_mssql.png" grayscale="true" />
  <v:textbox  class="font_opa1" onmouseover="this.className='font_opa2'" onmouseout="this.className='font_opa1'">+</v:textbox>
 </v:shape>
 <v:shape style="position:absolute;top:48;left:0;width:56;height:28">
  <v:textbox class="font_opa">name</v:textbox>
 </v:shape>
</span>
<v:group id="saucer" style='position:absolute;left:200;
  top:200;width:50;height:50' coordorigin="0,0" coordsize="6000,6000">
<v:shape id="_x0000_s2051"
  style='position:relative;left:234.75pt;top:208.875pt;width:235.25pt;height:128.875pt'
  coordsize="3765,2060" path="m1285,251l1126,469,580,1009,,1285,25,1412,93,1547,194,1673,1017,2026,2312,2060,3209,1756,3765,1388,3278,680,3059,319,2976,,1285,251,1285,251xe"
  fillcolor="#bcbcd6" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2052" style='position:relative;left:314.625pt;
  top:140.5pt;width:104pt;height:102pt' coordsize="1663,1633" path="m0,1355l177,1498,353,1582,840,1633,1378,1498,1663,1295,1545,456,1260,10,1025,,656,260,253,874,,1355,,1355xe"
  fillcolor="#99ebff" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2053" style='position:relative;left:436.875pt;
  top:243pt;width:25.875pt;height:30.5pt' coordsize="415,489" path="m0,25l186,,415,101,388,489,,25,,25xe"
  fillcolor="#fff27f" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2054" style='position:relative;left:408.625pt;
  top:268.75pt;width:24.25pt;height:27.375pt' coordsize="388,437" path="m209,0l34,101,,302,125,437,329,327,388,152,209,,209,0xe"
  fillcolor="#fff27f" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2055" style='position:relative;left:356.625pt;
  top:279.25pt;width:28.875pt;height:30pt' coordsize="462,479" path="m135,0l0,186,59,422,344,479,462,228,135,,135,0xe"
  fillcolor="#fff27f" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2056" style='position:relative;left:302.625pt;
  top:274pt;width:23pt;height:23.625pt' coordsize="369,378" path="m0,59l226,,369,186,243,378,32,363,,59,,59xe"
  fillcolor="#fff27f" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2057" style='position:relative;left:266.25pt;
  top:245.125pt;width:32.125pt;height:28.375pt' coordsize="513,454" path="m34,454l0,211,110,34,302,,513,34,34,454,34,454xe"
  fillcolor="#fff27f" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2058" style='position:relative;left:234.75pt;
  top:230.375pt;width:77pt;height:65pt' coordsize="1232,1040" path="m0,926l162,844,321,751,479,652,557,597,635,542,711,481,787,420,863,355,937,291,1086,150,1160,76,1232,,1152,122,1095,209,1027,306,951,411,867,521,780,631,686,734,593,831,498,912,403,979,312,1026,141,1040,,926,,926xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2059" style='position:relative;left:245pt;
  top:225.875pt;width:237.875pt;height:121.125pt' coordsize="3806,1937" path="m0,1372l100,1452,203,1526,313,1593,424,1655,539,1710,659,1762,906,1844,1159,1901,1422,1935,1952,1937,2479,1847,2734,1773,2977,1674,3095,1617,3209,1555,3319,1488,3426,1414,3528,1338,3625,1252,3719,1167,3806,1074,3663,937,3528,804,3405,669,3285,536,3171,401,3064,268,2962,133,2863,,2918,139,2979,277,3044,412,3114,545,3188,678,3270,808,3355,935,3449,1060,3369,1131,3285,1195,3201,1258,3114,1313,3025,1368,2931,1416,2741,1503,2543,1574,2334,1627,1901,1690,1446,1693,975,1642,490,1534,247,1460,,1372,,1372xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2060" style='position:relative;left:314.375pt;
  top:134.125pt;width:109.75pt;height:111.625pt' coordsize="1757,1787" path="m220,1624l283,1667,357,1705,528,1762,941,1787,1376,1666,1578,1544,1757,1375,1722,1069,1677,799,1620,567,1553,371,1513,289,1473,217,1430,154,1384,103,1337,61,1285,29,1177,,932,76,797,183,652,339,578,434,502,542,422,662,342,795,258,941,175,1099,87,1272,,1458,80,1316,156,1183,234,1057,308,939,378,829,451,728,521,635,587,552,654,476,717,409,781,352,840,303,956,232,1065,198,1255,248,1413,455,1534,833,1620,1384,1451,1460,1279,1525,1110,1576,935,1612,582,1647,220,1624,220,1624xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2061" style='position:relative;left:367pt;
  top:184.125pt;width:22.125pt;height:26pt' coordsize="354,416" path="m179,0l302,60,354,207,341,289,302,355,247,399,179,416,53,355,,207,13,127,53,60,109,17,179,,179,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2062" style='position:relative;left:357.25pt;
  top:206.125pt;width:38.25pt;height:35.125pt' coordsize="612,563" path="m0,563l55,346,128,175,169,111,211,59,301,,390,2,476,71,612,432,460,502,308,542,,563,,563xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2063" style='position:relative;left:363.25pt;
  top:171.125pt;width:12.125pt;height:24.125pt' coordsize="194,386" path="m0,0l124,386,194,291,,,,,,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2064" style='position:relative;left:379.5pt;
  top:175.5pt;width:14.875pt;height:19pt' coordsize="237,304" path="m237,0l72,304,,207,237,,237,,237,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2065" style='position:relative;left:359.75pt;
  top:167.75pt;width:6.5pt;height:6.5pt' coordsize="105,105" path="m55,0l105,55,90,90,55,105,,55,17,17,55,,55,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2066" style='position:relative;left:390.875pt;
  top:172.125pt;width:6.5pt;height:6.5pt' coordsize="105,104" path="m55,0l105,55,90,89,55,104,,55,17,17,55,,55,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2067" style='position:relative;left:274.25pt;
  top:329.875pt;width:29.125pt;height:65.875pt' coordsize="468,1053" path="m261,0l0,1053,468,84,261,,261,,261,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2068" style='position:relative;left:425.5pt;
  top:318.25pt;width:22.5pt;height:66.5pt' coordsize="361,1064" path="m0,137l361,1064,249,,,137,,137,,137xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2069" style='position:relative;left:265pt;
  top:385.875pt;width:18.75pt;height:18.25pt' coordsize="298,293" path="m150,0l257,44,298,149,287,207,257,255,207,287,150,293,44,255,,149,11,90,44,44,91,10,150,,150,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2070" style='position:relative;left:439pt;
  top:374.875pt;width:17.375pt;height:17.375pt' coordsize="278,278" path="m141,0l236,40,278,141,267,194,236,238,141,278,40,238,,141,12,84,40,40,141,,141,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2071" style='position:relative;left:362.375pt;
  top:338.875pt;width:13.75pt;height:40.625pt' coordsize="221,651" path="m0,0l53,651,221,16,,,,,,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2072" style='position:relative;left:359pt;
  top:374.125pt;width:13pt;height:12.875pt' coordsize="207,207" path="m102,0l177,30,207,103,177,177,102,207,30,177,,103,30,30,102,,102,0xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2073" style='position:relative;left:264.25pt;
  top:244.25pt;width:30.625pt;height:32.875pt' coordsize="490,527" path="m490,37l347,,228,,62,92,,278,9,398,45,527,100,470,133,419,125,229,150,160,190,111,245,73,315,50,490,37,490,37xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2074" style='position:relative;left:296.5pt;
  top:270.625pt;width:32.625pt;height:31.625pt' coordsize="521,508" path="m230,94l87,101,2,175,,329,26,409,70,468,186,508,325,495,445,434,509,333,521,202,488,101,454,63,407,33,268,,327,84,384,198,399,308,376,354,331,384,211,388,158,322,165,211,190,151,230,94,230,94xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2075" style='position:relative;left:353pt;
  top:278.875pt;width:34.125pt;height:32.875pt' coordsize="546,524" path="m104,96l38,174,,269,19,363,83,441,179,499,285,524,391,509,485,444,546,321,534,176,496,115,447,64,382,24,314,,175,5,296,85,367,169,388,313,353,364,304,391,188,355,123,235,104,96,104,96xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2076" style='position:relative;left:404.875pt;
  top:266.25pt;width:31.25pt;height:30.875pt' coordsize="500,494" path="m237,93l59,141,,300,28,428,61,468,102,494,310,483,408,420,477,333,500,224,458,108,414,65,355,23,213,,367,158,397,259,384,308,346,354,270,395,209,395,131,308,135,179,173,124,237,93,237,93xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape><v:shape id="_x0000_s2077" style='position:relative;left:436.25pt;
  top:242.5pt;width:30.125pt;height:38pt' coordsize="481,606" path="m296,479l384,222,367,142,319,91,169,44,,38,159,,357,32,435,99,481,211,475,376,450,483,408,606,296,479,296,479xe"
  fillcolor="black" stroked="f">
  <v:path arrowok="t"/>
 </v:shape> </v:group>
</body>
</html>

 

이 소스를 웹 브라우저로 보면 다음과 같다.



 

저작자표시 비영리 변경금지

'Tech: > VML·SVG' 카테고리의 다른 글

VML 응용(마지막): 워크플로우 도구  (0) 2008.10.01
VML 고급: 스트립트와의 상호작용  (0) 2008.10.01
VML 응용: 별 그리기  (0) 2008.10.01
VML 응용: 파이 그래프  (0) 2008.10.01
VML 응용: 막대 그래프  (0) 2008.10.01


Posted by 떼르미
,
자바스크립트를 허용해주세요!
Please Enable JavaScript![ Enable JavaScript ]

티스토리툴바