끄적끄적

DOM(Document Object Medel) 이란 웹 페이지에 대한 인터페이스로 웹 요소를 조작하기 위한 기능들의 모음이다. 브라우저에 따른 DOM의 차이 W3C에서 DOM의 정의한 규격에 따라 크롬(Chrome), 엣지(Edge), 파이어폭스(Firefox) 등과 같은 브라우저에 따라 DOM을 구성하는 방식이 다르다. W3C DOM: DOM에 대한 인터페이스를 정의한 IDL(Interface Definition Language)를 구성 Browser DOM: 마이크로소프트, 구글 등에서 개발한 브라우저는 W3C DOM의 IDL에 따라 인터페이스 코드를 작성하여 자신들만의 DOM를 구성 DOM이 Web Browser에서 동작하는 과정(*상세 과정 생략) 웹 브라우저에서 DIV 객체()를 생성하는 단계..

개요 JQuery로 사용자의 입력 값을 처리할 때 안전하지 않은 메소드 사용 시, XSS(Cross Site Scripting)가 발생할 수 있다. 관리자 도구로 안전한 메소드와 안전하지 않은 메소드를 비교하면 브라우저에서 HTML 요소(Element) 값(, , 등)을 렌터트리로 구성하는 과정에서 사용자의 입력을 태그 또는 텍스트로 구성되는지 여부를 확인할 수 있다. Safe Method .text(): 선택한 요소의 값을 가져오거나 변경 .attr(): 요소의 속성의 값을 가져오거나 수정 #사용자의 입력 값으로 요소와 속성 값을 수정할 경우 XSS 발생 가능 .prop(): JavaScript 입장에서의 속성 값을 가져오거나 추가 .val(): 양식(form)의 값을 가져오거나 설정 Unsafe Me..

개요 Javscript 라이브러리 중 하나로, HTML 태그 및 CSS 속성 접근에 대한 코드 단순화 가능 라이브러리 추가 더보기 https://jquery.com/ 웹 서버내 구성: 직접 Jquery lib를 다운로드(압축된 lib를 사용하고자 하는 경우 "min" 사용) CDN 방식: 인터넷에 연결되어 있거나 별도의 CDN 서버가 구성된 경우 사용 가능 선택자 JQuery에서 HTML를 다루기 위한 문법 $("[Tag]") = 태그 선택자: , 등 $(".[Class]") = Class 태그 선택자 $("[Tag1 Tag2]") = 태그 선택자: 내 라면 $("div ul") $("#[ID]") = 태그 선택자 이벤트 등록 방법 1: $대상.on("이벤트 이름", "이벤트리스너"); 방법 2: $대상..