페이지를 만들어본다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>GitHub</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="header">
<div class="container" >
<div class="container-left clearfix">
<div class="logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
</div>
<div class="menu clearfix">
<div class="menu-item">Personal</div>
<div class="menu-item">Open Source</div>
<div class="menu-item">Business</div>
<div class="menu-item">Explore</div>
</div>
</div>
</div>
</div>
</body>
</html>
main.css
body{
margin: 0;
padding: 0;
}
.header{
background-color: white;
border-bottom: 1px solid lightgray;
}
.container {
width: 980px;
margin:auto;
padding: 20px 0px;
padding-top: 20px;
padding-bottom: 20px;
}
.logo{
float: left;
margin-right: 5px;
}
.logo img{
display: block;
}
.menu{
float: left;
}
.menu-item{
float: left;
/* margin-right: 10px; */
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
'프론트 > html,css,' 카테고리의 다른 글
| 03 HTML & CSS / CSS 기본 (0) | 2021.07.03 |
|---|---|
| HTML 예제 (0) | 2021.06.27 |
| 02 HTML & CSS / HTML 기본 (0) | 2021.06.27 |