Bohemian life

/ / 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<style>
		#div1{
			border-width:5px;
			border-color:#0f6;
			border-style:groove;
			width:50%;
			border-radius:10px;
			overflow:hidden;
			/*width:50%; 를 넘어가는 내용은 가려라*/
			-moz-border-radius:25px;/*Firefox 3.6 and earlier*/
		}
		#span1{
			border:5px dashed #CF0;
			background-color:#0f6;
			width:100px;
			height:100px;
			display:block;
			text-align:justify;
			/*왼쪽위, 오른쪽 위, 오른쪽 아래 , 왼쪽 아래*/
			border-radius:20px 0 30px 0;
		}
		
		#span2{
			border:5px dashed #cf0;
			background-color:#0f6;
			width:100px;
			height:100px;
			display:block;
			text-align:justify;
			border-radius:0 30px;
			/*border-radius:30px 20px 10px;*/
		}

		#span3{
			border:5px dashed #cf0;
			background-color:#0f6;
			width:100px;
			height:100px;
			display:block;
			text-align:justify;
			border-radius:100px 0 0 100px;
		}
		
		#span4{
			border:5px dashed #cf0;
			background-color:#0f6;
			width:100px;
			height:50px;
			display:block;
			text-align:justify;
			border-radius:100px 100px 0 0;
		}
		
		#span5{
			border:5px dashed #cf0;
			background-color:#0f6;
			width:100px;
			height:100px;
			display:block;
			text-align:justify;
			border-radius:100px 100px 100px 100px;
		}
		
		#span6{
			border-image:url(http://www.w3schools.com/css3/border.png) 30 30 round;
			/*stretch round*/
			border-width:20px;/*두께가 기본값 1이므로*/
			background-color:#9f3;
			display:block;
			text-align:justify;
			border-radius:100px;
		}
		span{
			float:left; margin:20px;
			/* X ,Y, 번짐의 정도(기본1 가장진함) 색깔*/
			box-shadow: 10px -5px 10px #03f;
		}
		span div{
			position: relative;
			top:20px;
		}
	</style>
</head>

<body>
	<div id="div1">---------첫번째 div---------</div>
    <span id="span1"> <div>첫번째 span</div> </span>
    <span id="span2"> <div>두번째 span</div> </span>
    <span id="span3"> <div>세번째 span</div> </span>
    <span id="span4"> <div>네번째 span</div> </span>
    <span id="span5"> <div>다섯번째 span</div> </span>
    <span id="span6"> <div>여섯번째 span</div> </span>
</body>
</html>





<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<style>
		#div1{  border-width:5px; 
				border-color:#0F6;
				border-style:groove;
				width:50%;
				border-radius:15px;
				overflow:hidden; 
				/* width:50%; 를 넘어가는 내용은 가려라 */
				-moz-border-radius:25px; /* Firefox 3.6 and earlier */
		}
		#span1{border:5px dashed #CF0;
			   background-color:#FF0;
			   width:100px;
			   height:100px;
			   display:block;			 
			   text-align:justify;
			   /* 왼쪽위 , 오른쪽위 , 오른쪽아래, 왼쪽 아래 */
			   border-radius:20px 0 30px 0;
			}
		#span2{border:5px dashed #CF0;
			   background-color:#FF0;
			   width:100px;
			   height:100px;
			   display:block;			 
			   text-align:justify;
			   /* 왼쪽위0 , 오른쪽위30px , 오른쪽아래0, 왼쪽 아래30px */
			   border-radius:0 30px ;
			   /*border-radius:30px 20px 10px ;*/
			   
			}
		#span3{border:5px dotted #CF0;
			   background-color:#FF0;
			   width:50px;
			   height:100px;
			   display:block;			 
			   text-align:justify;			  
			   border-radius:100px 0 0 100px ;			  
			   
			}
		#span4{border:5px outset #CF0;
			   background-color:#9F3;
			   width:100px;
			   height:50px;
			   display:block;			 
			   text-align:justify;			  
			   border-radius:100px 100px 0 0;			  
			   
			}
		#span5{border:5px inset #CF0;
			   background-color:#9F3;
			   width:100px;
			   height:100px;
			   display:block;			 
			   text-align:justify;			  
			   border-radius:100px;			  
			   
			}	
		#span6{border-image:url(http://www.w3schools.com/css3/border.png) 30 30 round;
				/* stretch round */
			   border-width:20px; /* 두께가 기본값 1이므로  */
			   background-color:#9F3;			   
			   display:block;			 
			   text-align:justify;			  
			   border-radius:100px;			  
			   
			}	
		span{float:left; margin:20px;
			 /* X, Y, 번짐의 정도(기본1 가장진함) 색깔 */
			 box-shadow: 10px -5px 10px #03F;
			 
		}
		span div{ position:relative;
				  top:20px; left:10px;		
		}
		#img3:hover{
			transition:width 2s, transform 2s;
			-webkit-transition:all 2s;

			transform:rotateX(120deg);
			-webkit-transform:rotateX(120deg); /* Safari and Chrome */
			-webkit-transform:rotateY(130deg); /* Safari and Chrome */
			-moz-transform:rotateX(120deg); /* Firefox */
			}   
	</style>
