Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
Joung Jiwon
b7116af3 1 parent 23f82b8f

css 수정

Inline Side-by-side
Showing 3 changed files with 308 additions and 153 deletions
This diff could not be displayed because it is too large.
......@@ -17,7 +17,8 @@ body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family:'NanumBarunGothic'
font-family:'NanumBarunGothic';
min-width: 1200px;
}
a {
transition: all 0.3s ease;
......@@ -230,6 +231,78 @@ a:focus {
background: white;
}
/* Dropdown list*/
select{
-webkit-appearance: none; /* 네이티브 외형 감추기 */
-moz-appearance: none;
appearance: none;
display:none;
}
select::-ms-expand {
display: none;
}
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.select-selected {
background-color: white;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #333; font-size:15px;
text-align: center;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color:white;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* Introduction */
.tm-section-title {
......@@ -298,7 +371,7 @@ a:focus {
select::-ms-expand {
display: none;
}
출처: https://doolyit.tistory.com/126 [동해둘리의 IT Study]
input{
border-radius:5px;
}
......@@ -308,7 +381,8 @@ input{
left:44%;
margin-top:40px;
border:none;
border-radius:5px;
border-radius:5px;
color : -internal-light-dark(black, white);
}
#map-answer{
......
......@@ -94,9 +94,10 @@
</div>
<div class="container question-field">
<div class="question-text">몇 학년인가요?</div>
<div class="question-input">
<select name="semester" id="semester">
<option value="sem-1-1">1학년 1학기</option>
<div class="custom-select" style="width:208px; margin-right:42px">
<select>
<option value="0">1학년 1학기</option>
<option value="sem-1-1">1학년 1학기</option>
<option value="sem-1-2">1학년 2학기</option>
<option value="sem-2-1">2학년 1학기</option>
<option value="sem-2-2">2학년 2학기</option>
......@@ -104,7 +105,7 @@
<option value="sem-3-2">3학년 2학기</option>
<option value="sem-4-1">4학년 1학기</option>
<option value="sem-4-2">4학년 2학기</option>
</select>
</select>
</div>
</div>
<div class="container button-field">
......@@ -115,148 +116,6 @@
<br>
<div id="map" style="width:700px;height:700px;"></div>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', updateBtn);
function updateBtn() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
naver.maps.Service.geocode({
address: start
}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var sx = result.items[0].point.x;
var sy = result.items[0].point.y;
naver.maps.Service.geocode({
address: end
}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var ex = result.items[0].point.x;
var ey = result.items[0].point.y;
/*var sx = 127.0739547;
var sy = 37.2407701;
var ex = 126.921666;
var ey = 37.1308333;
*/
var mapOptions = {
center: new naver.maps.LatLng(start,end),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
function searchPubTransPathAJAX() {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
//노선그래픽 데이터 호출
callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
}
}
}
//길찾기 API 호출
searchPubTransPathAJAX();
function callMapObjApiAJAX(mabObj){
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var resultJsonData = JSON.parse(xhr.responseText);
drawNaverMarker(sx,sy); // 출발지 마커 표시
drawNaverMarker(ex,ey); // 도착지 마커 표시
drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
// boundary 데이터가 있을경우, 해당 boundary로 지도이동
if(resultJsonData.result.boundary){
var boundary = new naver.maps.LatLngBounds(
new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
);
map.panToBounds(boundary);
}
}
}
}
// 지도위 마커 표시해주는 함수
function drawNaverMarker(x,y){
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(y, x),
map: map
});
}
// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
function drawNaverPolyLine(data){
var lineArray;
for(var i = 0 ; i < data.result.lane.length; i++){
for(var j=0 ; j <data.result.lane[i].section.length; j++){
lineArray = null;
lineArray = new Array();
for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
}
//지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
if(data.result.lane[i].type == 1){
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#003499'
});
}else if(data.result.lane[i].type == 2){
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#37b42d'
});
}else{
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3
});
}
}
}
}
});
});
}
</script>
<div class="answer-field">
한번 갈 때마다 ...<br>
<span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
......@@ -294,12 +153,234 @@ function updateBtn() {
</p>
</footer>
</section>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="slick/slick.min.js"></script>
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
<script> //dropdown list
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>
<script> //API
var btn = document.querySelector('button');
btn.addEventListener('click', updateBtn);
function updateBtn() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
naver.maps.Service.geocode({
address: start
}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var sx = result.items[0].point.x;
var sy = result.items[0].point.y;
naver.maps.Service.geocode({
address: end
}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var ex = result.items[0].point.x;
var ey = result.items[0].point.y;
/*var sx = 127.0739547;
var sy = 37.2407701;
var ex = 126.921666;
var ey = 37.1308333;
*/
var mapOptions = {
center: new naver.maps.LatLng(start,end),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
function searchPubTransPathAJAX() {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
//노선그래픽 데이터 호출
callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
}
}
}
//길찾기 API 호출
searchPubTransPathAJAX();
function callMapObjApiAJAX(mabObj){
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var resultJsonData = JSON.parse(xhr.responseText);
drawNaverMarker(sx,sy); // 출발지 마커 표시
drawNaverMarker(ex,ey); // 도착지 마커 표시
drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
// boundary 데이터가 있을경우, 해당 boundary로 지도이동
if(resultJsonData.result.boundary){
var boundary = new naver.maps.LatLngBounds(
new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
);
map.panToBounds(boundary);
}
}
}
}
// 지도위 마커 표시해주는 함수
function drawNaverMarker(x,y){
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(y, x),
map: map
});
}
// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
function drawNaverPolyLine(data){
var lineArray;
for(var i = 0 ; i < data.result.lane.length; i++){
for(var j=0 ; j <data.result.lane[i].section.length; j++){
lineArray = null;
lineArray = new Array();
for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
}
//지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
if(data.result.lane[i].type == 1){
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#003499'
});
}else if(data.result.lane[i].type == 2){
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#37b42d'
});
}else{
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3
});
}
}
}
}
});
});
}
</script>
<script> //값 계산
$('button-calculate').click(function () {
})
......@@ -499,11 +580,11 @@ function updateBtn() {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}]
});
});
</script>
</body>
</html>
......