내가 필요해서 만든 구내식당.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>구내식당</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
body {
color: black;
}
h1 {
/* border: 1px solid black;
border-style: ridge; */
background-color: white;
color: black;
/* width: 200px; */
height: auto;
text-align: center;
margin: 0px auto 0px auto;
}
nav ul {
padding : 0;
overflow: hidden;
width: 960px;
margin: 0px auto 0px auto;
}
nav ul li {
width: 310px;
height: auto;
/* padding: 5px; */
margin: 5px;
list-style: none;
float: left;
text-align: center;
line-height: 25px;
color: black;
box-sizing: border-box;
}
nav ul li:hover {
background-color: yellow;
border-top: 2px solid blue;
border-bottom: 2px solid red;
color: red;
}
iframe {
width: 1500px;
height: 1500px;
margin: 0px auto 0px auto;
display: block;
border-style:none;
}
h6 {
text-align: center;
}
</style>
<body>
<div class="jumbotron jumbotron-fluid container">
<h1>구내식당</h1>
</div>
<hr>
<nav>
<ul class="btn-group" style="display: flex; justify-content: center;"> <!-- 가운데 정렬-->
<a href="https://pf.kakao.com/_xbVsVK/97219770" target='구내식당'>
<li type="button" class="btn btn-dark">더반푸드</li>
</a>
<a href="https://pf.kakao.com/_xfWxfCxj/96909285" target='구내식당'>
<li type="button" class="btn btn-dark">더좋은밥상</li>
</a>
<a href="https://pf.kakao.com/_UxhFxeb/97364938" target='구내식당'>
<li type="button" class="btn btn-dark">쉐프의밥상</li>
</a>
</ul>
</nav>
<hr>
<iframe width="auto" height="auto" style="display: flex; justify-content: center;" src="https://img.freepik.com/free-photo/top-view-table-full-delicious-food-composition_23-2149141353.jpg?w=996&t=st=1668136415~exp=1668137015~hmac=d47ddd1fb22effaecf7e2c632b12b7e84ec5d55aeb7aa03a17d4f7886fe9a97e" name="구내식당" frameborder="1" aligw="middle", aligh="middle"> iframe</iframe>
<h6 class="btn btn-dark" style="position: absolute; left: 50%; transform: translateX(-50%);">ⓒ copyright : Bleck</h6> <!-- 가운데 정렬 -->
</body>
</html>
구내식당
ⓒ copyright : Bleck
728x90
'개발 > HTML' 카테고리의 다른 글
| HTML 기본 용어 (0) | 2022.11.10 |
|---|