</head>
	
<body>
	<div id="div1"> ------첫번재 div ----- <br/>
    				~~~~~~~~~~~~~~~~~~~~~~</div>
    <span id="span1"> <div>첫번재 span</div> </span> 
    <span id="span2"> <div>두번재 span</div> </span>
    <span id="span3"> <div>세번재 span</div> </span>
    <span id="span4"> <div>네번재 span</div> </span>
    <span id="span5"> <div>다섯번재 span</div> </span>
    <span id="span6"> <div>여섯번재 span</div> </span>
	<img id="img3" src="http://sogangori.cdn2.cafe24.com/sliderImage/wide/14.jpg" />
</body>
</html>



저작자표시 비영리

'CSS' 카테고리의 다른 글

위치  (0) 2012.06.14
동영상 화면  (0) 2012.06.14
CSS 연습  (0) 2012.05.29
CSS 연습  (0) 2012.05.25
Bohemian life항상 즐겁고 재미있게~~건강한 몸과 마음으로 생각 하며 실천하자~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<!--
    <script>
    	window.onload=function(){
			allP=document.getElementsByName("p");
			for(i=0; i<allP.length; i++){
				allP[i].onclick=function(){
					allP[i].style.display="none";
				}
			}
		}
		
		객체.메서드(파라미터)
		
		$(document).ready(function(){
			$("p").click(function(){
				$(this).hide(1000);
			});
		});
    </script>
    -->
	<style>
		#div1{
			background-color: #9F0;
			position:absolute; /* 절대 */
			/* 절대위치 선언하자마자 나의 공간이 사라집니다
			   자리를 차지하지 않으며 붕 떠있다			*/
			top:100px; left:50px;
		}
		#div2{
			background-color: yellow;
			position:relative; /* 상대좌표를 쓰겠다 */
			/* 상대좌표는 자신의 공간을 그대로 유지합니다 
			   원래 자기가 있던 위치기준으로 			*/
			top:40px; left:40px;
		}
		#span2{
			background-color:#FC0;
			/*display:block;*/
			/* div에 적용된 기본속성 
			   화면의 왼쪽 끝부터 오른쪽 끝까지 차지			*/
			
			display:none; /* 자신만의 공간이 사라집니다 */
		}
		#span1{
			background-color:#99C;
			visibility:hidden;	/* 자신만의 공간을 유지한다. 화면에는 안보임 */
			
		}
	</style>
</head>

<body>
	안녕하세요<br/>
    <span id="span1"> 스팬1 </span>
    <span id="span2"> 스팬2 </span>
    <span id="span3"> 스팬3 </span>
    안녕하세요<br/>   
	<div id="div2"> 두번째 div </div>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	<div id="div1"> 첫번째 div </div> <br/><br/><br/><br/>
    
    <div id="image1">
    	<img src="http://sogangori.com/www/icon/Capitan-S-icon.png" />
    	<div id="title"> HTML </div>
    </div>
    <style>
		#image1{
			width:200px;
		}
		#image1 img{
			width:200px;
		}
    	#title{
			position:relative;
			top:-30px;
			background-color:white;
			opacity:0.5;
			text-align:center;
		}
    </style>
