태그 연습장

자료

태그 연습장

자유지향 2011. 1. 7. 11:49

태그 연습장

태그 연습장

Your browser does not support iframes.

위 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title> 제목 </title>
<meta name="description" content="소개" />
<meta name="keywords" content="내용,주제,관심사" />
<meta name="author" content="내용" />
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr" />
</head>
<BODY scroll="auto" onload="Ban()">

<P> </P>
<P>17 기본색</P>
<DIV style="MARGIN-LEFT: 1.5em">
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: black"></DIV>
<P>Black</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: gray"></DIV>
<P>Gray</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: maroon"></DIV>
<P>Maroon</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: red"></DIV>
<P>Red</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: orange"></DIV>
<P>Orange</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: yellow"></DIV>
<P>Yellow</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: lime"></DIV>
<P>Lime</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: green"></DIV>
<P>Green</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: teal"></DIV>
<P>Teal</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: olive"></DIV>
<P>Olive</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: aqua"></DIV>
<P>Aqua</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: blue"></DIV>
<P>Blue</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: navy"></DIV>
<P>Navy</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: fuchsia"></DIV>
<P>Fuchsia</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: purple"></DIV>
<P>Purple</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: silver"></DIV>
<P>Silver</P></DIV>
<DIV class=swatch>
<DIV style="BACKGROUND-COLOR: white"></DIV>
<P>White</P></DIV></DIV>
<DIV></DIV>
<STYLE type=text/css>
.swatch {
width: 4em;
float: left;
}
.swatch p {
margin: 0;
text-align: left;
clear: left;
}
.swatch div {
border-style: solid;
border-width: 1px;
margin: 0 auto;
width: 40px;
height: 40px;
}
</STYLE>

</body>
</html>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예2)

<STYLE type="text/css">
#mover {position: absolute; left: 450; top: 35; /*시작 지점*/
color:#ff0000; font-family: 'comic sans ms'; /*스타일 지정*/
font-size:14pt; line-height:16pt; font-weight: bold; border: solid #eeeeee;}
</STYLE>
<SCRIPT Language="Javascript">
<!--
function moveIt() {
if (document.all) {
    document.all.mover.style.pixelTop+=1 //수직 단계
    document.all.mover.style.pixelLeft-=2   //수평 단계
    setTimeout('moveIt()',30)                       //지연 시간
if (mover.style.pixelLeft <= 0){ mover.style.pixelLeft=450;}
if (mover.style.pixelTop >= 1060){ mover.style.pixelTop=0;}
}
}

-->
</SCRIPT>

</head>
<body onload="moveIt()">

<DIV style="FILTER: shadow(color:gray, strength:10, direction:135); PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 250px; PADDING-RIGHT: 10px; PADDING-TOP: 10px"> <DIV style="BORDER-BOTTOM: black 1px solid; TEXT-ALIGN: left; BORDER-LEFT: black 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: aqua; PADDING-LEFT: 10px; WIDTH: 250px; PADDING-RIGHT: 10px; FONT-SIZE: 12px; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid; PADDING-TOP: 10px">"고양이는 우리에게 세상의 모든 일에 목적이 있는 건 아니라는 것을 가르쳐주고 싶어한다." <BR>-<i>개리슨 케일러</i>-</DIV></DIV></center>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예3)

<p style="margin-left : 40em;">- 소크라테스</p>

</textarea><br>
<input type="button" value="실행하기" onclick="newwin()">
<br><br><br>
</form>
<br>
<script>
<!--
function newwin() {
var Mywin=window.open('test.html','sample','width=800,height=200,left=50,top=20,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,

scrollbars=yes,resizable=yes');
    var Jang;
    Mywin.document.open();
    Mywin.document.writｅ(document.Neform.TagTest.value);
    Mywin.document.close(); }
//-->
</script>

</body>
</html>

<html lang="ko">
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr">
<meta http-ｅquiv="Content-Script-Type" content="text/javascript">
<title>견본</title>
<script type="text/javascript">

</script>
</head>
<body>
<form action="#" name="form1">
<select name="select1" onchange="url_jump();">
<option value="#">선택
<option value="http://www.google.co.jp/">Google</option>
<option value="http://www.google.com/">Google</option>
</select>
</form>
</body>
</html>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예4)

