스포츠마케터의 초보 개발자 도전기
HTML / CSS / JS/ jQuery study 04 본문
ex001_simple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{margin:0; padding:0;}
li{list-style: none;
float:left;}
.menu{overflow:hidden;}
.menu > li > a{border:1px solid black;
width:50px;}
.menu li a{display:block;
padding:10px;
text-decoration:none;}
.submenu{display: none;}
.submenu li{border: 1px solid black;}
.menu li:hover ul.submenu{display:block;}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">메뉴판</a>
<ul class="submenu">
<li><a href="#">짜장면</a></li>
<li><a href="#">짬뽕</a></li>
<li><a href="#">볶음밥</a></li>
</ul>
</li>
</ul>
</body>
</html>
위 코드로 작성한 메뉴판
메뉴판에 마우스오버하면 하위 메뉴가 나옴
ex002_외부스타일 시트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--외부스타일시트 참조-->
<link rel="stylesheet" href="css/reset.css">
<style>
p{color:red;}
</style>
</head>
<body>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
<p>메뉴3</p>
<a href="#">메뉴4</a>
<table border="1">
<tr>
<td>안녕</td>
<td>하세요</td>
</tr>
<tr>
<td>반갑</td>
<td>습니다</td>
</tr>
</table>
</body>
</html>@charset "UTF-8";
*{margin:0; padding:0;}
li{list-style: none;}
a{text-decoration: none;}
table{border-collapse: collapse;}
ex003_absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.box{margin:40px;
width:250px;
border: 1px solid red;
position: relative; /*position:absolute를 자식객체가 가지고 있으면 높은 확률로 부모 객체가 position:relative를 가진다. 아니면 부모 객체를 빠져나감*/
}
p{width:130px;
height:80px;
padding:10px;
color:white;}
.red{background: red;}
/*position:absolute와 left, top 등의 속성을 사용하면 .box를 부모로 인지하지 못하고 기준이 body로 바뀐다.
이를 해결하기 위해 부모인 .box에 position:relative속성을 추가하여 자식으로 인지하도록 설정해야 한다.*/
.blue{background: blue;
position: absolute;
left:50px; top:30px;}
.green{background: green;}
</style>
</head>
<body>
<div class="box">
<p class="red">박스1</p>
<p class="blue">박스2</p>
<p class="green">박스3</p>
</div>
</body>
</html>
ex004_position_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/reset.css">
<style>
#header{width:1000px; height:80px;
border:1px solid black;
margin: 10px auto;
position:relative;}
.aa{position:absolute; left:0px; top:7px;}
ul{overflow: hidden;}
li{float:left;}
p:last-child{position:absolute;
right:10px; top:7px;}
.a2{position:absolute; left:225px; top:40px;}
.a1{position: absolute; left:350px; top:10px;}
</style>
</head>
<body>
<div id="header">
<p class="aa">
<img src="image/acid2Test.jpg" alt="웃는얼굴" width="70" height="60">
</p>
<ul class="a1">
<li><img src="image/menu_13.jpg"></li>
<li><img src="image/menu_14.jpg"></li>
<li><img src="image/menu_15.jpg"></li>
<li><img src="image/menu_16.jpg"></li>
<li><img src="image/menu_17.jpg"></li>
<li><img src="image/menu_18.jpg"></li>
<li><img src="image/menu_19.jpg"></li>
<li><img src="image/menu_20.jpg"></li>
<li><img src="image/menu_21.jpg"></li>
</ul>
<ul class="a2">
<li><img src="image/menu01_12.jpg"></li>
<li><img src="image/menu01_13.jpg"></li>
<li><img src="image/menu01_14.jpg"></li>
<li><img src="image/menu01_15.jpg"></li>
<li><img src="image/menu01_16.jpg"></li>
<li><img src="image/menu01_17.jpg"></li>
<li><img src="image/menu01_18.jpg"></li>
<li><img src="image/menu01_19.jpg"></li>
</ul>
<p>
<img src="image/img_standards.gif" alt="로고">
</p>
</div>
</body>
</html>
ex005_position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.bbs{width:260px;
border:2px solid #ccc;
margin:10px auto;
position:relative;
padding:10px;}
h2{color:#36f; margin-bottom:10px;}
li{height:18px; padding-left:10px;
margin-left: 10px;
background: url(image/arrow.gif) no-repeat 0% 50%;}
li a{color:#666; }
li a:hover{text-decoration: underline;
color:#309;}
p{position:absolute;
right:10px;
top:10px;}
p a:hover{text-decoration: underline; color:antiquewhite;}
</style>
</head>
<body>
<div class="bbs">
<h2>공지사항</h2>
<p><a href="#">더보기</a></p>
<ul>
<li><a href="#">공지사항1</a></li>
<li><a href="#">공지사항2</a></li>
<li><a href="#">공지사항3</a></li>
<li><a href="#">공지사항4</a></li>
</ul>
</div>
</body>
</html>
ex006_layout_css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/reset.css">
<style>
#header{width:960px;
margin:0 auto;
position: relative;
height: 150px;}
#header #hgroup{position: absolute; left:5px; top:10px;}
li{float:left;}
#a1{position: absolute;
right:0; top:3px;}
#a1{overflow: hidden;}
#a1 ul li{border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid gray;}
#a1 ul li:first-child{border-left: 1px solid gray;}
#a1 ul li a{display: block;
padding:3px 10px;
color: #666;}
#a1 ul li a:hover{background: #999;
color:white;}
/*------------a1 끝-------------*/
#a2{position:absolute;
right:0; bottom: 0;}
#a2{overflow: hidden;}
#a2 ul li{border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid gray;}
#a2 ul li:nth-child(1){border-left:1px solid gray;}
#a2 ul li a{display: block; padding:10px 20px;}
#a2 ul li a:hover{background: plum; color: white;}
/*------------a2 끝-------------*/
#content{width:960px;
overflow: hidden;
margin:10px auto;;}
#section{width:750px;
float:left;}
#section .article{margin-bottom: 10px;
padding:20px;
border:1px solid gray;}
#aside{width:180px;
height:250px;
padding: 10px 10px;
float:right;
border:1px solid gray;}
</style>
</head>
<body>
<div id="header">
<div id="hgroup">
<h1>Rint Development</h1>
<h2>HTML + CSS</h2>
</div>
<div id="a1">
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Simulation</a></li>
<li><a href="#">Data</a></li>
</ul>
</div>
<div id="a2">
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">js</a></li>
</ul>
</div>
</div> <!--header-->
<div id="content">
<div id="section">
<div class="article">
<h2>Main Article</h2>
<p>main content1</p>
</div>
<div class="article">
<h2>Main Article</h2>
<p>main content2</p>
</div>
<div class="article">
<h2>Main Article</h2>
<p>main content3</p>
</div>
</div><!--section-->
<div id="aside">
<div class="article">
<h2>Main Article</h2>
<p>main content side</p>
</div>
</div><!--aside-->
</div><!--content-->
</body>
</html>
ex007_fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/reset.css">
<style>
#header{width:200px;
border:1px solid black;
position:fixed;
left:30px; top:30px;}
#content{width:300px; height:1500px;
background-color: #999; color:white;
margin-left:250px;}
#footer{width:500px;
background: black;
color:#fff;
position:fixed;
bottom:0;}
</style>
</head>
<body>
<div id="header">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div><!--header-->
<div id="content">
페이지의 주 컨텐츠
</div><!--content-->
<div id="footer">
copyright allright reserved.
</div>
</body>
</html>
ex008_form
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" herf="css/reset.css">
<style>
</style>
</head>
<body>
<!--form 태그를 쓰면 name 속성에 저장된 값을 파라미터로 보낼 수 있다.
특정 파라미터를 원하는 페이지로 전달하기 위한 태그-->
<form action="abc.html">
ID : <input text="text" size="20" value="안녕" name="myId"><br>
PWD : <input type="password" placeholder="비밀번호를 입력하시오" name="myPwd">
<hr>
이메일 수신 여부 :
<input type="radio" value="y" name="email">예
<input type="radio" value="n" name="email">아니오
<hr>
관심분야 : <br>
<input type="checkbox" value="HTML" name="chk1">HTML<br>
<input type="checkbox" value="JavaScript" name="chk1">Js<br>
<hr>
업로드 :
<input type="file">
<br><br>
<input type="submit" value="가입하기">
</form>
</body>
</html>
ex009_hw
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/reset.css">
<style>
h2{text-align: center;}
table{margin:10px auto;}
.t1{background-color: blue;
border-bottom: 5px solid black;
color:white;
font-weight:bold;}
.content{background-color: lightyellow;}
th{width:250px;
padding: 20px 0;}
td{width: 250px;
padding: 20px 10px;}
</style>
</head>
<body>
<h2>
업종별 모범거래기준 주요 내용 비교
</h2>
<table border="1">
<tr class="t1" align="center">
<th>구분</th>
<th>제빵(4월)</td>
<th>피자(7월)</td>
<th>치킨(7월)</td>
<th>커피(11월)</td>
</tr>
<tr class="content" align="center">
<th>영업지역</th>
<td>500m</td>
<td>1,500m</td>
<td>800m</td>
<td>500m</td>
</tr>
<tr class="content">
<th>광고</th>
<td>관련내용 없음<br>(분쟁없음)</td>
<td>총광고비 사전동의<br>광고내역 송부 등</td>
<td>총광고비 사전동의<br>광고내역 송부 등</td>
<td>관련내용 없음<br>(분쟁없음)</td>
</tr>
<tr class="content">
<th>대금지급</th>
<td>관련내용없음<br>(분쟁없음)</td>
<td>관련내용없음<br>(분쟁없음)</td>
<td>관련내용없음</td>
<td>월 1~2회 정산<br>정산기한 최소 7일 보장</td>
</tr>
</table>
</body>
</html>
ex010_hw
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.menu{overflow:hidden;
float:left;}
.menu li a{width:100px;
text-align: center;
background: black; color:white;}
.menu li a{display: block;
padding:10px;
text-decoration: none;}
.submenu{position:absolute; display:none;}
.submenu li{width:120px; background: black;}
.submenu li a{padding:10px; color:white;}
.menu li a:hover{background: grey;}
.menu li:hover ul.submenu{display:block;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
</ul>
</li>
</ul>
</body>
</html>
'develop > WEB' 카테고리의 다른 글
| HTML / CSS / JS/ jQuery study 07 (0) | 2024.05.22 |
|---|---|
| HTML / CSS / JS/ jQuery study 05 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 03 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 02 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 01 (0) | 2024.05.16 |
'develop/WEB' Related Articles
more
