<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<link rel = "stylesheet" href = "../css/mystyle.css">
<style>
sub{
background : yellow;
color : red;
}
sup{
background : green;
color : yellow;
}
h1,h2,p{
width : 500px;
margin : 25px auto;
text-align: center;
}
</style>
</head>
<body>
<h1>Web 커피 메뉴</h1>
<h2><a href="에스프레소.html">에스프레소</a> 5500원</h2>
<p>곱게 간 원두에 고온 고압의 물을 투과시켜 추출해 데미타스 컵에 담은 커피.</P>
<h2><a href = "아메리카노.html" target = "_blank">아메리카노</a> 5000원</h2>
<p> 에스프레소에 <sup>물을 추가</sup>한 것입니다.</p>
<h2><a href = "카페라떼.html">카페오레</a> 6000원</h2>
<p> 에스프에소에 <sub>우유를 넣은</sub> 커피입니다.</p>
<h2><a href = "카푸치노.html">카푸치노</a> 6000원</h2>
<p> 커피위에 <sup>우유거품</sup>을 얹은 커피입니다.</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>에스프레소</title>
<link rel="stylesheet" href="../css/mystyle.css">
</head>
<body>
<br>
<br>
<img src ="../images/에스프레소.jpg" alt="에스프레소1" >
<img src ="../images/에스프레소.jpg" alt="에스프레소2">
<img src ="../images/에스프레소.jpg" alt="에스프레소3">
</body>
</html><!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>카페오래</title>
<link rel="stylesheet" href="../css/mystyle.css">
</head>
<body>
<br>
<br>
<img src ="../images/카페라떼.jpg" alt="카페라떼1" >
<img src ="../images/카페라떼.jpg" alt="카페라떼2">
<img src ="../images/카페라떼.jpg" alt="카페라떼3">
</body>
</html><!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>아메리카노</title>
<link rel="stylesheet" href="../css/mystyle.css">
</head>
<body>
<br>
<br>
<img src = "../images/아메리카노.jpg" alt="아메리카노">
<img src = "../images/아메리카노.jpg" alt="아메리카노">
<img src = "../images/아메리카노.jpg" alt="아메리카노">
</body>
</html><!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>카푸치노</title>
<link rel="stylesheet" href="../css/mystyle.css">
</head>
<body>
<br>
<br>
<img src = "../images/카푸치노.jpg" alt="카푸치노">
<img src = "../images/카푸치노.jpg" alt="카푸치노">
<img src = "../images/카푸치노.jpg" alt="카푸치노">
</body>
</html>한페이지에서 나타내기
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>web커피 이동</title>
<link rel = "stylesheet" href = "../css/mystyle.css">
<style>
sub{
background : yellow;
color : red;
}
sup{
background : green;
color : yellow;
}
h1,h2,p{
width : 500px;
margin : 25px auto;
text-align: center;
border : 10px solid black;
}
</style>
</head>
<body>
<h1>Web 커피 메뉴</h1>
<h2><a href="#cafe1">에스프레소</a> 5500원</h2>
<p>곱게 간 원두에 고온 고압의 물을 투과시켜 추출해 데미타스 컵에 담은 커피.</P>
<h2><a href = "#cafe2" target = "_blank">아메리카노</a> 5000원</h2>
<p> 에스프레소에 <sup>물을 추가</sup>한 것입니다.</p>
<h2><a href = "#cafe3">카페오레</a> 6000원</h2>
<p> 에스프에소에 <sub>우유를 넣은</sub> 커피입니다.</p>
<h2><a href = "#cafe4">카푸치노</a> 6000원</h2>
<p> 커피위에 <sup>우유거품</sup>을 얹은 커피입니다.</p>
<br>
<div id ="cafe1">
<br>
<br>
<img src ="../images/에스프레소.jpg" alt="에스프레소1" >
<img src ="../images/에스프레소.jpg" alt="에스프레소2">
<img src ="../images/에스프레소.jpg" alt="에스프레소3">
</div>
<div id ="cafe2">
<br>
<br>
<img src = "../images/아메리카노.jpg" alt="아메리카노">
<img src = "../images/아메리카노.jpg" alt="아메리카노">
<img src = "../images/아메리카노.jpg" alt="아메리카노">
</div>
<div id ="cafe3">
<br>
<br>
<img src ="../images/카페라떼.jpg" alt="카페라떼1" >
<img src ="../images/카페라떼.jpg" alt="카페라떼2">
<img src ="../images/카페라떼.jpg" alt="카페라떼3">
</div>
<div id ="cafe4">
<br>
<br>
<img src = "../images/카푸치노.jpg" alt="카푸치노">
<img src = "../images/카푸치노.jpg" alt="카푸치노">
<img src = "../images/카푸치노.jpg" alt="카푸치노">
</div>
<p>
</body>
</br>
</body>
</html>
신입 개발자 입니다!!!