</body>
</html>






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<!--
    <script>
    	window.onload=function(){
			allP=document.getElementsByName("p");
			for(i=0; i<allP.length; i++){
				allP[i].onclick=function(){
					allP[i].style.display="none";
				}
			}
		}
		
		객체.메서드(파라미터)
		
		$(document).ready(function(){
			$("p").click(function(){
				$(this).hide(1000);
			});
		});
    </script>
    -->
	<style>
		#div1{
			background-color: #9F0;
			position:absolute; /* 절대 */
			/* 절대위치 선언하자마자 나의 공간이 사라집니다
			   자리를 차지하지 않으며 붕 떠있다			*/
			top:100px; left:50px;
		}
		#div2{
			background-color: yellow;
			position:relative; /* 상대좌표를 쓰겠다 */
			/* 상대좌표는 자신의 공간을 그대로 유지합니다 
			   원래 자기가 있던 위치기준으로 			*/
			top:40px; left:40px;
		}
		#span2{
			background-color:#FC0;
			/*display:block;*/
			/* div에 적용된 기본속성 
			   화면의 왼쪽 끝부터 오른쪽 끝까지 차지			*/
			
			display:none; /* 자신만의 공간이 사라집니다 */
		}
		#span1{
			background-color:#99C;
			visibility:hidden;	/* 자신만의 공간을 유지한다. 화면에는 안보임 */
			
		}
	</style>
</head>

<body>
<img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>

	안녕하세요<br/>
    <span id="span1"> 스팬1 </span>
    <span id="span2"> 스팬2 </span>
    <span id="span3"> 스팬3 </span>
    안녕하세요<br/>   
	<div id="div2"> 두번째 div </div>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	<div id="div1"> 첫번째 div </div> <br/><br/><br/><br/>
    
    <div id="image1">
    	<img src="http://sogangori.com/www/icon/Capitan-S-icon.png" />
    	<div id="title"> HTML </div>
    </div>
    <style>
		#image1{
			width:200px;
		}
		#image1 img{
			width:200px;
		}
    	#title{
			position:relative;
			top:-30px;
			background-color:white;
			opacity:0.5;
			text-align:center;
		}
    </style>
    
    <img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>
</body>
</html>





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<!--
    <script>
    	window.onload=function(){
			allP=document.getElementsByName("p");
			for(i=0; i<allP.length; i++){
				allP[i].onclick=function(){
					allP[i].style.display="none";
				}
			}
		}
		
		객체.메서드(파라미터)
		
		$(document).ready(function(){
			$("p").click(function(){
				$(this).hide(1000);
			});
		});
    </script>
    -->
	<style>
		#div1{
			background-color: #9F0;
			position:absolute; /* 절대 */
			/* 절대위치 선언하자마자 나의 공간이 사라집니다
			   자리를 차지하지 않으며 붕 떠있다			*/
			top:100px; left:50px;
		}
		#div2{
			background-color: yellow;
			position:relative; /* 상대좌표를 쓰겠다 */
			/* 상대좌표는 자신의 공간을 그대로 유지합니다 
			   원래 자기가 있던 위치기준으로 			*/
			top:40px; left:40px;
		}
		#span2{
			background-color:#FC0;
			/*display:block;*/
			/* div에 적용된 기본속성 
			   화면의 왼쪽 끝부터 오른쪽 끝까지 차지			*/
			
			display:none; /* 자신만의 공간이 사라집니다 */
		}
		#span1{
			background-color:#99C;
			visibility:hidden;	/* 자신만의 공간을 유지한다. 화면에는 안보임 */
			
		}
	</style>
</head>

