Notice
Recent Posts
Recent Comments
Link
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags more
Archives
Today
Total
관리 메뉴

스포츠마케터의 초보 개발자 도전기

HTML / CSS / JS/ jQuery study 05 본문

develop/WEB

HTML / CSS / JS/ jQuery study 05

teammate brothers 2024. 5. 17. 16:52

ex001_submenu

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<link rel="stylesheet" href="css/reset.css">
		
		<style>
			#menu{height:40px;
					   background: #63696b;
					   font-size: 14px;}
					   
			.nav{height:40px; width:967px;
				   margin:0 auto;
				   position: relative;}
				   			
			.nav li{float: left;}
			
			.nav > li > a{display: block;
							 color: white; 
							 font-weight: bold; 
							 text-align: center; 
							 padding: 10px 26px;}
							 
			.nav .sub{position:absolute; left:0; top:40px;
						  display:none;}
						  
			.nav .plus a:hover{background: #aaf;}
			
			.nav > li:hover .sub{display: block;}
			.nav >li:hover > a{background: #4a96de; color:white;}
			.nav .sub li a{display: block;
								height: 40px;
								padding:0 5px;
								color:#666;}
								
			.nav .sub li a:hover{color:red;}
			
			.sub2 li:first-child{margin-left: 80px;}
			.sub3 li:first-child{margin-left: 200px;}
			.sub4 li:first-child{margin-left: 300px;}
			.sub5 li:first-child{margin-left: 350px;}
			.sub6 li:first-child{margin-left: 400px;}
		</style>
		
	</head>
	
	<body>
		<div id="menu">
			<ul class="nav">
				<li>
					<a href="#">개인뱅킹</a>
					<ul class="sub">
						<li><a href="#">조회</a></li>
						<li><a href="#">이체</a></li>
						<li><a href="#">신규/해지</a></li>
						<li><a href="#">공과금</a></li>
						<li><a href="#">뱅킹보안</a></li>
						<li><a href="#">골드뱅킹</a></li>
						<li><a href="#">금융서비스</a></li>
						<li><a href="#">사용자관리</a></li>
						<li><a href="#">카드/증권</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">자산관리</a>
					<ul class="sub sub2">
						<li><a href="#">조회</a></li>
						<li><a href="#">이체</a></li>
						<li><a href="#">신규/해지</a></li>
						<li><a href="#">공과금</a></li>
						<li><a href="#">뱅킹보안</a></li>
						<li><a href="#">골드뱅킹</a></li>
						<li><a href="#">금융서비스</a></li>
						<li><a href="#">사용자관리</a></li>
						<li><a href="#">카드/증권</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">예금신탁</a>
					<ul class="sub sub3">
						<li><a href="#">조회</a></li>
						<li><a href="#">이체</a></li>
						<li><a href="#">신규/해지</a></li>
						<li><a href="#">공과금</a></li>
						<li><a href="#">뱅킹보안</a></li>
						<li><a href="#">골드뱅킹</a></li>
						<li><a href="#">금융서비스</a></li>
						<li><a href="#">사용자관리</a></li>
						<li><a href="#">카드/증권</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">대출</a>
					<ul class="sub sub4">
						<li><a href="#">조회</a></li>
						<li><a href="#">이체</a></li>
						<li><a href="#">신규/해지</a></li>
						<li><a href="#">공과금</a></li>
						<li><a href="#">뱅킹보안</a></li>
						<li><a href="#">골드뱅킹</a></li>
						<li><a href="#">금융서비스</a></li>
						<li><a href="#">사용자관리</a></li>
						<li><a href="#">카드/증권</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">펀드</a>
					<ul class="sub sub5">
						<li><a href="#">조회</a></li>
						<li><a href="#">이체</a></li>
						<li><a href="#">신규/해지</a></li>
						<li><a href="#">공과금</a></li>
						<li><a href="#">뱅킹보안</a></li>
						<li><a href="#">골드뱅킹</a></li>
						<li><a href="#">금융서비스</a></li>
						<li><a href="#">사용자관리</a></li>
						<li><a href="#">카드/증권</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">외환</a>
					<ul class="sub sub6">
						<li><a href="#">조회</a></li>
						<li><a href="#">이체</a></li>
						<li><a href="#">신규/해지</a></li>
						<li><a href="#">공과금</a></li>
						<li><a href="#">뱅킹보안</a></li>
						<li><a href="#">골드뱅킹</a></li>
						<li><a href="#">금융서비스</a></li>
						<li><a href="#">사용자관리</a></li>
						<li><a href="#">카드/증권</a></li>
					</ul>
				</li>
				
				<li class="plus"><a href="#">퇴직연금</a></li>
				<li class="plus"><a href="#">골드</a></li>
				<li class="plus"><a href="#">보험</a></li>
				<li class="plus"><a href="#">미션플러스</a></li>
			</ul>
		</div>
	</body>

</html>

 

ex002_radius

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
			h1{width:200px; padding: 80px 0;
				background:red;
				text-align: center;
				border-radius: 20px 30px 50px 70px;}
				/*border-radius:좌상 우상 우하 좌하/[좌상 우하] [우상 좌하]/[좌상] [우상 좌하] [우하]*/		
		</style>
		
	</head>
	
	<body>
		<h1>내용</h1>
	</body>

</html>

 

ex003_box_shadow

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
			p{width:150px;
				padding:20px 0;
				background: palegreen;
				text-align: center;
				box-shadow: 10px 10px 5px brown;} /*x값 y값 번지는정도 색상*/
		</style>
		
	</head>
	
	<body>
		<p>HTML</p>
	</body>

</html>

 

ex004_text_shadow

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
		p{text-shadow: 10px 10px 5px grey;}
		
		</style>
		
	</head>
	
	<body>
		<p>글자에 그림자 넣기</p>
	</body>

</html>

 

ex005_text_shadow

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
		body{background: black;}
		h1{text-shadow: 0 0 4px #ccc,
								0 -5px 4px #ff3,
								2px -10px 5px #fd3,
								-2px -15px 11px #f80,
								2px -19px 18px #f20;}
		
		h1:hover{text-shadow: 0 0 4px #cca,
								0 -5px 4px #ffa,
								2px -10px 5px #fda,
								-2px -15px 11px #f8a,
								2px -19px 18px #f2a}
		</style>
		
	</head>
	
	<body>
		<h1>FIRE!</h1>
	</body>

</html>

 

ex006_ellipsis (생략)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
			/*text-overflow:ellepsis 는 브라우저를 넘어가는 텍스트에 대해 ...으로 생략표시(필수요소 같이 넣을것)*/
			p:first-child{border: 3px solid black;
			   white-space: nowrap; /*필수*/
			   overflow: hidden;       /*필수*/
			   text-overflow: ellipsis;}		
			
			/*nowrap : 내용이 브라우저의 너비를 벗어나면 스크롤을 생성*/   
			.nowrap{white-space: nowrap;
						background: yellow;}
		</style>
		
	</head>
	
	<body>
		<p>
			화면에 출력중인 문자열이 브라우저의 너비보다 넓다면??
		</p>
		
		<p class="nowrap">
			웹브라우저의 크기를 넘어가는 수준의 내용이 포함되어 있다면?
		</p>
	</body>

</html>

 

ex007_transition

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
			#ani{width:100px; height:100px;
					background-color: red;
					border-radius: 0px;
					
					transition-property: background-color, border-radius;
					transition-duration: 1s;    /*1초에 걸쳐 변경*/
					transition-delay: 2s;       /*2초 뒤 변경 시작*/
					
					/*safari에서 호환성 증가*/
					-webkit-transition-property: background-color, border-radius;
					-webkit-transition-duration: 1s;
					-webkit-transition-delay: 2s;
					
					/*모질라, 파이어폭스*/
					-moz-transition-property: background-color, border-radius;
					-moz-transition-duration: 1s;
					-moz-transition-delay: 2s;
					}
					
					/*
					-webkit- 크롬, 사파리
					-moz- 파이어폭스
					-o- 오페라
					-ms- 익스플로러
					*/
					
					
			#ani:hover{background-color: blue; border-radius: 50px;}		
		</style>
		
	</head>
	
	<body>
		<div id="ani"></div>
	</body>

</html>

 

ex008_responsive_web (반응형웹)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
			#ani{width:100px; height:100px;
					background-color: red;
					border-radius: 0px;
					
					transition-property: background-color, border-radius;
					transition-duration: 1s;    /*1초에 걸쳐 변경*/
					transition-delay: 2s;       /*2초 뒤 변경 시작*/
					
					/*safari에서 호환성 증가*/
					-webkit-transition-property: background-color, border-radius;
					-webkit-transition-duration: 1s;
					-webkit-transition-delay: 2s;
					
					/*모질라, 파이어폭스*/
					-moz-transition-property: background-color, border-radius;
					-moz-transition-duration: 1s;
					-moz-transition-delay: 2s;
					}
					
					/*
					-webkit- 크롬, 사파리
					-moz- 파이어폭스
					-o- 오페라
					-ms- 익스플로러
					*/
					
					
			#ani:hover{background-color: blue; border-radius: 50px;}		
		</style>
		
	</head>
	
	<body>
		<div id="ani"></div>
	</body>

</html>

 

ex009_responsive_web

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" href="css/reset.css">
		
		<style>
			/*공통설정 및 휴대폰용 스타일*/
			@media screen and (max-width:600px){
				html{
					#header{
						text-align: center;
						padding-left: 6%;
						background-color: #100066;
					}
					
					#header h1{
						padding:5% 0;
						margin:0 0 5%;
						color:#fff;
					}
					
					#nav{background-color: royalblue;}
					
					#nav ul li{
						width:100%;
						text-align: center;
						color:#fff;
						border-bottom:1px solid #fff;
					}
					
					#contents{
						width:80%;
						margin:2% auto;
					}
									
					#contents h1{
						font-weight: bold;
					}
					
					.contents_menu > div{
						height:130px;
						width:80%;
						margin: 0 auto;
						background-color: #0cf;
						padding:15px 0 0 20px;
						margin-bottom: 3px;
					}
					
					#footer{
						width:100%;
						text-align: center;
					}
				}/*html*/
			}/*@media screen*/
		
				/*태블릿용 스타일*/
				@media screen and (min-width:601px) and (max-width:800px){
					html{
						#header{
						text-align: center;
						padding-left: 6%;
						background-color: #100066;
					}
					
					#header h1{
						padding:5% 0;
						margin:0 0 2%;
						color:#fff;
					}
						#nav ul{
							background-color: royalblue;
						}
						
						#nav ul li{
						width:100%;
						text-align: center;
						color:#fff;
						padding:5px 0;
					}
					
					#nav ul{overflow: hidden;}
					
					#nav ul li{
						float:left;
						width:30%;
					}
					
					.contents_menu{overflow: hidden;}
					.contents_menu > div{
						height:130px;
						width:80%;
						background-color: #0cf;
						padding:15px 0 0 20px;
						margin-bottom: 3px;
						width:45%;
						margin-top:10px;
						float:left;
					}
					
					#contents_menu1{
						margin-right:5px;
						margin-left:10px;}
					
					}/*html*/
				}/*@media*/
		
		</style>
		
	</head>
	
	<body>
		<div id="stage">
			<div id="header">
				<h1>Media Queries</h1>
			</div>
			
			<div id="nav">
				<ul class="cf">
					<li>menu1</li>
					<li>menu2</li>
					<li>menu3</li>
				</ul>
			</div>
			
			<div id="content" class="cf">
				<aside class="contents_menu cf">
					<div id="contents_menu1">
						<h1>Contents Menu1</h1>
					</div>
					
					<div id="contents_menu2">
						<h1>Contents Menu2</h1>
					</div>
				</aside>
				
				<div class="main">
					<div id="body_link">
						<h1>반응형 디자인</h1>
						<p>반응형 웹 디자인을 잘합시다.</p>
					</div>
					
					<div id="section_link">
						<h1>반응형 디자인</h1>
						<p>반응형 웹 디자인을 잘합시다.</p>
					</div>
					
					<div id="article_link">
						<h1>반응형 디자인</h1>
						<p>반응형 웹 디자인을 잘합시다.</p>
					</div>
					
					<div id="aside_link">
						<h1>반응형 디자인</h1>
						<p>반응형 웹 디자인을 잘합시다.</p>
					</div>
					
					<div id="nav_link">
						<h1>반응형 디자인</h1>
						<p>반응형 웹 디자인을 잘합시다.</p>
					</div>
					
				</div><!--main-->

			</div><!--content-->
			
			<div id="footer">
				&copy; 2024 KH Korea
			</div><!--footer-->
			
		</div><!--stage-->
	</body>

</html>

'develop > WEB' 카테고리의 다른 글

HTML / CSS / JS/ jQuery study 08  (0) 2024.05.22
HTML / CSS / JS/ jQuery study 07  (0) 2024.05.22
HTML / CSS / JS/ jQuery study 04  (0) 2024.05.17
HTML / CSS / JS/ jQuery study 03  (0) 2024.05.17
HTML / CSS / JS/ jQuery study 02  (0) 2024.05.17
'develop/WEB' Related Articles more