map.css 적용이 안됩니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

map.css를 작성했는데 이것을 주석처리하든 안하든 liveserver에는 똑같이 뜹니다.

혹시 index.html에 무엇을 연결해놔야 하나요? 인강을 다시 돌려보았는데 놓친 부분이 있는 것 같습니다...

index.html입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이파리 지도</title>
    <meta name="author" content="이파리" />
    <meta name="description" content="병행충 생태 지도 서비스" />
    <meta
      name="keywords"
      content="병해충, 이파리, 관찰, 식물, 지도"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav>
      <div class="inner">
        <div class="nav-container">
          <h1 class="nav-title">이파리 지도</h1>
          <button class="nav-contact">사이트 이동</button>
        </div>
      </div>
    </nav>

    <main>
      <section id="category">
        <div class="inner">
          <div class="category-container">
            <h2 class="category-title">이파리 카테고리를 선택해보세요</h2>
            <div class="category-list">
              <button class="category-item">빨강</button
              ><button class="category-item">주황</button
              ><button class="category-item">레몬</button
              ><button class="category-item">연갈색</button
              ><button class="category-item">검정</button
              ><button class="category-item">흰색</button
              ><button class="category-item">선</button
              ><button class="category-item">점</button>
            </div>
          </div>
        </div>
      </section>
      <!-- 카테고리 -->
      <div id="map" class="inner"></div>

      <!--카카오지도 -->
    </main>

    <div class="infowindow">
      <div class="infowindow-img-container">
        <!-- <img src="https://i0.wp.com/ipari.kr/wp-content/uploads/2022/10/red_lesion-scaled.jpg?zoom=2&resize=300%2C300&ssl=1" class="infowindow-img"> -->
      </div>
      <div class="infowindow-body">
        <h5 class="infowindow-title">할머니집</h5>
        <p class="infowindow-address">서울특별시 중구 명동3길 42</p>
        <a href="" class="infowindow-btn" target="_blank"></a>
      </div>
    </div>

    <script 
    type="text/javascript" 
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7e75aa2606436f7d03f3b0bbd72c8a5e&libraries=services"></script>
    <script src="script.js"></script>
  </body>
</html>/

2.map.css입니다.

인포윈도우 설정
.infowindow {
    width:25rem;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
}

.infowindow-img-container {
    width: 100%;
    overflow: hidden;
}

.infowindow-img {
    width: 100%;
}

.infowindow-title{
    font-size: 2rem;
}

.infowindow-address {
    font-size: 1.6rem;
}

.infowindow.btn {
    font-size: 1.6rem;
}

인프런 커뮤니티 질문&답변