반응형
네비게이션 바 메뉴
네비게이션 바 로고 과제에 이어서 네비게이션 바에 메뉴를 넣어보세요. 세 메뉴는 각각 <li> 태그 안의 <a> 태그이고, <ul> 태그 안에 묶여 있습니다.
<힌트> float의 개념을 잘 활용해보세요!
<!DOCTYPE html>
<html>
<head>
<title>코드잇</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div id="navbar">
<a id="logo" href="#">
<img src="logo.png" height="25">
</a>
<ul id="menu">
<li><a href="#">수업</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">로그인</a></li>
</ul>
</div>
<div class="hero-header">
<div class="info">
<h1><b>코딩</b>, 스펙이 아니라 <b>필수</b>입니다.</h1>
<h2>코드잇은 코딩을 통해 생각하는 법을 가르칩니다.</h2>
<a href="#">더 알아보기</a>
</div>
</div>
</body>
</html>body {
margin: 0;
}
#navbar {
padding: 0 20px;
border-bottom: 1px solid #eee;
overflow: hidden;
background-color: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50);
height: 60px;
}
#logo {
float: left;
line-height: 60px;
}
#logo img {
vertical-align: middle;
}
#menu {
list-style: none;
float: right;
margin: 0;
padding: 0;
}
#menu li {
float: left;
}
#menu li a {
padding-left: 10px;
padding-right: 10px;
line-height: 60px;
display: block;
color: black;
text-decoration: none;
}
#menu li a:hover {
background-color: #eeeeee;
}
.hero-header {
background-image: url("hero_image.jpeg");
background-size: cover;
background-position: center center;
height: 670px;
text-align: center;
line-height: 670px;
font-family: 'Noto Sans KR', sans-serif;
}
.hero-header .info {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
.hero-header .info h1 {
font-size: 36px;
margin: 0;
margin-bottom: 13px;
color: white;
font-weight: 400;
}
.hero-header .info h2 {
font-size: 16px;
margin: 0;
margin-bottom: 60px;
color: white;
font-weight: 400;
}
.hero-header .info a {
font-size: 14px;
background-color: white;
color: #464273;
padding: 10px 40px;
text-decoration: none;
border-radius: 5px;
}본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 03. 반응형 웹 퍼블리싱 (0) | 2021.02.09 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |