pogun 코딩 공부 저장소

1. Servlet 개념: Servlet은 Java 기반 웹 애플리케이션에서 동적인 처리를 담당하는 프로그램: 서버에서 실행되며, 클라이언트(브라우저) 요청을 처리하고 응답을 생성하는 역할을 한다. Servlet = Server + Applet : 즉, 서버에서 실행되는 작은 애플리케이션이라는 의미: 클라이언트의 요청을 받아 처리하고, HTML 등의 응답을 생성하여 반환: HttpServlet 클래스를 상속받아 구현: web.xml을 사용하여 URL 매핑 가능 (또는 @WebServlet 어노테이션 사용)2. GET & POST 방식 : 웹에서 데이터를 전송하는 방식 GET과 POST 차이구분GET 방식POST 방식방식 URL에 데이터를 포함하여 전송 요청 본문(Body)에 데이터를 포함하여 전송 보안..

원본 코드 Modal open modal × Modal 창입니다. 1. HTML 구조 분석 × Modal 창입니다. div#modal : 모달 창의 전체 컨테이너div.modal-content : 모달 내부 콘텐츠span.close : 닫기(X) 버튼p : 모달 내부에 표시될 텍스트 ("Modal 창입니다.")2. CSS 스타일 분석body { font-family: Arial, Helvetica, sans-serif;}: 글꼴을 Arial, Helvetica, sans-serif로 설정 (Sans-serif 계열 폰트) .mo..

1. 라디오 버튼 값 가져오기 및 설정하기 사과 배 바나나선택설명 :** 라디오 버튼 값 가져오기 (getter) **: $("input[name='fruit']:checked").val();         - name='fruit' 속성을 가진 중에서 :checked(체크된) 요소의 값을 가져온다. ** 라디오 버튼 값 설정하기 (setter) **: $("input[name='fruit']").val(['banana']);         - "banana" 값을 가진 라디오 버튼을 선택한다.2. 체크박스 값 가져오기 및 설정하기그림그리기음악감상check설명 :** 체크박스 체크 여부 확인 (getter) **: $("#chk1").is(":checked");         - #c..

1. jQuery 스타일 및 속성 변경 메서드 메서드설명 .css(property, value) CSS 스타일 변경 .attr(attribute, value) HTML 속성 변경 .prop(property, value) DOM 요소의 속성 변경 .addClass(className) 클래스 추가 .removeClass(className) 클래스 제거 .toggleClass(className) 클래스 추가 / 제거 토글2. 각 메서드별 사용법 2-1. .css(property, value) – CSS 스타일 변경$("#demo").css("color", "red"); // 글자색을 빨간색으로 변경$("#demo").css({ "color": "blue", "background-color": "ye..

1. 테이블 구조 번호품목비고 1돼지고기양돈협회 2소고기축산협회직판장 3닭고기개인농장 2. jQuery 코드 설명 $(document).ready(function(){ $("tbody tr").mouseover(function () { $(this).css("background", "#eeeeee"); }); $("tbody tr").mouseout(function(){ $(this).css("background", "#fffff..

1. jQuery에서 요소 선택하기1-1. 태그 선택자$("p").click(function(){ alert("p tag click");});: "p"를 선택하면 페이지에 있는 모든 요소에 클릭 이벤트가 추가됨  JavaScript 방식 let pTags = document.querySelectorAll("p");pTags.forEach(p => { p.addEventListener("click", function(){ alert("p tag click"); });});1-2. 후손(자손) 선택자$("div p").click(function(){ alert("div in p tag click");});: div 태그 안에 있는 모든 태그를 선택함 : "div > p"..

1. JavaScript vs jQuery 이벤트 처리1-1. JavaScript 클릭 이벤트 처리jQuery 방식$("#demo").click(function(){ alert("p tag click");});: $("#demo")를 사용해 id="demo"인 요소를 선택한 후 click() 이벤트를 추가함: 더 짧고 가독성이 좋음$("#btn").click(() => { alert("button click");});: 화살표 함수를 사용하면 코드가 더 간결해짐 JavaScript 방식document.getElementById("demo").onclick = function () { alert("p tag click");};: onclick 속성을 사용해 클릭 이벤트를 등록할 수 있음:..

1. JavaScript와 jQuery의 차이JavaScript : : 웹 브라우저에서 DOM 조작, 이벤트 처리, AJAX 요청 등을 수행하는 클라이언트 측 언어jQuery : : JavaScript를 더 쉽게 사용할 수 있도록 만든 라이브러리. 짧고 간결한 코드로 DOM 조작과 이벤트 처리를 쉽게 할 수 있음1-2. jQuery 문법 기본 형식: $(선택자).메서드(매개변수);$("p").text("안녕하세요!"); // 모든 `` 태그의 텍스트 변경: 선택자 부분에 class, id 또는 특정 속성 선택자 모두 사용 가능2. JavaScript vs jQuery 사용법 차이2-1. getter (값 가져오기)javaScript 방식let ptag = document.getElementsByTagNa..

1. 화살표 함수(Arrow Function) 1-1. 기본 함수 선언 방식function func() { console.log('func()');}func();: 전통적인 함수 선언 방식 1-2. 즉시 실행 함수 (IIFE) (function func() { console.log('(func())');})();: 함수 선언과 동시에 실행되는 패턴 : 특정 코드 블록을 즉시 실행하고 싶을 때 사용 1-3. 익명 함수 표현식 const func = function () { console.log('function ()'); };func();: const를 사용하여 함수를 변수에 할당하는 방식 1-4. 화살표 함수(Arrow Function)const func = () => { console.log('func..

1. 배열 생성let array = ['a', 'b', 'c'];: array라는 이름의 배열을 생성하고, 'a', 'b', 'c' 값을 초기값으로 설정 2. 배열 요소 추가하기 : 배열에 새로운 요소를 추가하는 방법에는 push(), unshift(), splice()가 있다. 2.1 push() - 배열 맨 뒤에 요소 추가array.push('d'); // 배열의 끝에 'd' 추가console.log(array); // ['a', 'b', 'c', 'd']: push()는 배열의 마지막 요소 뒤에 새로운 요소를 추가합니다. 2.2 unshift() - 배열 맨 앞에 요소 추가 array.unshift('A'); console.log(array); // ['A', 'a', 'b', 'c', 'd'..