<body>
<img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>

	안녕하세요<br/>
    <span id="span1"> 스팬1 </span>
    <span id="span2"> 스팬2 </span>
    <span id="span3"> 스팬3 </span>
    안녕하세요<br/>   
	<div id="div2"> 두번째 div </div>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	<div id="div1"> 첫번째 div </div> <br/><br/><br/><br/>
    
    <div id="image1">
    	<img src="http://sogangori.com/www/icon/Capitan-S-icon.png" />
    	<div id="title"> HTML </div>
    </div>
    <style>
		#image1{
			width:200px;
		}
		#image1 img{
			width:200px;
		}
    	#title{
			position:relative;
			top:-30px;
			background-color:white;
			opacity:0.5;
			text-align:center;
		}
    </style>
    
    <img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>
    
    <div id="background"> 
      <div id="desc">
    	border-width:5px; //4방향 다
		border-width:5px 10px;  //  위 아래는 5, 왼쪽 오른쪽 10
		border-width:5px 10px 15px; //위 5 ,오른쪽 10 ,아래 15 , 왼쪽 10
      </div>
    </div>
    <style>
		#background{
			/*repeat ,no-repeat, repeat-x, repeat-y*/
			background:url('http://www.w3schools.com/images/w3css3_nomirror.gif') repeat;
			width:200px;
			height:200px;
			margin:50px;
			padding:200px;
			border:5px solid black;
			text-align:center;
			vertical-align:middle;
		}
		#desc{
			margin:30px;
			border:5px solid black;
			background-color:white;
			opacity:0.3;
		}
	</style>
</body>
</html>



저작자표시 비영리

'CSS' 카테고리의 다른 글

CSS3 border  (0) 2012.06.14
동영상 화면  (0) 2012.06.14
CSS 연습  (0) 2012.05.29
CSS 연습  (0) 2012.05.25
Bohemian life항상 즐겁고 재미있게~~건강한 몸과 마음으로 생각 하며 실천하자~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<style>
	* {   } 
	p {  }
	a ,li {   }
	ul li { /* ul엘리먼트의 차일드 li 에 적용해라 */
	   }
	ol>li { /*  ol을 부모로 가진 li */
		
		} 
    div+span{  /*div바로 뒤에 있는 span에만  */  } 
	img[src$=".jpg"] {  /* img태그의 src속성 값이 .jpg로 끝나는 것*/ } 
	img[src^="https"]{   /* img태그의 src속성 값이 .http로 시작하는 것*/ }
	img[src*="carIMG/"] {  /* 포함하고 있다면 */     }
	table:first-of-type{   /* ul의 첫번째 자식에 적용해라 */  }
	table:last-child{  /* 마지막 차일드에 적용해라 */}
	ol:nth-child(2){  /* 2번째 자식에 적용해라 */}
	ol:nth-child(2n){  /* 2,4,6,8... 자식에 적용해라 */}
	ol:nth-last-child(3) { /* 뒤에서 3번째 자식에 적용*/}
	[width=500]{   /* width속성값이 500인 것에 모두 적용 */}
	[title~=flower] {  /* 포함하고 있다면 */}
	[type|=video] { /*  type이란 attribute가 video로 시작한다면 */}  
	a:link { /* 한번도 방문한 적이 없는 링크*/ }
	a:visited{  /* 방문한 적이 있는 링크*/   }
	a:active{  /* 마우스를 누른 상태 */} 
	input:focus {  /* 커서가 깜박 거릴때가 포커스된상태  */} 
	p:first-letter{ /* p태그의 첫번째 글자에 스타일을 주자 */}
	div:first-line{ /* 첫줄에 스타일주기 */}
	table:first-child { /* 첫번째 자식에게 스타일주기*/}
	canvas:before{ /* 캔버스 바로 전 엘리먼트에게 */}
	div:after{ /* 모든 div뒤쪽에 있는 엘리먼트에게 */ }
	p:id(it){ /* p의 id어트리뷰트의 값이 it으로 시작하는 것*/}
	p:empty{  /* 자식이 없는 p 에 적용하기*/}
	#news:target{ /*id가 news인 모든 엘리먼트가 가리키는 대상  */}
	input:enabled{  /*  입력이 가능한 모든 input엘리먼트에게 */}
	input:disabled{  /*  입력이 불가능한 모든 input엘리먼트에게 
					 hidden 
	*/}
	input:checked{ /* 체크박스, 라디오 에 체크가 되었을때 */}
	:not(p)  {  /* p 빼고 전부 적용 */ }
	
	
	
	</style>
	<script>
		window.onload=function(){
			buttons=document.getElementsByTagName("button");
			videos=document.getElementsByTagName("video")
			
			video=videos[0]; // 0이 최소 1이 최대
			video.volume=0.5; //volume 이 setter메서드
			alert(video.volume); //volume 이 필드(프라퍼티)
			
			// video.setVolume=0.5;
			// video.getVolume();  // oop
			
			buttons[0].onclick=function(){				
				video.play();	
				div1.innerHTML+="play"; //setter 메서드
			}
			buttons[1].onclick=function(){				
				video.pause();	
				div1.innerHTML+="pause"; //setter 메서드
				alert(video.currentTime);
			}
			buttons[2].onclick=function(){				
				//video.stop();	
			}
			buttons[3].onclick=function(){
				video.width=400;
			}
			buttons[4].onclick=function(){
				video.width=800;
			}
			div1=document.getElementById("div1");
			originalText = div1.innerHTML; //getter메서드			
		}
	</script>
