반응형
내비게이션 바 로고
위 사진처럼 로고 링크와 .info를 세로로 가운데 정렬을 해주세요. 여러분을 돕기 위해 배경색도 입혀놓았고 소문자 'x'도 써놓았는데요. 완성이 되면 다 없애주시길 바랍니다!
<!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>
</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;
font-family: 'Noto Sans KR', sans-serif;
}
#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 {
font-family: serif;
float: left;
line-height: 60px;
}
#logo img {
vertical-align: middle;
}
.hero-header {
background-image: url("hero_image.jpeg");
background-size: cover;
background-position: center center;
height: 670px;
text-align: center;
line-height: 670px;
}
.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' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |