HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Github</title>
<link rel = "stylesheet" href ="./practice.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>
CSS코드
body{
margin : 0;
padding : 0;
}
.header{
background: white;
border-bottom: 1px solid lightgray; /*1픽셀 두깨의 가늘한 실선을 밝은회색으로 하겠다*/
}
.container{
width : 980px;
margin : auto;
}
.container-left{ /*위아래는 20 좌우는0으로 정한다. 최상위 버전에서보다 하위버전에서 조절하는것이 좋다*/
padding-top : 20px;
padding-bottom : 20px;
}
.logo{
float : left;
margin-right: 10px;
}
.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;
}
'HTML & CSS > 기초' 카테고리의 다른 글
| header 메뉴바 부분 예제 (0) | 2020.12.23 |
|---|---|
| 예제 작성 (0) | 2020.06.07 |