</head>

<body>
	<video  controls> 
        <!-- 사파리, ie9, 스마트폰, 크롬, -->
		<source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4">
		<!-- 파이어 폭스  -->
		<source src="./sample2.webm" type="video/webm">
     </video><br/>
     <button> start </button>
     <button> pause </button>
     <button> stop </button>
     <button> 원본 </button>
     <button> 2배크기 </button>
     <button> 2배크기 </button>
     
    <div id="div1"> </div>
</body>
</html>



저작자표시 비영리

'CSS' 카테고리의 다른 글

CSS3 border  (0) 2012.06.14
위치  (0) 2012.06.14
CSS 연습  (0) 2012.05.29
CSS 연습  (0) 2012.05.25
Bohemian life항상 즐겁고 재미있게~~건강한 몸과 마음으로 생각 하며 실천하자~~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

/* 메뉴 전체 스타일 */
#menu {
	width: 960px; /* 메뉴 너비 */
	height: 40px; /* 메뉴 높이 */
	clear: both;
}

ul.naviga {
	float: left; /* 왼쪽으로 플로팅 */
	width: 960px; /* 메인 메뉴 너비 */
	margin: 0; /* 여백 */
	padding: 0; /* 안여백 */
	list-style: none; /* 불릿 없앰 */
	background: #39F; /* 배경색 */
	-moz-border-radius-topright: 10px;
	/* 탭 모양 만듦 (topleft와 topright를 둥글게 처리*/
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
}

ul.naviga li {
	display: inline;
} /* ul밑의 li가 옆으로 나란히 나온다*/
ul.naviga li a {
	float: left; /* 왼쪽으로 플로팅 */
	font: bold 14px 굴림; /* 텍스트 스타일 */
	line-height: 40px; /* 줄간격 */
	color: #fff; /* 글자색 */
	text-decoration: none; /* 밑줄 없앰 */
	text-shadow: 1px 1px 1px #880000; /* 텍스트 그림자 */
	margin: 0; /* 여백 */
	padding: 0 30px; /* 안여백 */
	background: #39F; /* 배경색 */
	-moz-border-radius-topright: 10px;
	/* 탭 모양 만듦 (topleft와 topright를 둥글게 처리) */
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
}

/* current - 현재 지정된 a 태그  */
ul.naviga .current a,ul.naviga li:hover>a {
	color: #00ddff; /* 글자색 */
	text-decoration: none; /* 밑줄 없앰 */
	text-shadow: 1px 1px 1px #330000; /* 텍스트 그림자 */
	background: #36F; /* 배경색 */
	-moz-border-radius-topright: 10px; /* 탭 모양 만듦 */
	-webkit-border-top-right-radius: 10px;
	-moz-boirder-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
}

/* 서브 메뉴 스타일 */
ul.naviga ul {
	display: none; /* 기본으로 화면에 표시 안함 */
}

ul.naviga li:hover>ul {
	position: absolute; /* 고정 위치 포지셔닝 */
	display: block; /* 영역 확보 */
	width: 920 px; /* 너비 */
	height: 45px; /* 높이 */
	margin: 40px 0 0 0; /* 여백 */
	background: #33F; /* 배경색 */
	-moz-border-radius-bottomright: 10px; /* 탭 모양 만듦 */
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
}

