이거맞잖아 제대로해놧음
(05) 예5-05-본인이름.html =========================================
<DOCTYPE HTML>
<html>
<head>
<style>
div, img {
margin: 20px 20px;
padding: 10px;
width : 200px; height: 70px;
}
p { background: aqua; }
div { background : skyblue; }
span { background : orange; border: 5px solid red;
padding: 20px; margin: 150px 150px;
width : 200px; height: 70px;
}
img { background : green; }
</style>
</head>
<body>
이 페이지는 각 박스유형의 출력 예를 나타낸다. <div>div 태그와 p 태그</div> 박스는
블럭 유형이다. <p>그리고 <span>span 태그</span> 박스는 인라인 유형이다.</p>
<p> img 태그로 표현하는 이미지
<ul>
<li> HTML5 </li>
<li id="a"> CSS3 </li>
<li> Javascript </li>
</ul><hr>
<table border="1">
<caption> 웹 프로그래밍 </caption>
<tr> <th> 구분 </th> <th col="3"> 내용 </th> </tr>
<tr><td>클라이언트</td> <td>HTML5 문서</td><td id="b">CSS3</td> <td>Javascript</td> </tr>
<tr><td>서버</td> <td>PHP 코드</td> <td>MySQL</td> <td>PHP/MySQL 연동</td> </tr>
</table>
이 페이지는 각 박스유형의 출력 예를 나타낸다. <div>div 태그와 p 태그</div> 박스는
블럭 유형이다. <p>그리고 <span>span 태그</span> 박스는 인라인 유형이다.</p>
<p> img 태그로 표현하는 이미지 <img src="" alt="img 태그"/> 박스는 인라인-블럭 유형이다.</p>
<div id="b1">박스1</div>
<div id="container" >
<div id="b2">박스2</div>
<div id="b3">박스3</div>
<div id="b4">박스4</div>
</div>
<div id="b5">박스5</div>
</html>
(09-3) 예5-09-3-본인이름.html =========================================
<!DOCTYPE html>
<html>
<head>
<title> 메뉴 리스트 작성(수평) </title>
<style> /* 출력스타일 2 : 메뉴 리스트 수평출력 */
ul { background: lightgray; padding: 6px; }
li { display: inline; padding: 10px ; }
a { color: black; text-decoration: none; padding: 5px 10px; }
a:hover { background: gray; color: white; }
</style>
</head>
<body>
<h3> HTML5 웹 프로그래밍 </h3><hr>
<ul>
<li><a href="#home" class="m">Home</a></li>
<li><a href="#html" class="m">HTML5</a></li>
<li><a class="m">CSS3</a></li>
<li><a href="#js" class="m">Javascript</a></li>
</ul>
이 페이지는 각 박스유형의 출력 예를 나타낸다. <div>div 태그와 p 태그</div> 박스는
블럭 유형이다. <p>그리고 <span>span 태그</span> 박스는 인라인 유형이다.</p>
<p> img 태그로 표현하는 이미지 <img src="" alt="img 태그"/> 박스는 인라인-블럭 유형이다.</p>
<div id="b1">박스1</div>
<div id="container" >
<div id="b2">박스2</div>
<div id="b3">박스3</div>
<div id="b4">박스4</div>
</div>
<div id="b5">박스5</div>
</html>
(09-가) 예5-09-가-본인이름.html =========================================
<!DOCTYPE html>
<html>
<head>
<title> 메뉴 리스트 작성 </title>
</head>
<body>
<h3> HTML5 웹 프로그래밍 </h3> <hr>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">HTML5</a></li>
<li><a href="#contact">CSS3</a></li>
<li><a href="#about">Javascript</a></li>
</ul>
이 페이지는 각 박스유형의 출력 예를 나타낸다. <div>div 태그와 p 태그</div> 박스는
블럭 유형이다. <p>그리고 <span>span 태그</span> 박스는 인라인 유형이다.</p>
<p> img 태그로 표현하는 이미지 <img src="" alt="img 태그"/> 박스는 인라인-블럭 유형이다.</p>
<div id="b1">박스1</div>
<div id="container" >
<div id="b2">박스2</div>
<div id="b3">박스3</div>
<div id="b4">박스4</div>
</div>
<div id="b5">박스5</div>
</html>
(09-나) 예5-09-나-본인이름.html =========================================
<!DOCTYPE html>
<html>
<head>
<title> 메뉴 리스트 작성(수직) </title>
<style> /* 출력스타일 1 : 메뉴 리스트 수직출력 */
ul { background: lightgray;
margin: 0; padding: 0; width: 200px; }
a { display: block;
color: black; padding: 10px 20px;
text-decoration: none; }
a:hover { background: gray; color: white; }
</style>
</head>
<body>
<h3> HTML5 웹 프로그래밍 </h3><hr>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#html">HTML5</a></li>
<li><a >CSS3</a></li>
<li><a href="#js">Javascript</a></li>
</ul>
이 페이지는 각 박스유형의 출력 예를 나타낸다. <div>div 태그와 p 태그</div> 박스는
블럭 유형이다. <p>그리고 <span>span 태그</span> 박스는 인라인 유형이다.</p>
<p> img 태그로 표현하는 이미지 <img src="" alt="img 태그"/> 박스는 인라인-블럭 유형이다.</p>
<div id="b1">박스1</div>
<div id="container" >
<div id="b2">박스2</div>
<div id="b3">박스3</div>
<div id="b4">박스4</div>
</div>
<div id="b5">박스5</div>
</html>
(09-다) 예5-09-다-본인이름.html =========================================
<!DOCTYPE html>
<html>
<head>
<title> 메뉴 리스트 작성(수평) </title>
<style> /* 출력스타일 2 : 메뉴 리스트 수평출력 */
ul { background: lightgray; padding: 6px; }
li { display: inline; padding: 10px 10px ; }
a { color: black; padding: 5px 10px; text-decoration: none; }
a:hover { background: gray; color: white; }
</style>
</head>
<body>
<h3> HTML5 웹 프로그래밍 </h3><hr>
<ul>
<li><a href="#home" class="m">Home</a></li>
<li><a href="#html" class="m">HTML5</a></li>
<li><a class="m">CSS3</a></li>
<li><a href="#js" class="m">Javascript</a></li>
</ul>
이 페이지는 각 박스유형의 출력 예를 나타낸다. <div>div 태그와 p 태그</div> 박스는
블럭 유형이다. <p>그리고 <span>span 태그</span> 박스는 인라인 유형이다.</p>
<p> img 태그로 표현하는 이미지 <img src="" alt="img 태그"/> 박스는 인라인-블럭 유형이다.</p>
<div id="b1">박스1</div>
<div id="container" >
<div id="b2">박스2</div>
<div id="b3">박스3</div>
<div id="b4">박스4</div>
</div>
<div id="b5">박스5</div>
</html>
(10) 예5-10-본인이름.html =========================================
<!DOCTYPE HTML>
<html>
<head>
<style>
#parent { height: 100px; height: 50px; padding : 10px;
background: gray; text-align: center;
}
.child { display : inline-block ;
width: 18%; height: 96%;
background: orange ;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="parent" >
<div class="child" > 메뉴항목 1 </div>
<div class="child" > 메뉴항목 2 </div>
<div class="child" > 메뉴항목 3 </div>
<div class="child" > 메뉴항목 4</div>
<div>
이 페이지는 각 박스유형의 출력 예를 나타낸다. <div>div 태그와 p 태그</div> 박스는
블럭 유형이다. <p>그리고 <span>span 태그</span> 박스는 인라인 유형이다.</p>
<p> img 태그로 표현하는 이미지 <img src="" alt="img 태그"/> 박스는 인라인-블럭 유형이다.</p>
<div id="b1">박스1</div>
<div id="container" >
<div id="b2">박스2</div>
<div id="b3">박스3</div>
<div id="b4">박스4</div>
</div>
<div id="b5">박스5</div>
</html>
이거맞지않냐
아니 너 어디갔어 해줫잖아