index.html

<!DOCTYPE html>
<html>
<head>
  <title>Summer Music Festival</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/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>

css/styles.css

body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
}
a{
    color: white;
    text-decoration: none;
}

.hero-header {
  position: relative;
  height: 684px;
    
  /* 여기에 입력하세요. */
  background-image: url("../images/hero_image.jpg");
  background-position: 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;
}

일단 과제 해결에는 성공했습니다만 코드를 다시 살펴보던 중 의문이 생겨서요

<div class="hero-header">
    <div id="navbar">

이 부분 그냥 div태그 하나에 class랑 id 값이 한꺼번에 같이 줘도 되지 않나요? 굳이 이렇게 두개로 나눠서 코딩한 이유가 무엇인지 혹시 아시는 분 계신가요?