<html lang="ko">
<head>
<meta charset="utf-8" />
<title>HTML5 Color Picker Demonstrated</title>
<script language="javascript">
function newBackgroundColor(color)
{
document.bgColor = color;
document.colorForm.selectedcolor.value = color;
}
</script>
</head>
<body bgcolor="white">
<nobr><b>색상 확인</b> # xxxxxx</nobr>
<form name="colorForm">
<p>배경색 지정 #
<input name="colorpicker" type="color" onchange="newBackgroundColor(colorpicker.value);"> 클릭!
</p>
</form>

<br>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예5)

<!doctype html>
<html>
<head>
 
<META http-ｅquiv="Content-Style-Type" content="text/css">
 
<meta http-ｅquiv="Content-Type" content="text/html;charset=UTF-8">
 
<link rel="stylesheet" type="text/css" href="style.css" />
 
<STYLE TYPE="text/css">
<!--
  @import url(style.css)
-->
</STYLE>
 
<style type="text/css">
article { display: block; border: 1px solid red; width: 420px; }
</style>
 
<script type="text/javascript"          src="......js" >
</script>

 
<script type="text/javascript">
 
</script>
 
<script>document.createElement('article');</script>
 
</head>
<!--StartFragment--><body onload="position_at_top();expand()">
<div style="position:absolute;color:red" id="test"></div>
<script>
//This script created by Steve Bomer 
//Modified by Dynamic Drive for NS6, additional features
//Visit Dynamicdrive.com to get it!
//Change the message below
var themessage="연습입니다.^^"
var fontsize=10
//Below determines how long the message will appear before disappearing. 3000=3 seconds
var appearfor=3000
function position_at_top(){
if (document.layers)
document.test.top=pageYOffset
else if (document.all){
test.innerHTML='<div align=center><font face="Arial">'+themessage+'</font></div>'
setTimeout("test.style.top=document.body.scrollTop+10;test.style.left=document.body.scrollLeft+10",100)
}
else if (document.getElementById){
document.getElementById("test").innerHTML='<div align=center><font face="Arial">'+themessage+' </font></div>'
document.getElementById("test").style.top=pageYOffset
}
}
function expand(){
if (document.layers){
document.test.document.writｅ('<div align=center style="font-size:'+fontsize+'px"> <font face="Arial">'+themessage+'</font></div>')
document.test.document.close()
}
else if (document.all)
test.style.fontSize=fontsize+'px'
else if (document.getElementById)
document.getElementById("test").style.fontSize=fontsize+'px'
fontsize+=5
if (fontsize>90){
if (document.layers)
setTimeout("document.test.visibility='hide'",appearfor)
else if (document.all)
setTimeout("test.style.visibility='hidden'",appearfor)
else if (document.getElementById)
setTimeout("document.getElementById('test').style.visibility='hidden'",appearfor)
return
}
else
setTimeout("expand()",50)
}
</script>
 
<article>
<h1>안녕하세요, </h1>
<p>연습 중입니다.</p>
</article>
 
<form>  
<textarea name="content" cols="50" rows="15" > 
안녕하세요, 여러분!
</textarea>
</form>
 
<TABLE border="2">
 <TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">
   <TD>사과농장</td>
   <TD>20 상자</TD>
   <TD>40 상자</TD>
   <TD><br> </TD>
   <TD><br> </TD>
 </TR>
 <TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">
   <TD>수박농장</td>
   <TD><br> </TD>
   <TD>1 트럭</TD>
   <TD>2 트럭</TD>
   <TD><br> </TD>
 </TR>
 <TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">
   <TD>포도농장</td>
   <TD><br> </TD>
   <TD><br> </TD>
   <TD><br> </TD>
   <TD>50 상자</TD>
 </TR>
</TABLE>
</body>
</html>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예6)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-ｅquiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Krazy Korners</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">

body {background:#e0e0e0;}
/* Inset 3D Raised */
.raised {background: transparent; width:40%;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff;}
.raised p {padding-bottom:0.5em;}

.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}

.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}

/* Inset 3D Curved */
.inset {background: transparent; width:40%;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff;}
.inset p {padding-bottom:0.5em;}

.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}

.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

/* Curved cutout Borders*/
.curved {background: transparent; width:40%;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff;}
.curved p {padding-bottom:0.5em;}

.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px; font-size:1px;}
.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
.curved .b1 {margin:0 4px; background:#fff;}
.curved .b2 {margin:0 4px; height:2px;}
.curved .b3 {margin:0 3px;}
.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}

.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}

/* flared serif */
.serif {background: transparent; width:40%;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff;}
.serif p {padding-bottom:0.5em;}

.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3 {height:1px;}
.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}

.serif .b1 {margin:0; background:#fff;}
.serif .b2 {margin:0 1px; border-width:0 2px;}
.serif .b3 {margin:0 3px;}
.serif .b4 {height:2px; margin:0 4px;}

.serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}

/* Pillar type */
.pillar {background: transparent; width:40%;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff;}
.pillar p {padding-bottom:0.5em;}

.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}

.pillar .b1 {margin:0 2px; background:#fff;}
.pillar .b2 {margin:0 1px; border-width:0 1px;}
.pillar .b3 {height:2px; margin:0;}
.pillar .b4 {margin:0 2px;}

.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}

</style>
</head>

<body>

<h2 class="bxs">Krazy Korners</h2>
<h3>by Stu Nicholls</h3>

<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 1</h1>
<p>A box with cutout corners</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>

<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

<div class="boxcontent">
<h1>Example 2</h1>
<p>Corners to give a serif effect.</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>

<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>

<div class="boxcontent">
<h1>Example 3</h1>
<p>Corners to give a rounded pillar effect.</p>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 4</h1>
<p>Rounded corners with raised borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
<p></p>

<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 5</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>


</body>
</html>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예7)

<html>
<head>
<script type="text/javascript" language="JavaScript">
function bar() {
    var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("natext").value );
    newAnchor.appendChild( newTxt );
    newAnchor.setAttribute("href", document.getElementById("naurl").value );
    newAnchor.setAttribute("target", "_blank" );
    var newLi = document.createElement("li");
    newLi.appendChild ( newAnchor );
    var list = document.getElementById("NaList");
    list.appendChild( newLi );    
}
</script>
</head>
<body>
<p>
링크 추가하기<br/><br/>
이름 : <input type="text" id="natext" /><br/>
 URL : <input type="text" id="naurl" />  
  <input type="button" id="addurl" value=" OK " onclick="bar();" />
<ul id="NaList">
</ul>
</div>
</body>
</html>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예8)

이 시점에 이르기까지 전혀 보이거나 알려지지 않았던, 그리고 느껴본 적이 없었던
잠재성들이지만, 그것들이 바로 여기에 있습니다...

너무도 확연히 달라질 수 있는, 너무도 단순해질 수 있는 미래의 잠재성들이....

모든 신념들과 모든 논리, 모든 사실들을...녹여 사라지게 하는 잠재성들이...

딱딱해진 에너지 구조를 다시 여러분의 새로운 의식에게 - 과거에 기초하지 않은
의식으로서 그게 무엇이라 명명되든 - 봉사할 에너지로 풀어놓을 잠재성들이...
여기에 있습니다.

우리가 그러한 잠재성속으로 - 해묵은 격자와 낡은 신념 체계들을 넘어선 잠재성들
속으로 - 걸어 나갈 때 거기엔 아무런 유혹도 존재하지 않습니다. 새 에너지 잠재성
안에는 유혹이 들어설 토대가 아예 없습니다.

거기엔 죽음 같은 것도 존재하지 않으며, 살아가야만 한다는 것도 존재하지 않습니다.
그것은 그저 존재할 뿐입니다.

그러한 잠재성들은 어떠한 문제들이나 이슈들도 해결하거나 고칠 필요가 없으며,
또한 어떠한 것도 변화시킬 필요가 없는데, 왜냐하면 이 새로운 잠재성들 안에는
해묵은 불균형이 전혀 존재하지 않기 때문입니다. 그것들은 완전히 새롭습니다.
그것들은 여러분 기쁨과 열정의 새로운 과일이며, 그리고 그것들이 바로 여기에 있습니다.

바로 지금 우리는 우리의 의식을 확장시켜내고 있습니다. 지금은 정신적 활동속으로
들어설 시간이 아니며, "난 내 삶이 이런 식으로 펼쳐지길 원해요!"라고 말하려 들
때가 아닙니다. 지금은 여러분 속으로 느껴 들어가 볼 시간이며, 제한되지 않고
불균형스럽지 않는 잠재성들 속으로 - 달리 말해서, 과거에서 기인하는 어떠한
균형이나 형태도 그것에 붙어있지 않은 잠재성들 속으로 - 순수하고도 순수한 잠재성들
속으로 느껴 들어가 볼 시간입니다.

여러분은 냄새를 통해서 그것들을 감지해낼 수 있습니다. 느낌을 통해서도 그럴 수 있고,
심지어 듣기나 맛보기를 통해서 감지해낼 수도 있습니다. 하지만 그 무엇보다도 중요한
것은 자신에 대한 신뢰속에서 그저 존재하는 것을 통해 감지해내는 것입니다.

