2. Front-end/2-3. Java Script

JS - [ 모달 팝업 띄우기 (Swiper이용 이미지 슬라이드) ]

SWIPER 라이브러리를 이용해 이미지를 슬라이드 형식으로 띄우기 닫기 Modal 띄우기 그러면 Modal 띄우기 버튼을 눌렀을 때 이미지 슬라이드가 팝업으로 뜬다! 참조 더보기 https://7942yongdae.tistory.com/104 Javascript - 간단하게 CSS를 활용한 모달창 만들기 [Modal / Dialog] 화면을 개발할 때 자주 나오는 구성 요소 중 하나가 바로 모달(Modal) 창입니다. 팝업(Popup) 창과 약간 혼동해서 쓰는 경향이 있기는 한데 Modal과 Popup는 개념이 다릅니다. 팝업(Popup)은 현재 화면에 7942yongdae.tistory.com

JS - [ 모달 팝업 띄우기 ]

Modal close Modal 띄우기 참조 더보기 https://7942yongdae.tistory.com/104 Javascript - 간단하게 CSS를 활용한 모달창 만들기 [Modal / Dialog] 화면을 개발할 때 자주 나오는 구성 요소 중 하나가 바로 모달(Modal) 창입니다. 팝업(Popup) 창과 약간 혼동해서 쓰는 경향이 있기는 한데 Modal과 Popup는 개념이 다릅니다. 팝업(Popup)은 현재 화면에 7942yongdae.tistory.com

JS - [ 자식 Element에 Event 전파 막기 ]

부모 요소 안에 있는 자식 요소들의 클릭으로 인한 이벤트 전파를 막아야 할 때 -> 부모의 이벤트 영역 클릭시에만 이벤트가 동작하도록 부모 이벤트에 if (event.target !== event.currentTarget) return; 입력 혹은 막아야 하는 각각의 자식들에 e.stopPropagtion 입력 참조 더보기 https://ideveloper2.tistory.com/167 Javascript - 자식 element가 여럿 있을때 event 전파 막는 효과적인 방법 Javascript :자식 element가 여럿있을때 event 전파 막는 효과적인 방법 | Why? > 상황: 모바일 웹에서, Modal의 overlay 영역의 scroll을 방지하기 위해 overlay 영역을 touch 햇을때..

JS - [ js 파일 수정사항 브라우저에 바로 반영]

자바의 현재시간을 표시해주는 내부함수를 이용 ?v= 현재시각은 계속해서 바뀌기 때문에 이 숫자가 바뀌면 브라우저가 js 파일을 다시 호출해서 화면에 반영하기 때문에 바뀐 소스가 바로바로 화면에 나타나게됨 참조 더보기 https://zzznara2.tistory.com/689 [java/jsp] js 파일 안에서 아무리 소스를 수정해도 브라우저에 바로바로 반영이 안된다면? 저도 이것 때문에 많이 헤맸습니다. 아무리해도 js 파일에서 소스를 고쳐도 화면에서 반영이 되어 보이질 않더라구요. html, jsp 파일은 오히려 바뀐 소스가 잘 반영되더라구요. html, jsp 파일 안에 zzznara2.tistory.com

JS - [ input date로 받아온 날짜 비교 ]

input date로 받아온 날짜는 String형의 yyyy-MM-dd와 같은 형식이다. 같은 형식의 날짜 값끼리는 부등호를 이용해 비교가 가능하다. ex) input date로 받아온 두 날짜 사이에서 >, < 를 이용해 비교 가능함 아래는 yyyy-MM-dd 로 받아온 날짜를 date형식으로 변환하는 함수이다. // date 날짜 계산 function calcDate(dateData) { const year = dateData.split('-')[0]; const month = dateData.split('-')[1] - 1; const date = dateData.split('-')[2]; return new Date(year, month, date); } 사용자에게 아래처럼 날짜를 2개 입력하도록..

JS - [input 태그 엔터키 눌렀을 때 이벤트]

text타입의 input 태그에 엔터키를 눌렀을 때 코드를 적용시키고 싶을때 onKeypress="javascript:if(event.keyCode==13) {showMember();}" => enter키의 아스키 코드값이 13이므로, 엔터키가 입력되었을 때 showMember() 함수를 실행시키겠다는 의미 검색 참조 더보기 https://hsol.tistory.com/550 HTML 텍스트 input 폼에 Enter(엔터)키 이벤트 주기 네이버나 구글, 다음 등 포털사이트 검색창에 텍스트를 입력하고 엔터를 치면 검색이 되는것 처럼 블로그에도 적용하고 싶다는 생각이 들어 만들었습니다. 일단 예제 다른건 겉치레니 건너뛰 hsol.tistory.com