/* 메인 메뉴 항목에 마우스 오버한 후 나타나는 서브 메뉴 항목의 링크 스타일 */
ul.naviga li:hover>ul li a {
	float: left; /* 왼쪽으로 플로팅 */
	font: bold 14px 굴림; /* 텍스트 스타일 */
	line-height: 45px; /* 줄간격 */
	color: #fff; /* 글자색 */
	text-decoration: none; /* 밑줄 없앰 */
	text-shadow: 1px 1px 1px #110000; /* 텍스트 그림자 */
	margin: 0; /* 여백 */
	padding: 0 30px 0 0; /* 안여백 */
	background: #33F; /* 배경색* 
        }

        /* 메인 메뉴 항목에 마우스 오버한 후 서브 메뉴 항목에 마우스 오버했을 때 스타일 */ ul .naviga li
	: hover >   ul li a : hover { 
                 color : #120000; /* 글자색 */
	text-decoration: none; /* 밑줄 없앰 */
	text-shadow: none; /* 텍스트 그림자 */
}
</style>
</head>
<body>
	<div id="menu1">
		<ul id="naviga">
			<li><a href="#">홈</a></li>
			<li><a href="#">수업</a></li>
			<li><a href="#">게시판</a></li>
			<li><a href="#">방명록</a></li>
		</ul>
	</div>
</body>
</html>


</head>

<body>
	<div id="menu">
		<ul class="naviga">
			<li><a href="#"> Home </a></li>
			<li><a href="#"> 웹개발 </a>
				<ul>
					<li><a href="#"> Design </a></li>
					<li><a href="#"> HTML5 + CSS3 </a></li>
					<li><a href="#"> JQuery </a></li>
					<li><a href="#"> 웹 + 모바일 </a></li>

				</ul></li>
			<li><a href="#"> 게시판 </a>
				<ul>
					<li><a href="#"> Q & A </a></li>
					<li><a href="#"> 방명록 </a></li>
				</ul>
			<li><a href="#"> 프로필 </a></li>
		</ul>
	</div>
</body>



저작자표시 비영리

'CSS' 카테고리의 다른 글

CSS3 border  (0) 2012.06.14
위치  (0) 2012.06.14
동영상 화면  (0) 2012.06.14
CSS 연습  (0) 2012.05.25
Bohemian life항상 즐겁고 재미있게~~건강한 몸과 마음으로 생각 하며 실천하자~~
CSS.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS 연습</title>
	<script>
		one=document.getElementById("one");
	</script>
	<style>
	#one{ background-color: #bb8000; 
	        width:500px;
	        height:100px;
	        padding: 10px 10px 10px 10px;		
	        margin-top: 10px;
	        margin-left: 10px;
		}
	#two{background-color: #bb2288; 
	        width:500px;
	        height:100px;
	        padding: 10px 10px 10px 10px;		
	        margin-top: 10px;
	        margin-left: 10px;	
	        background-image:
	        url( "이미지 1URI를 ~~~") 
	      		;
	        -webkit-transition:all 0.9s ; /* 복구하는데 0.8초 */
		}
	#two:hover {
		width:800px;
		height:200px;
		background-color:orange ;
		background-image:url( "이미지2 URI를 ~~~"); 
								
		
		/* webkit 속성은 구글 크롬에서만 됩니다 */
		-webkit-transition:all 0.9s ;    /* 0.9초동안 변화 */
		-webkit-transition-delay: 1s ; /* 1초 후 시작 */
	}
	
	
	</style>
	
</head>
<body>
	
	<div id="one">  내가 만든 공간 division 1</div>
	<div id="two">  내가 만든 공간 division 2 </div>
	
</body>
</html>
</html>


저작자표시 비영리

'CSS' 카테고리의 다른 글

CSS3 border  (0) 2012.06.14
위치  (0) 2012.06.14
동영상 화면  (0) 2012.06.14
CSS 연습  (0) 2012.05.29
Bohemian life항상 즐겁고 재미있게~~건강한 몸과 마음으로 생각 하며 실천하자~~

+ Recent posts

티스토리툴바