CSS, 지도 검색 목록 만들기
- Web/CSS
- 2021. 11. 11.
반응형
CSS, 지도 검색 목록 만들기
결과
이전 글을 모두 응용하여, 검색 버튼 누를 시, 목록이 출력되도록 설정하였다.
CSS는 간단하게 적용하였다.
<!DOCTYPE html>
<html>
<head>
<title>Select Box 1</title>
<style>
@keyframes map_view {
0% { width : 0;}
100% { width : 250px;}
}
.map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
.map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
.map_wrap {position:relative;width:100%;height:500px;}
#menu_wrap{position:absolute; display:none; top:0;left:0;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;
border-radius: 10px; animation : map_view 1s 1;}
.bg_white {background:#fff;}
#menu_wrap hr {display: block; height: 1px;border: 0; border-top: 2px solid #5F5F5F;margin:3px 0;}
#menu_wrap .option{text-align: right;}
#menu_wrap .option p {margin:10px 0;}
#menu_wrap .option button {margin-left:5px;}
#placesList li {list-style: none;}
#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
#placesList .item span {display: block;margin-top:4px;}
#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
#placesList .item .info{padding:10px 0 10px 15px;}
#placesList .info .gray {color:#8a8a8a;}
#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
#placesList .info .tel {color:#009900;}
#placesList .item .markerbg {float:left;position:absolute;width:36px; height:37px;margin:10px 0 0 10px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;}
#pagination {margin:10px auto;text-align: center;}
#pagination a {display:inline-block;margin-right:10px;}
.select_opt {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:url('./down_arrow01.png') no-repeat 95% 50%;
background-size: 30px 30px;
width : 100px;
padding : .8em .5em;
font-family: inherit;
border : 1px solid #999;
border-radius: 5px;
}
.select_opt:focus, .select_opt:hover {
outline : 2px solid #ADC8FF;
}
.text_opt {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width : 40%;
padding : .8em .5em;
font-family: inherit;
border : 1px solid #999;
border-radius: 5px;
}
.text_opt:focus, .text_opt:hover {
outline : 2px solid #ADC8FF;
}
.search_submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin : 0 0 0 5px;
padding : 0.5rem 1rem;
font-family: "Noto Sans KR", sans-serif;
font-size : 1rem;
font-weight: 400;
text-align: center;
text-decoration: none;
display : inline-block;
width : auto;
border : none;
border-radius: 4px;
box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
cursor : pointer;
transition: 0.5s;
}
.search_submit:active, .search_submit:hover, .search_submit:focus {
background : #ADC8FF;
color : white;
outline : 0;
}
.search_submit:disabled {
opacity : 0.5;
}
</style>
</head>
<body>
<select class='select_opt' id='select_opt'>
<option value='1'>옵션 1</option>
<option value='2'>옵션 2</option>
<option value='3'>옵션 3</option>
</select>
<input type='text' class='text_opt' id='search_keyword'>
<button class='search_submit' onclick='API_search()'>검색</button>
<div class="map_wrap">
<div id="map" style="width:100%;height:100%;position:relative;overflow:hidden; background-color:#fffd70;"></div>
<div id="menu_wrap" class="bg_white">
<div class="option">
<div>
<button class='search_close' onclick='search_close()'>닫기</button>
</div>
</div>
<hr>
<ul id="placesList"></ul>
<div id="pagination"></div>
</div>
</div>
</body>
<script>
window.onload = function() {
startFun();
}
function startFun() {
var listEl = document.getElementById('placesList'),
menuEl = document.getElementById('menu_wrap'),
fragment = document.createDocumentFragment(),
listStr = '';
removeAllChildNods(listEl);
for(var i=0; i < 1; i++) {
var itemEl = getListItem(1, 'test');
fragment.appendChild(itemEl);
}
// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
listEl.appendChild(fragment);
menuEl.scrollTop = 0;
}
// 검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, places) {
console.log('test');
var el = document.createElement('li'),
itemStr = //'<span class="markerbg marker_' + (index+1) + '"></span>' +
'<div class="info">' +
' <h5>' + places + '</h5>';
if (places) {
itemStr += ' <span>' + places + '</span>' +
' <span class="jibun gray">' + places + '</span>';
} else {
itemStr += ' <span>' + places + '</span>';
}
itemStr += ' <span class="tel">' + places + '</span>' +
'</div>';
el.innerHTML = itemStr;
el.className = 'item';
console.log('?');
return el;
}
// 검색결과 목록의 자식 Element를 제거하는 함수입니다
function removeAllChildNods(el) {
while (el.hasChildNodes()) {
el.removeChild (el.lastChild);
}
}
//검색하기
function API_search() {
let search_keyword = document.getElementById('search_keyword');
let menu_wrap = document.getElementById('menu_wrap');
if(!search_keyword.value) {
alert('검색 값을 입력해주세요.');
return;
}
menu_wrap.style.display = 'block';
}
function search_close() {
menu_wrap.style.display = 'none';
}
</script>
</html>
소개 글
2021.11.10 - [Web/CSS] - CSS, 카카오 sample 지도, 목록
CSS, 카카오 sample 지도, 목록
CSS, 카카오 SAMPLE 지도 목록 내용 https://apis.map.kakao.com/web/sample/keywordList/ 본 내용은, 카카오 지도 API에서 제공하는 CSS 입니다. 문단제목 <!DOCTYPE html> 키워드로 장소검색하고 목록으로 표출..
mollangpiu.tistory.com
본문은 이전글, CSS 작업 내역에서 진행되었다.
작업은 소소하게, 지도 목록이 필요해서 간단하게 제작되었다.
마무리
필자가 디자인에 재능이 없다.
그러나 CSS를 알아야 하는 이유는 JS 또한 CSS를 컨트롤 하기 때문이다.
반응형
'Web > CSS' 카테고리의 다른 글
| CSS, 카카오 sample 지도, 목록 (0) | 2021.11.10 |
|---|---|
| [CSS ] display 감추기, 보이기 (0) | 2021.09.14 |
| [CSS] CSS의 기초 (0) | 2021.04.27 |