<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="header">
<!-- 중앙정렬 -->
<div class="container">
<!-- left -->
<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>
.body {
padding:0;
margin:0;
}
.header {
/* 아래 3개는 다 기본값이다. */
/* font-size:16px;
width:auto;
height:auto; */
/* background-color: teal; */
border-bottom: 1px solid lightgray;
}
.container {
width: 980px;
margin: auto;
/* background: tomato; */
padding: 20px 0;
}
.logo {
float: left;
margin-right:5px;
}
.logo img {
/* block을 해줘야 아래 공백이 남지 않는다. */
display: block;
}
.menu {
float: left;
}
.menu-item {
float: left;
/* margin-right: 10px; */
padding: 8px;
}
/* float:left해준 요소들을 감싸줄 때 clearfix를 추가한다 */
.clearfix:after {
content: "";
display: block;
clear: both;
}
댓글