<!DOCTYPE html>
<html>
<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>
body {
margin: 0;
padding: 0;
}
.header {
background: white;
border-bottom : 1px solid lightgray; /*밑줄선으로 1px 두께에 그냥줄로 빨간색으로 하겠다*/
}
.container {
width: 980px;
margin: auto;/*화면 중앙으로 이동해줘*/
}
.container-left {
padding-top : 20px; /*padding은 최상위 요소에서 고치는것보다는 당장 효과를 봐야하는 작은 요소에서 설정하는것이 좋다*/
padding-bottom : 20px;
}
.logo {
float: left;
margin-right : 5px;
}
.logo img{ /*html에서 img위치가 logo와 menu사이에 있기때문에 여기에서 작업을 한다. 이렇게 html구조와 똑같이 해야지 유지보수할때 작업이 쉬워진다.*/
/*logo라는 클래스 안에 img라는 요소를 찾는다*/
display : block; /*이미지 삽입했을때 공간이 붕뜨는것을 방지하기 위해서 이 방식이 사용된다.*/
}
.menu {
float: left;
}
.menu-item {
float: left; /*수평으로 만든다라는 뜻은 아니지만 수평으로 만들수 있게 도와주는 방식이다*/
padding : 8px 10px;
/*
padding-top : 8px;
padding-bottom : 8px;
padding-left : 10px;
padding-right : 10px
과 같은 뜻이다*/
}
.clearfix::after { /*가상요소 선택자*/
content: "";
display: block;
clear: both;
}