diff --git "a/WebTeam4/1\354\243\274\354\260\250 \354\210\230\354\240\225\353\263\270.pptx" "b/WebTeam4/1\354\243\274\354\260\250 \354\210\230\354\240\225\353\263\270.pptx"
new file mode 100644
index 0000000..c5fd756
Binary files /dev/null and "b/WebTeam4/1\354\243\274\354\260\250 \354\210\230\354\240\225\353\263\270.pptx" differ
diff --git "a/WebTeam4/2\354\243\274\354\260\250- html 1 (1).pptx" "b/WebTeam4/2\354\243\274\354\260\250- html 1 (1).pptx"
new file mode 100644
index 0000000..c180634
Binary files /dev/null and "b/WebTeam4/2\354\243\274\354\260\250- html 1 (1).pptx" differ
diff --git "a/WebTeam4/3\354\243\274\354\260\250- html, css (2\354\260\250\354\213\234).pptx" "b/WebTeam4/3\354\243\274\354\260\250- html, css (2\354\260\250\354\213\234).pptx"
new file mode 100644
index 0000000..f46e669
Binary files /dev/null and "b/WebTeam4/3\354\243\274\354\260\250- html, css (2\354\260\250\354\213\234).pptx" differ
diff --git "a/WebTeam4/4\354\243\274\354\260\250- Web4_JS(1).pptx" "b/WebTeam4/4\354\243\274\354\260\250- Web4_JS(1).pptx"
new file mode 100644
index 0000000..99d69c2
Binary files /dev/null and "b/WebTeam4/4\354\243\274\354\260\250- Web4_JS(1).pptx" differ
diff --git "a/WebTeam4/5\354\243\274\354\260\250- Web4_JS(2) \354\210\230\354\240\225\353\263\270.pptx" "b/WebTeam4/5\354\243\274\354\260\250- Web4_JS(2) \354\210\230\354\240\225\353\263\270.pptx"
new file mode 100644
index 0000000..57e329e
Binary files /dev/null and "b/WebTeam4/5\354\243\274\354\260\250- Web4_JS(2) \354\210\230\354\240\225\353\263\270.pptx" differ
diff --git a/WebTeam4/Sample.html b/WebTeam4/Sample.html
new file mode 100644
index 0000000..e581acf
--- /dev/null
+++ b/WebTeam4/Sample.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Web4 Sample</title>
+    <style>
+      .wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
+      .wrap * {padding: 0;margin: 0;}
+      .wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
+      .wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
+      .info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
+      .info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
+      .info .close:hover {cursor: pointer;}
+      .info .body {position: relative;overflow: hidden;}
+      .info .desc {position: relative;margin: 0 0 0 10px;height: 75px;}
+      .desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+      .info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
+      .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
+      .overlay {
+        position:absolute;
+        left: -50px;
+        top:0;
+        width:300px;
+        height: 100px;
+        background: #fff;
+        border:1px solid #ccc;
+        border-radius: 5px;
+        padding:5px;
+        font-size:12px;
+        text-align: center;
+        white-space: pre;
+        word-wrap: break-word;
+      }
+    </style>
+</head>
+<body>
+<div id="map" style="width:100%;height:1000px;"></div>
+<p>
+    <button onclick="hideMarkers()">마커 감추기</button>
+    <button onclick="showMarkers()">마커 보이기</button>
+</p>
+
+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급KEY"></script>
+<script>
+var mapContainer = document.getElementById('map'), // 지도를 표시할 div
+    mapOption = {
+        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
+        level: 3 // 지도의 확대 레벨
+    };
+
+var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
+
+var selectPostion;
+// 지도를 클릭했을때 클릭한 위치에 마커를 추가하도록 지도에 클릭이벤트를 등록합니다
+kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
+    // 클릭한 위치에 마커를 표시합니다
+    setCustomOverlay(mouseEvent.latLng);
+});
+
+// 지도에 표시된 마커 객체를 가지고 있을 배열입니다
+var count = 0;
+var markers = [];
+var overlays = [];
+
+// -----------------------------------------------------------------------------------------------------------------------------
+
+// 커스텀 오버레이 엘리먼트를 만들고, 컨텐츠를 추가합니다
+var content = document.createElement('div');
+content.className = 'overlay';
+content.innerHTML = '<input id="name"></input><br>' +
+                    '<input id="score"></input><br>' +
+                    '<button onclick="closeCustomOverlay()">닫기</button>' +
+                    '<button onclick="applyCustomOverlay()">완료</button>';
+
+// 커스텀 오버레이를 생성합니다
+var customoverlay = new kakao.maps.CustomOverlay({
+    map: map,
+    content: content,
+    position: new kakao.maps.LatLng(33.450701, 126.570667)
+});
+
+customoverlay.setMap(null);
+function closeCustomOverlay() {
+    customoverlay.setMap(null);
+}
+
+// 커스텀 오버레이를 드래그 하기 위해 필요한
+// 드래그 시작좌표, 커스텀 오버레이의 위치좌표를 넣을 변수를 선업합니다
+var startX, startY, startOverlayPoint;
+
+// 커스텀 오버레이에 mousedown이벤트를 등록합니다
+addEventHandle(content, 'mousedown', onMouseDown);
+
+// mouseup 이벤트가 일어났을때 mousemove 이벤트를 제거하기 위해
+// document에 mouseup 이벤트를 등록합니다
+addEventHandle(document, 'mouseup', onMouseUp);
+
+// 커스텀 오버레이에 mousedown 했을 때 호출되는 핸들러 입니다
+function onMouseDown(e) {
+    var proj = map.getProjection(), // 지도 객체로 부터 화면픽셀좌표, 지도좌표간 변환을 위한 MapProjection 객체를 얻어옵니다
+        overlayPos = customoverlay.getPosition(); // 커스텀 오버레이의 현재 위치를 가져옵니다
+
+    // 커스텀오버레이에서 마우스 관련 이벤트가 발생해도 지도가 움직이지 않도록 합니다
+    kakao.maps.event.preventMap();
+
+    // mousedown된 좌표를 설정합니다
+    startX = e.clientX;
+    startY = e.clientY;
+
+    // mousedown됐을 때의 커스텀 오버레이의 좌표를
+    // 지도 컨테이너내 픽셀 좌표로 변환합니다
+    startOverlayPoint = proj.containerPointFromCoords(overlayPos);
+
+    // document에 mousemove 이벤트를 등록합니다
+    addEventHandle(document, 'mousemove', onMouseMove);
+}
+
+// 커스텀 오버레이에 mousedown 한 상태에서
+// mousemove 하면 호출되는 핸들러 입니다
+function onMouseMove(e) {
+    var proj = map.getProjection(),// 지도 객체로 부터 화면픽셀좌표, 지도좌표간 변환을 위한 MapProjection 객체를 얻어옵니다
+        deltaX = startX - e.clientX, // mousedown한 픽셀좌표에서 mousemove한 좌표를 빼서 실제로 마우스가 이동된 픽셀좌표를 구합니다
+        deltaY = startY - e.clientY,
+        // mousedown됐을 때의 커스텀 오버레이의 좌표에 실제로 마우스가 이동된 픽셀좌표를 반영합니다
+        newPoint = new kakao.maps.Point(startOverlayPoint.x - deltaX, startOverlayPoint.y - deltaY),
+        // 계산된 픽셀 좌표를 지도 컨테이너에 해당하는 지도 좌표로 변경합니다
+        newPos = proj.coordsFromContainerPoint(newPoint);
+
+    // 커스텀 오버레이의 좌표를 설정합니다
+    customoverlay.setPosition(newPos);
+}
+
+// mouseup 했을 때 호출되는 핸들러 입니다
+function onMouseUp(e) {
+    // 등록된 mousemove 이벤트 핸들러를 제거합니다
+    removeEventHandle(document, 'mousemove', onMouseMove);
+}
+
+// target node에 이벤트 핸들러를 등록하는 함수힙니다
+function addEventHandle(target, type, callback) {
+    if (target.addEventListener) {
+        target.addEventListener(type, callback);
+    } else {
+        target.attachEvent('on' + type, callback);
+    }
+}
+
+// target node에 등록된 이벤트 핸들러를 제거하는 함수힙니다
+function removeEventHandle(target, type, callback) {
+    if (target.removeEventListener) {
+        target.removeEventListener(type, callback);
+    } else {
+        target.detachEvent('on' + type, callback);
+    }
+}
+
+function setCustomOverlay(position) {
+    customoverlay.setPosition(position);
+    customoverlay.setMap(map);
+    if (document.getElementById('name') != null){
+        document.getElementById('name').value = '';
+    };
+    if (document.getElementById('score') != null){
+        document.getElementById('score').value = '';
+    };
+    selectPostion = position;
+}
+
+function applyCustomOverlay() {
+    addMarker(selectPostion);
+    customoverlay.setMap(null);
+}
+
+// 마커를 생성하고 지도위에 표시하는 함수입니다
+function addMarker(position) {
+
+    // 마커를 생성합니다
+    var marker = new kakao.maps.Marker({
+        position: position
+    });
+
+    // 마커가 지도 위에 표시되도록 설정합니다
+    marker.setMap(map);
+
+    // 생성된 마커를 배열에 추가합니다
+    markers.push(marker);
+    var iwContent = document.createElement('div');
+    iwContent.innerHTML = '<div class="wrap">' +
+            '    <div class="info">' +
+            '        <div class="title">' +
+                        document.getElementById('name').value +
+            '            <div class="close" id='+ count +' onclick="closeOverlay('+count+')" title="닫기"></div>' +
+            '        </div>' +
+            '        <div class="body">' +
+            '            <div class="desc">' +
+            '                <div class="ellipsis">' + document.getElementById('score').value + '</div>' +
+            '            </div>' +
+            '        </div>' +
+            '    </div>' +
+            '</div>';
+    count += 1;
+  // 인포윈도우를 생성합니다
+    var overlay = new kakao.maps.CustomOverlay({
+        position : marker.getPosition(),
+        content : iwContent,
+        map : map
+    });
+    // 커스텀 오버레이에 mousedown이벤트를 등록합니다
+    addEventHandle(iwContent, 'mousedown', onMouseDown);
+
+    overlays.push(overlay);
+
+    overlay.setMap(map);
+    kakao.maps.event.addListener(marker, 'click', function() {
+        overlay.setMap(map);
+    });
+
+}
+function closeOverlay(idx) {
+    kakao.maps.event.preventMap();
+    overlays[idx].setMap(null);
+}
+
+// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
+function setMarkers(map) {
+    for (var i = 0; i < markers.length; i++) {
+        markers[i].setMap(map);
+    }
+}
+
+// "마커 보이기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에 표시하는 함수입니다
+function showMarkers() {
+    setMarkers(map)
+}
+
+// "마커 감추기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에서 삭제하는 함수입니다
+function hideMarkers() {
+    setMarkers(null);
+}
+</script>
+</body>
+</html>
