DEV131 [Thymeleaf] 커스텀 데이터 속성(th:attr) Thymeleaf에서의 커스텀 데이터 사용 JQuery를 통해 커스텀데이터를 지정할 수 있듯이, 타임리프의 th:attr을 사용하여 데이터를 지정할 수 있습니다. [JQuery] 사용자 데이터, 커스텀 데이터(custom data - data-xx의 형태) 커스텀 데이터 HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 이를 커스텀 데이터 속성(custom data attributes)이라고 부르며, data- 뒤에 사용할 변수명을 입력한 뒤 hajoung56.tistory.com th:attr 사용 방법 th:attr = "data-지정하고싶은 데이터 명 = 해당 데이터 값" 위와 같은 형태로 사용할 수 있습니다. 자세한 사용 예시는 아래와 같습니다. 위 코드와 같이 타.. 2023. 1. 5. [JavaScript] replace is not a function 오류 JavaScript의 replace함수를 사용하던 와중 아래와 같은 경고문이 노출되며 작동되지 않았습니다. 오류메시지 노출 아래 코드와 같이 매개변수로 들어오는 값의 html 태그를 치환시키기 위한 함수를 사용 중이었습니다. escapeHtml = function( text ) { var map = { '&': '&', '': '>', '"': '"', "'": ''' }; return text.replace(/[&"']/g, function(m) { return map[m]; }); }; replace함수는 replace를 하려고 하는 데이터가 parseInt, 즉 숫자일 때에 오류가 발생합니다. 오류 해결 이러한 오류가 발생한다면 매개변수를 문자열로 교체한 뒤 replace 하게 되면 정상적.. 2023. 1. 4. [JQuery] 상위요소, 부모 요소 찾는 방법(parent, parents, closest) 제이쿼리를 통하여 부모 요소를 선택하는 방법은 대표적으로 세 가지 함수가 있습니다. parent() parents() closest() parent() parent 함수는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다. 아래 예시와 같이, parent 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그를 반환하게 됩니다. What is the parent elements? parents() 만약 하나가 아닌 모든 부모요소를 찾을경우에는 parents 함수를 사용합니다. 아래 예시와 같이, parents 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그와 div 태그 모두를 반환하게 됩니다. What is the parent elements? closest() clo.. 2022. 12. 29. [JavaScript] 버튼에 강제 클릭 발생 시키기 - click() 자바스크립트를 통하여 강제로 클릭 이벤트를 발생시킬 수 있습니다. click 함수 자바스크립트의 click 함수는 사용자가 클릭을 하지 않아도 강제적으로 클릭 이벤트를 발생시키는 함수입니다. 아래와 같은 형태로 사용할수있습니다. element.click() 자세한 사용 예시는 아래 코드를 통해 확인해볼 수 있습니다. 페이지 진입 시, document.getElementById('btn_aaa').click(); 코드가 실행됩니다. 1) id의 값이 btn_aaa 인 버튼에 click함수를 걸어주게 됩니다. 2) click함수로 인하여 id의 값이 btn_aaa 인 버튼이 눌려지게 됩니다. 3) 해당 버튼이 onclick 이벤트로 가지고 있는 afterBtnClick 함수가 실행되게 되어 "btn_aaa .. 2022. 12. 29. [JQuery] 사용자 데이터, 커스텀 데이터(custom data - data-xx의 형태) 커스텀 데이터 HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 이를 커스텀 데이터 속성(custom data attributes)이라고 부르며, data- 뒤에 사용할 변수명을 입력한 뒤 사용할수있습니다. 커스텀 데이터 생성 아래와 같은 형태로 커스텀 데이터를 만들수있습니다. data-사용하고싶은 명칭 아래 코드와 같이 커스텀 데이터를 생성할 수 있습니다. data-player-1, data-player-2, data-player-3이라는 커스텀 데이터를 생성하여 각각의 값을 입력하였습니다. Son Kane Kulusevski 커스텀 데이터 추출 아래와 같이 jQuery를 통하여 커스텀 데이터의 값을 추출할 수 있습니다. 선택자.data(커스텀 데이터 명); $('li'.. 2022. 12. 23. [JQuery] 속성 추가, 제거(attr, removeAttr) attr() - 속성을 가져오거나 추가 attr()은 선택된 요소의 속성의 값을 가져오거나 속성을 추가하는 데 사용되며, 아래와 같은 형태로 사용할 수 있습니다. 1. 속성 값 가져오기 $(선택자).attr( 선택요소 ); 아래의 실제 코드를 통하여, 자세한 사용 예시를 알아볼 수 있습니다. 기본정보 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값인 detail123을 가져와 alert형식으로 알려주게 됩니다. 2. 속성 값 변경하기 $(선택자).attr( 선택요소, 변경할 값 ); 아래의 코드는 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값을 detail123에서 detail456으로 변경합.. 2022. 12. 23. [MSSQL] Table과 Column의 Description 추가, 수정하기 테이블과 컬럼의 디스크립션 확인 아래의 쿼리를 통하여 테이블과 컬럼의 디스크립션이 있는지 확인을 한 뒤, 테이블과 컬럼의 디스크립션을 추가, 수정할 수 있습니다. SELECT TA.[OBJECT_ID] AS '테이블 ID' , TA.[NAME] AS '테이블 명' , TC.[VALUE] AS '테이블 설명' , TB.[COLUMN_ID] AS '컬럼 ID' , TB.[NAME] AS '컬럼 명' , TD.[VALUE] AS '컬럼 설명' FROM sys.objects TA INNER JOIN sys.columns TB ON TA.[object_id] = TB.[object_id] LEFT OUTER JOIN sys.extended_properties TC ON TA.[object_id] = TC.majo.. 2022. 12. 16. [JQuery] find를 이용하여 하위 요소 class 찾기 find 메소드 find 메소드는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 사용 예시 아래 코드와 같이, aaa라는 id값을 가지고 있는 요소에서 find메소드를 사용하여 class_123이라는 클래스의 value값을 구할 수 있습니다. 또한, find로 찾은 하위 요소에 다양한 속성을 추가할 수 있습니다. 주의할 점 find() 메소드는 하위 요소를 모두 찾기 때문에, 하위 요소의 개수가 많다면 찾는 속도가 오래 걸려 페이지 로딩이 느려질 수 있습니다. 2022. 12. 15. SQL에서의 WHERE 1=1 WHERE 1=1 이란? WHERE 1=1은 항상 참을 의미합니다. 즉, 의미 없는 조건입니다. 2=2, 3=3도 동일한 기능을 수행합니다. WHERE 1=1을 사용하는 이유 주석처리가 편하며, WHERE 문을 유동적으로 작성해야 할 때 편리합니다. 먼저 WHERE 1=1로 조건을 걸고 그 이후 AND 조건을 사용하여 다음 조건을 작성한다면, WHERE 문을 신경 쓰지 않고 AND 조건문을 편리하게 작성할 수 있습니다. 아래와 같이 조건이 2개인 질의문이 있습니다. AND절의 goal이 40이 맞는지 우선적으로 확인하고 싶다면, WHERE 조건 playerName = 'kane'을 주석 처리해야 합니다. SELECT playerName , playerNum , goal , assist FROM playe.. 2022. 12. 13. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음 반응형
