맨날 웹 사이트 만들 때 상단에 로고와 네비게이션, 이미지 부분이 거의 유사하게 제작됩니다.
늘 여기저기서 코드 가져다가 갇다 붙이기가 귀찮아서 메모
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<nav>
<img src="logo.png" width="150" height="50">
<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>
<li><a href="#">5</a> </li>
</ul>
</nav>
</div>
</body>
</html>CSS
*{
margin: 0px;
padding: 0px;
font-family: Verdana;
}
#main {
width: 100%;
height: 100vh;
background-image: url("dog2.jpg");
background-size: cover;
}
nav {
width: 100%;
height: 80px;
background-color: #0005;
line-height: 80px;
}
nav img {
margin-top: 15px;
margin-left: 30px;
}
nav ul {
float: right;
margin-right: 30px;
}
nav ul li {
list-style-type: none;
display: inline-block;
background-color: #000;
}
nav ul li :hover {
background-color: red;
}
nav ul li a {
text-decoration: none;
color: #fff;
padding: 30px;
}
참고
'개발 > 잡다개발' 카테고리의 다른 글
| css mobile view 적용 (0) | 2020.10.03 |
|---|---|
| Spring vs Spring boot (0) | 2020.09.16 |
| python flask ec2 log (0) | 2020.09.14 |
| Node JS 완전삭제 (1) | 2020.09.13 |
| python process kill (0) | 2020.09.10 |