반응형
썸머 뮤직 페스티벌 (SMF)
최고의 아티스트들로 구성된 초호화 라인업! '썸머 뮤직 페스티벌(SMF)'을 위한 웹사이트를 만들어보려고 합니다.
- 위 사진과 같이 images/hero_image.jpg 파일로 .hero-header의 배경 이미지를 설정해주고, .learn-more 버튼을 스타일링 해주세요.
- 배경 이미지는 원본의 비율을 유지하면서 <div> 태그를 모두 채워야 합니다.
- 만약 배경 이미지가 잘려야 하는 상황이 오면 왼쪽, 오른쪽이 똑같이 잘려야 하고 위, 아래가 똑같이 잘려야 합니다.
정답 코드는 css 폴더의 styles.css에 작성해주세요.
<!DOCTYPE html>
<html>
<head>
<title>Summer Music Festival</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 class="hero-header">
<div id="navbar">
<a href="#" id="logo">SMF</a>
</div>
<div class="helper"></div><div class="info">
<h1>10th Summer Music Festival</h1>
<h2>20 - 21 August, 2017</h2>
<a href="#" class="learn-more">Learn More</a>
</div>
</div>
</body>
</html>body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
}
.hero-header {
position: relative;
height: 684px;
background-image: url("hero_image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* 세로 가운데 정렬을 위해서 */
.hero-header .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#navbar {
padding: 10px 20px;
position: absolute;
top: 0;
}
#logo {
color: white;
font-size: 28px;
text-decoration: none;
font-weight: bold;
}
.info {
color: white;
text-align: center;
display: inline-block;
width: 100%;
vertical-align: middle;
}
.info h1 {
margin-top: 0;
margin-bottom: 10px;
font-size: 40px;
}
.info h2 {
margin-top: 0;
margin-bottom: 50px;
font-size: 20px;
font-weight: normal;
}
.learn-more {
border: 2px solid white;
padding: 8px 40px;
font-size: 18px;
color: white;
text-decoration: none;
}
본 내용은 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.05 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.05 |
| [웹 퍼블리싱] 01.HTML/CSS 시작하기 (0) | 2021.02.04 |