자바스크립트

url 파악 후 해당 url일 때 active 클래스 주기 0. 이슈 발생 active 클래스를 주는 방법은 매우 다양하지만 해당 url 일 때 해당 아이콘에 active 클래스를 추가하게끔 구현했다. 경로에 'consult' 가 포함되어있으면 '상담하기' 버튼에 active 주기. 1. HTML 홈 상담하기 전체 2. JavaScript // 현재 url(경로) 파악하기 var currentPath = window.location.pathname; // url에 특정 문자가 포함되어 있으면 if(currentPath.includes('consult')){ document.querySelector('.nav_btn_badge:nth-child(2)').classList.add('active'); }els..

자바스크립트 툴팁, 툴팁 박스 만들기 🩸이슈 발생 클릭 시 수정/ 삭제 버튼 나타나는 툴팁 박스 뜨게 하기 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen. 💡유의사항 바탕(배경)을 눌러도 툴팁 박스가 닫히도록 구현했다!

자바스크립트 TOP 버튼 만들기 🩸이슈 발생 어디서나 볼 수 있는 자동 스크롤 업 기능(TOP) 버튼 5초 만에 만들어보기 🩹이슈 해결 1. HTML ▲ TOP 2. CSS #top-btn { display: none; position: fixed; bottom: 40px; right: 40px; z-index: 999; background-color: white; border: 2px solid #dbdbdb; outline: none; cursor: pointer; padding: 10px; border-radius: 50%; width: 90px; height: 90px; font-size: 20px; font-weight: 500; color: #333333; } 3. JavaScript $(do..

AJAX 정복하기 🩸이슈 발생 정말 모든 파일에 다 들어가있는 AJAX.. AJAX 정복이 시급했다. 🩹이슈 해결 1. AJAX 개념 - 비동기 방식으로 클라이언트-서버 간에 데이터 교환하는 기능 * 비동기 방식: 페이지 새로고침, 화면 이동 없이 작업하는 것. ex) 댓글쓰기 - 자바스크립트 + 제이쿼리 기반 2. 기본형식 $.ajax({ type:"post",//요청 메소드 방식 url : "/AjaxTest/ex01.do",//요청url data:{ //보낼 데이터 }, dataType: "text", //서버가 요청url을 통해서 응답하는 내용의 타입 //데이터 전달받을때 어떤 타입으로 줄건지 success: function(result){ //서버의 응답 데이터가 클라이언트에게 도착하면 자동실행..