</pre>
</div>
<br />
<pre>

<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</pre>
</div>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예9)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-ｅquiv="Content-Style-Type" content="text/css">

body {background-color:#ccffff;
font-size:12px;}

b {color:#008800;}

h1   {margin-left:10px;
   margin-right:10px;
   height:30px;
   padding:20px;
   border:3px double #006600;
   color:#006600;
   font-family:"Times New Roman";
   font-size:17px;
   background-image:url(leaf.jpg);}

h2 {color:#006600;
font-size:12px;}

#left_position {margin-left:-20px;
margin-top:30px;}

#left_menu  {position:absolute;
   list-style-type:none;
   width:110px;
   height:200px;
   line-height:20px;}

#left_menu li  {border:3px double #006600;
   font-size:12px;
   line-height:30px;
   text-align:center;}

#left_menu a  {display:block;
   text-decoration:none;
   color:#006600;
   width:98px;
   height:30px;
   background-image:url(leaf_menu.jpg);}

#left_menu a:link  {border:3px outset #00ff00;
   background-color:transparent;
   color:#000000;}

#left_menu a:visited {border:3px inset #ccffcc;
   background-color:transparent;
   color:#000000;}

#left_menu a:hover  {border:3px inset #00eeee;
   background-color:#ffee99;
   color:#0066cc;}

#left_menu a:active {border:3px inset #ccffcc;
background-color:#eeffee;
color:#0066cc;}

#center_con  {position:absolute;
   background-image:url(leaf_back.jpg);
   border:3px double #006600;
   margin-top:0px;
   margin-left:160px;
   height:400px;
   padding:10px;
   line-height:20px;}

p {width:455px;}

</style>

</head>
<body>

<h1>저의 견본 페이지 방문을 환영합니다. </h1>

<div id="left_position">
<ul id="left_menu">
<li><a href="http://www.google.co.kr/" onClick="loadPage(this,'center_con');">Google</a></li>
<li><a href="http://www.google.co.kr/" onClick="loadPage(this,'center_con');">메뉴02</a></li>
<li><a href="http://www.google.co.kr/" onClick="loadPage(this,'center_con');">메뉴03</a></li>
<li><a href="http://www.google.co.kr/" onClick="loadPage(this,'center_con');">메뉴04</a></li>
<li><a href="http://www.google.co.kr/" onClick="loadPage(this,'center_con');">메뉴05</a></li>
</ul>
</div>

<p>마침내는 모든 인류가 시간이 될 때 가져올 빛나는 결정적인 요인이 될 것입니다. 더 이상의 전쟁이나 전쟁들의 풍문들이 없어질 것인데, 인류가 마침내 성장할 것이고, 그들 가족을 항상 방어할 필요성을 뒤에 두고, '동굴 시대의 모래상자sandbox of the cave times'를 떠날 것이기 때문입니다. <br><br>
인류는 마침내 진정한 인간이 될 것이고, 서로를 하나의 인간 가족의 어린이들로 포용할 것이며, 거기서 모든 이들이 그들이 만나는 각자 속에 신의 불꽃을 인정하는 법을 배웁니다.
</p>
</div>

</body>
</html>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예10)

<TEXTAREA onclick=this.focus();this.select() rows=6 cols=60 id=textarea2 name=textarea2>
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
가나다라마바사아자차카타파하
 </TEXTAREA> 
<STYLE> 
#textarea2{ 
background-image:url("https://t1.daumcdn.net/cfile/blog/171BEF504E0F16B225"); background-position: 200px 20px;background-repeat: no-repeat;background-attachment: fixed; background-color: transparent;}
</STYLE>

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

작성 예11)

이 내용을 태그 연습장에 붙여 넣기를 해 보세요.

참고 참고 참고 참고 참고

참고 참고 참고 참고 참고 참고 참고 참고 참고 참고

'자료' 카테고리의 다른 글

스크롤바 예 4 (0)	2011.02.06
[스크랩] 극 이동 (0)	2011.01.26
스위치의 종류 (0)	2010.09.22
[스크랩] 고래들이 걸프의 석유 유출에 대해 말하다 (0)	2010.09.17
컴퓨터 그래픽과 911 (0)	2010.08.11

현재글태그 연습장

zayouin

중력, 두려움, UFO, 공구, 크랍서클, 색상표, DNA, 스타시스, 마술, 제로존 이론,