FRONT (31) 썸네일형 리스트형 [Thymeleaf] 타임리프 란? 1. 타임리프 란? 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용됨 페이지가 어느정도 정적이로 빠른 생산성이 필요한 경우 백엔드 개발자가 개발해야하는 일이 생긱는데 이때 좋은 선택지 2. 사용법 Gradle - build.gradle implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' 또는 Maven - pom.xml org.springframework.boot spring-boot-starter-thymeleaf 타임리프를 사용할 html 파일에 다음과 같이 태그 수정 3. 문법 대부분의 html 속성을 th:xxx 로 변경 ex: th:text="${변수명}" 표현 설명 예제 @{ ... } URL 링크 표현식.. [JavaScript 자바스크립트] - 현재 날짜, 시간 가져오기 1. Date 객체 생성 const date = new Date(); console.log('Date.toString(): ' + date.toString()); console.log('Date.toUTCString(): ' + date.toUTCString()); //Date.toString(): Sat Apr 02 2022 09:58:09 GMT+0900 (Korean Standard Time) //Date.toUTCString(): Sat, 02 Apr 2022 00:58:09 GMT 1) Locale String 기본적으로 toString()은 영어로 출력하므로, 어떤 국가/언어에서 사용하는 형식으로 출력하고 싶을 때는 toLocaleString(Locale)으로 문자열을 출력 const date.. [JavaScript 자바스크립트] let, const, var의 모든 것 let , const 공통점 - 블럭, 밖에서 안으로, 중첩 호출 가능 차이점 - let 은 변수에 재할당이 가능 - const 는 변수 재선언, 변수 재할당 모두 불가능 (상수) 1) 블럭 { const name = 'Kim'; console.log(name); //kim } console.log(name); //name is not defined //error 2) 밖에서 안으로 let age = 37; { age++; console.log(age); //38 } console.log(age); //38 3) 중첩 let age = 38; { { { console.log(age); //38 } } } var 1) var "함수" 스코프 var "함수" 에서는 안에서 밖으로 호출이 되지 않는다 var .. [JavaScript 자바스크립트] 일정 시간 뒤 함수 실행 setTimeout() setTimeout() 이란 ? 일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수 예제 1초 후 함수 실행 setTimeout(function() { console.log('1초 후 함수 실행'); }, 1000); setTimeout() 활용 접속 후 몇 초 후에 팝업 또는 배너창 띄우기 방문자의 스크롤이 브라우저 일정 위치에 올 경우 몇 초 뒤에 애니메이션 실행 검색창 또는 일부 섹션 몇 초 뒤에 사라질 경우 방문자 접속 후 20-30초가 지난 뒤 메일 구독을 신청하는 팝업창을 띄울 경우 두 개의 입력값을 받은 후 동시에 두 개의 입력값을 계산하고 싶은 경우 [JavaScript 자바스크립트] indexOf 란 ? string.indexOf(searchvalue, position) - 문자열(string)에서 특정 문자열(searchvalue )을 찾고, 검색된 문자열이 첫번째로 나타나는 위치 index를 리턴(posiotion) - 파라미터 searchvalue : 필수 입력값, 찾을 문자열 posiotion : 기본값은 0, string에서 searchvalue를 찾기 시작할 위치 - 찾는 문자열이 없으면 -1을 리턴 - 문자열을 찾을 때 대소문자 구분 기본 예제 1) 문자열 'abab'에서 'ab'가 처음으로 나타나는 위치의 인덱스 값을 리턴 2) 문자열 'abab'에서 'ba'가 처음으로 나타나는 위치의 인덱스 값을 리턴 3) 문자열 'abab'에는 'abc'라는 문자열이 없으므로 숫자 -1을 리턴 4) i.. [JavaScript 자바스크립트] querySelector / querySelectorAll / getElementById란 ? 1. querySelector 메소드 - 선택자를 받아서 선택자와 일치하는 문서 안의 첫번째 요소 반환 - 일치하는 요소만 반환할 수 있으므로, 일치하는 요소가 없으면 null 반환 - css 선택자 요구 document.querySelector ("a"); // a 태그 선택 document.querySelector ("#abc"); // id 요소 선택 document.querySelector (".abc"); // class 요소 선택 document.querySelector(".abc > nobr"); // abc 클래스의 nobr태그 선택 2. querySelectorAll 메소드 - 특정 css 선택자를 가진 모든 요소 선택 - 여러 요소 한번에 가져올 수 있음 document.querySel.. [JavaScript 자바스크립트] classList 사용 - 여러개의 클래스 중 특정 클래스 추출 여러개의 클래스 중 특정 부분만 찾아서 값을 제어하고 싶다면.. let isExist = tr[i].classList.contains("w2grid_hidedRow"); -> 이렇게 하면, 여러개의 클래스 중 w2grid_hidedRow에 대한 값만 추출 add(String) 지정한 클래스 값을 추가 만약 추가하려는 클래스가 이미 존재한다면 무시. remove(String) 지정한 클래스 값을 제거한다. 존재하지 않는 클래스라면? 에러 발생 X contains(String) 지정한 클래스 값이 존재하는지 확인. true, false 값을 반환. replace(old, new) old class를 new class로 대체 item(Number) 인덱스 값을 활용하.. [Api] 주소 API 1. jsp 2. js //주소 api window.onload = function(){ document.getElementById("id값입력").addEventListener("click", function(){ //주소입력칸을 클릭하면 //카카오 지도 발생 new daum.Postcode({ oncomplete: function(data) { //선택시 입력값 세팅 document.getElementById("id값입력").value = data.address; // 주소 넣기 document.querySelector("input[name=name값입력]").focus(); //상세입력 포커싱 } }).open(); }); } 이전 1 2 3 4 다음