카카오맵API 지도 관련
169
1 asked
.category-item에서 width를 24%로 해야 4등분이 되고 25%로 하면 3등분이 됩니다. 이건 제가 질문하려는 내용과 뭔가 관련이 있는 것 같아서 말씀드리는거고 css #map에서 height를 픽셀로 안하면 지도가 나오지도 않고 픽셀로 해도 지도가 일부분만 나옵니다. 지도자체를 인용하는거는 문제가 없어보이는데 왜 안나올까요?
@font-face {
font-family: 'ChosunCentennial';
src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: 'ChosunCentennial';
}
nav{
background-color: white;
}
.nav-container{
padding: 1rem 0;
display: flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
}
.nav-title{
font-size: 3rem;
}
.nav-contact{
font-size: 2.5rem;
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
}
.category-title{
font-size: 3.5rem;
}
.category-item{
width: 24%;
height: 5rem;
background: none;
border: none;
font-family: inherit;
font-size: 1.6rem;
}
.category-item:hover {
color: orange;
cursor: pointer;
}
.inner{
padding: 0 1.5rem;
}
@media all and (min-width: 1024px){
.inner{
max-width: 1024px;
margin: 0 auto;
}
}
/*카카오맵 css*/
body{
height: 100vh;
}
nav{
height: 59px;
}
main{
padding-top: 1.5rem;
height: calc(100%-59px);
display: flex;
flex-direction: column;
}
#map{
flex-wrap: 1;
width: 100%;
height: 100px;
}Answer 1
0
<!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">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>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=329cfb009aae0d888cd6168d99935caf"></script>
<script src="script.js"></script>
</body>
</html>live server가 안 떠요..
0
77
1
카카오맵 API 가 안뜹니다...
0
664
2
Putty에서 nginx를 vi로 수정할때 오류
0
277
3
mysql과 선생님의 깃허브 코드연결
0
182
1
nodemon 실행오류
0
226
2
Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?
0
254
2
css 적용 중 강의대로 적용되지 않아 질문 드립니다
0
346
2
강의를 잘 활용하는 법 추천 부탁드립니다.
0
282
1
MysqlWorkbench 접속문제
0
299
1
전체 핀이 조회되지 않습니다.
0
257
1
빅데이터 처리관련
1
279
1
섹션5의 2번째 강의 질문-setMap 비동기 처리 이유
0
233
1
PM2 EADDRINUSE 에러
0
404
2
인스턴스 중단 후 재시작
0
277
1
이미지 부분에 cctv 영상을 넣고 싶은데요.
0
580
2
노션 링크가 어디있나요 ?
1
307
1
axios 이후 마커 오류
0
289
0
service nginx restart 에러
0
709
1
섹션10 배포하기 unbuntu에서 root경로가 안뜹니다ㅠㅠ
0
497
3
선생님 추가적으로 새로운 페이지를 만드려고 하는데요...
0
245
1
코드 질문 드립니다!
0
224
1
혹시 강의자료 노션 내리셨나요?
0
234
1
노드몬 에러 참조하세요
0
356
1
깃허브에서 다운받지 않고 생성하는 방법 여쭤보고 싶습니다.
0
316
1