inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

map.css 적용이 안됩니다.

해결된 질문

232

신영현

작성한 질문수 37

0

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

 

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

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

 

  1. 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;
}

 

rest-api git aws mysql javascript HTML/CSS github

답변 1

1

Jay

안녕하세요.

 

html head tag 내부에 link태그를 이용해 map.css 파일을 연결해주시면 될 것 같습니다. style.css를 연결한 것 처럼요!

 

감사합니다.

live server가 안 떠요..

0

99

1

카카오맵 API 가 안뜹니다...

0

759

2

카카오맵API 지도 관련

0

184

1

Putty에서 nginx를 vi로 수정할때 오류

0

304

3

mysql과 선생님의 깃허브 코드연결

0

198

1

nodemon 실행오류

0

244

2

Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?

0

281

2

css 적용 중 강의대로 적용되지 않아 질문 드립니다

0

362

2

강의를 잘 활용하는 법 추천 부탁드립니다.

0

293

1

MysqlWorkbench 접속문제

0

313

1

전체 핀이 조회되지 않습니다.

0

270

1

빅데이터 처리관련

1

291

1

섹션5의 2번째 강의 질문-setMap 비동기 처리 이유

0

245

1

PM2 EADDRINUSE 에러

0

416

2

인스턴스 중단 후 재시작

0

292

1

이미지 부분에 cctv 영상을 넣고 싶은데요.

0

596

2

노션 링크가 어디있나요 ?

1

318

1

axios 이후 마커 오류

0

295

0

service nginx restart 에러

0

722

1

섹션10 배포하기 unbuntu에서 root경로가 안뜹니다ㅠㅠ

0

519

3

선생님 추가적으로 새로운 페이지를 만드려고 하는데요...

0

252

1

코드 질문 드립니다!

0

237

1

혹시 강의자료 노션 내리셨나요?

0

244

1

노드몬 에러 참조하세요

0

364

1