실습과제. 썸머 뮤직 페스티벌 (SMF)

썸머 뮤직 페스티벌 (SMF)

최고의 아티스트들로 구성된 초호화 라인업! '썸머 뮤직 페스티벌(SMF)'을 위한 웹사이트를 만들어보려고 합니다.

1. 위 사진과 같이 images/hero_image.jpg 파일로 .hero-header의 배경 이미지를 설정해주고, .learn-more 버튼을 스타일링 해주세요.
2. 배경 이미지는 원본의 비율을 유지하면서 <div> 태그를 모두 채워야 합니다.
3. 만약 배경 이미지가 잘려야 하는 상황이 오면 왼쪽, 오른쪽이 똑같이 잘려야 하고 위, 아래가 똑같이 잘려야 합니다.

정답 코드는 css 폴더의 styles.css에 작성해주세요.

 

사이트 도면 다운로드

 

 

CSS

 

body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
}

.hero-header {
  position: relative;
  height: 684px;
    
  /* 여기에 입력하세요. */
  background-color: gray; /* 이건 지우세요! */
}

/* 세로 가운데 정렬을 위해서 */
.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 {
  /* 여기에 입력하세요. */
}

 

 

 

 

 

 

 

셀프체점

 

다음 항목들이 제대로 구현되었는지 확인해 보세요!

 

배경 이미지가 원본 비율을 유지하며 잘 출력된다.

 

브라우저 창의 크기를 늘리거나 줄여도, 배경 이미지가 왼쪽, 오른쪽이 동일하게 잘린다.

 

"Learn More" 버튼의 폰트, 여백, 크기, 테두리, 글자 모양이 도면대로 설정되어 있다.

 

 

 

 

 

 

 

 

 

이번과제에서 해야할 것은 크게 2가지

배경이미지를 입히는 것, LEARN MORE 버튼을 스타일링 하는 것

 

 

 

 

body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
}

.hero-header {
  position: relative;
  height: 684px;
    
  /* 여기에 입력하세요. */
  background-image: url;("../images/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 {
  color: white;
  font-size: 18px;
  text-decoration: none;
  border: 2px solid white;
  padding: 8px 40px;
}