day 17

 

* 'Query String' ; 도메인 뒤에 나오는 입력값이 나오는 방식을 미리 정해놓은 것

    - 도메인 주소 이후 입력값의 처음은 무조건 '?'

    - '&'로 연결

    - key = value

    ex) login.php?id=abcd1234 >> login.php페이지에서 id는 abcd1234라는 입력결과에 대한 페이지가 나온 것

 

 

• 카카오맵 이용하여 지도 삽입하기

   - 카카오맵 API > web > guide, sample 페이지 확인

 

   1. 지도를 담을 영역 만들기

   2. 실제 지도를 그리는 Javascript API를 불러오기

   3. 지도를 띄우는 코드 작성

   4. 라이브러리 사용하기 (*우리가 사용하는 라이브러리 >> services 라이브러리)

 

    * 이 다음 단계부터는 샘플메뉴로 GO!

   5. 주소로 장소 표시하기(위도경도 자동변경)

   6. 이미지 마커와 커스텀 오버레이(아래부분 복붙)

      1) 마커이미지 변경

var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다    
    imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
    imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
    markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
  position: markerPosition,
  image: markerImage // 마커이미지 설정 
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

  

      2) 커스텀 오버레이 2 ; 자유롭게 컨텐츠 지도위에 띄우기

 

 

* var >> const로 바꾸기!

 

 

 

* 그라데이션을 이용해 two color box만들기

ex) 0% 50%: red / 50% 100%: black

 

 

* 과제

- itronics location 적용해보기

- hitop market table 페이지 만들기