Adventure Time - Finn 3
본문 바로가기

프론트32

BootstrapDialog로 사용자 확인(체크박스) 다이얼로그 만들기 이 글에서는 BootstrapDialog를 활용해 사용자에게 확인 메시지를 표시하고, 특정 조건(체크박스 선택)이 충족될 때만 동작을 수행하는 다이얼로그를 구현하는 방법을 소개합니다.목표BootstrapDialog를 사용하여 사용자 확인 다이얼로그 생성사용자에게 중요한 작업(예: 데이터 저장, 취소)을 확인받기 위한 UI를 제공.체크박스 선택 여부로 동작 제한사용자가 확인 체크박스를 선택하지 않으면 진행되지 않도록 구현.사용성 향상 및 코드 구조화이해하기 쉬운 로직과 이벤트 처리를 통해 유지보수성을 높임.구현하기예제 1: BootstrapDialog.show() 사용이 예제에서는 BootstrapDialog.show() 메서드를 이용하여 대화상자를 생성합니다. 이 방법은 즉시 대화상자를 띄우고자 할 때 .. 2025. 1. 17.
[Svelte] 애니메이션 검색 창 만들기 검색 애니메이션  전체 요청자 담당자 작업명   fa fa-search 는 Font Awesome 아이콘 라이브러리의 클래스를 사용사용하려면 Font Awesome의 CSS 파일을 포함하거나 설치해야 함. HTML 파일의   사용 2024. 12. 14.
복사 방지 해제 법 방법 11. 원하는 페이지에서 F1을 누른다. 2. 설정창 클릭 3. Disable JavaScript를 체크한다.그리고 복붙을 한다!주의점) 설정창을 끄면 해당 설정도 풀린다 방법 1이 안될땐 스타일로 막혀 있을 수 있다.방법 2 Ctrl + Shift + c 을 누른다.복사를 원하는 부분을 클릭한다DevTools의 Styles에서user-select 가 들어가 있는 부분을 전부 체크를 해제한다그리고 복붙 한다! 2024. 12. 13.
[Svelte] input type="text" change event Svelte에서 on:input 이벤트 처리하기Svelte에서 폼을 다룰 때, 사용자의 입력에 실시간으로 반응해야 하는 경우가 많습니다. 이번 블로그 글에서는 on:input 이벤트를 처리하여 입력 필드의 값이 변경될 때마다 변수를 업데이트하는 방법을 알아보겠습니다.입력 필드 설정먼저, Svelte에서 기본적인 입력 필드를 설정해보겠습니다. 입력 값을 변수에 바인딩하고, on:input 이벤트를 사용하여 입력이 변경될 때마다 함수를 호출합니다.svelte이 예제에서는 id가 "search"인 입력 필드를 만들었습니다. Svelte의 bind:value 지시어를 사용하여 입력 필드의 값을 searchText 변수에 바인딩합니다. 이를 통해 searchText가 항상 입력 필드의 값과 동기화됩니다.on:in.. 2024. 12. 12.
텍스트 무지개 애니메이션 텍스트에 무지개 애니메이션 효과 적용하기웹 디자인에서 애니메이션 효과는 사용자 경험을 향상시키는 중요한 요소입니다. 이번 블로그에서는 텍스트에 무지개 애니메이션 효과를 적용하는 방법을 알아보겠습니다. CSS만으로 간단하게 구현할 수 있으며, 부드러운 색상 전환과 움직임을 통해 눈길을 끄는 디자인을 만들 수 있습니다.최종 코드아래는 무지개 애니메이션을 텍스트에 적용하는 CSS 코드입니다:  .gradient-text { font-size: 1em; /* 텍스트 크기 설정 */ font-weight: 500; /* 텍스트 두께 설정 */ cursor: pointer; /* 마우스 커서 포인터로 변경 */ background: linear-gradient(45deg, #fc8080, #ffa500, .. 2024. 11. 27.
쉘 스크립트 - 변수 1. 변수 선언쉘 스크립트는 변수를 선언 할때는 = 기호를 사용하고, 공백이 없어야 한다.name="Ubuntu" 2. 변수 사용변수를 사용할 때는 변수 앞에 $ 기호를 붙여서 사용한다.echo "System: $name" 실행 결과System: Ubuntu 3. 읽기 전용 변수readonly 를 사용하여 변수를 읽기 전용으로 설정할 수 있다.수정을 시도하면 오류를 발생한다# 텍스트 색상 설정readonly RED='\033[0;31m'readonly NC='\033[0m' 4. 변수 값 할당 시 명령어 결과 사용명령어의 결과를 변수에 저장하고 싶을땐 백틱(`), $() 으로 감싸서 사용한다.# 현재 경로를 변수에 저장current_dir=$(pwd)# 현재 날짜 가져오기CURRENT_DATE=$(dat.. 2024. 11. 14.
js every 개발중 list에서 원하는 타입이 없으면 알림을 알리는 방법을 고민하고 있었다 let task_type_ck = true; readTaskData.data.tasks.forEach(item => { if(!modalPathList[item.task_type]){ task_type_ck= false; return; } }); if(!task_type_ck){ alert("modalPathList에서 찾을 수 없는 task_type이 있습니다"); return; }그래서 위와 같이 배열을 순외 하면서 값을 검증 한뒤 알림을 띄우는 방식으로 제작 했었다.하지만 마음에 들지 않아 검.. 2024. 11. 13.
새로고침 단축키 차단 $(document).keydown(function(event) { var key = event.keyCode || event.which; var targetTagName = event.target.tagName.toLowerCase(); // Backspace 키 누르면서 입력창이 아닌 경우에는 뒤로가기를 막습니다. if (key === 8 && targetTagName !== "input" && targetTagName !== "textarea") { event.preventDefault(); } // F5 키와 Ctrl+R 키를 누르면 새로고침을 막습니다. if (key === 116 || (event.ctrlKey && key === 82)) { event.preventDefault(); aler.. 2024. 2. 13.
<FORM> submit 시 input type=text 인 모든 공백 확인 submit 시 모든 input type=text 의 공백을 한번에 확인 하고 싶었다 submitBlankCheack.js $(document).ready(function() { console.log('성공'); $('#insertForm').submit(function(event) { // 입력 필드의 값이 공백인지 확인합니다. if (!blankSpace()) { event.preventDefault(); // 폼 제출을 막습니다. alert('입력 필드에 값을 입력하세요.'); // 사용자에게 알립니다. } }); }); blankSpace.js function blankSpace() { var flag = true; // 모든 input 요소의 value 확인하기 $('input[type="tex.. 2024. 2. 2.
댓글 공백만 입력 했을 때 확인 trim()으로 공백을 제거한뒤 제어문으로 검사를 하여 공백이라면 리턴 하여 댓글 입력을 막는다 2024. 1. 31.
js 파일에서 EL 태그 사용하기 console.log('[로그] 질문 pk'+`${qId}`); ` 기호를 사용하면 사용가능하다 2024. 1. 31.
게임 url로 접근시 qId가 없으면 qId 받아오기 게임.jsp를 url로 접근시 qId가 없으면 게임을 실행시킬수 없기 때문에 qId를 받기위해 컨트롤러로 gamePage.do 액션을 호출해 url로 접근해도 게임이 가능하게 하였다 먼저 페이지 로드시에 확인하기 위해 gameSet.js를 호출하고 gameSet.js $(document).ready(function() { if (document.getElementById('qId').value == '') { console.log('[질문 pk x]'); location.href = 'gamePage.do'; } $("#comment").hide(); $("#next").on("click", function() { //localStorage.setItem("list",${list}); location.h.. 2024. 1. 30.
js 파일로 모듈화 jsp 파일에 아래 처럼 스크립트가 작성되어있었다 하지만 해당 비동기의 찜이 다른 페이지에서도 사용해야하기 때문에 모듈화를 통하여 재사용을 할 수있게 만들어 보았다 game.jsp gameSet /** * */ $(document).ready(function() { if (document.getElementById('qId').value == '') { console.log('[질문 pk x]'); location.href = 'main.do'; } $("#comment").hide(); $("#next").on("click", function() { //localStorage.setItem("list",${list}); location.href = 'gamePage.do'; }); }); gameBut.. 2024. 1. 30.
input 태그 엔터이벤트( + 만났던 에러사항) input 태그에 댓글을 입력한 후, 버튼을 클릭했을때 댓글이 잘올라갔다 그래서 엔터를 했을때를 구현해보고자 했다 첫번째로 시도한 방법은 폼 태그를 이용해보았다 하지만 폼태그를 이용하면 엔터를 사용했을때 엔터가 먹혔지만 창이 새로고침 되었다 새로고침이 되는 것을 원치 않았기 때문에 다음 방법을 사용해보았다 스크립트 j쿼리를 이용하여 키보드 입력 이벤트가 발생하였을때 엔터를 인식해서 댓글이 입력되게 해보았다 해당 방법을 사용하니 잘 입력이 되는 것을 확인하였다 하지만 엔터를 사용했을때 연속으로 입력되는 문제가 발생하였다 입력이 두번 되는 문제가 발생하여 엔터 연속입력 방지 코드를 넣어보았다 위 처럼 진위형을 사용하여 ajax가 동작중이라면 입력이 안되게 막아보았다 그랬더니 마지막 한글이 남는것을 확인할 수.. 2024. 1. 24.
JSTL V .jsp 페이지 JAVA 코드가 단 한줄도 없는 코드 페이지 V : "내 페이지에는 JAVA 없앤다!" V를 V답게 해주는 기능 EL 커스텀 태그 JSTL >> JAVA 코드를 줄여주는 (제거해주는) 역할 .jar가 몇개 필요함 WEB-INF하위에 있는 lib에 jstl.jar, standard.jar을 추가한다 사용하려면 태그를 추가한다 jstl도 비슷하다 ex) ${msg} 출력할 댓글이 없습니다! ${data.rid}번 댓글 ${data.writer}님이 작성 출력할 회원이 없습니다! ${data.name}님 2024. 1. 21.
버튼 누르면 이미지 변경 / 2024. 1. 16.
JQuery - toggle 버튼을 누르면 이미지가 나오고 다시누르면 사라지는 토글을 만들어보려했다 버튼 위 처럼 로직으로 짜면 복잡하지만 제이쿼리를 사용하여 버튼을 클릭하면 이미지가 보였다가 다시 클릭하면 보이지 않게 하는 간단한 방법은 toggle()메소드를 사용하면 된다 버튼 2024. 1. 16.
JQuery - 클릭이벤트 click() 정적페이지에 로드된 요소에 클릭이벤트를 처리하고자 할때 click()메소드를 자주 사용합니다 주의 : 해당 클릭 이벤트는 동적 처리가 불가능하다 $("#btn").click(function(){ alert('확인 ! :D'); }); on() 주체가 되는 부모속성의 이벤트를 물려받아서 지정 선택자에게 이벤트를 연결할 수 있다 주의 : 잘못 사용하면 정적으로 사용되므로 부모속성을 이용하여 처리한다는 부분을 참고해야한다 $("#btn").on("click",function(){ alert('확인 ! :D'); }); 참고 블로그 https://myhappyman.tistory.com/123 jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이) 클릭 이.. 2024. 1. 16.
ajax - 연습2 POST 연습 2) DB를 연결해서 ID 중복 검사를 구현 중복검사 model package model; public class MemberDTO { private String mid; public String getMid() { return mid; } public void setMid(String mid) { this.mid = mid; } } 만들었던거 재사용 package model; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import model.MemberDTO; impor.. 2024. 1. 15.
ajax -연습1 GET 연습 1) 화면에 이미지 링크를 ajax(비동기)로 띄우기 json [ {"item": "HTML", "imgfile": "1.jpg", "link": "#"}, {"item": "CSS", "imgfile": "2.jpg", "link": "#"}, {"item": "Javascript", "imgfile": "3.jpg", "link": "#"}, {"item": "jQuery", "imgfile": "4.jpg", "link": "#"} ] 2024. 1. 15.
ajax html,css -> 웹 디자이너 JS 를 배워서 퍼블리싱 --------------------------- JS 비동기 처리 -> 프론트엔드 : 데이터를 다룰 수 있는 기능 : 데이터는 DB에 존재 -> M 파트 => C에 접근 할 수 있는 기능 : C파트 -> 서버 요청이 가능한 기능 : 프레임워크 -> Node Vue "React" ... 비동기 처리 == 화면이동 xx => FC를 사용 xxxx FrontController를 사용하면 ? 화면 이동 필수 비동기 처리만을 위한 서블릿 클래스 파일을 별도로 생성 O 사용방법 jsp 파일에 jQuery cdn 에서 라이브러리를 import시킵니다 이제 비동기 처리를 위한 ajax를 사용하면 된다 ajax는 $.ajax({ type :?, 요청방식 url.. 2024. 1. 15.
form 태그에 감싸진 button태그 submit 막기 form 태그에 감싸진 button을 클릭시 submit 이벤트가 발생하였다 그래서 button을 클릭시 submit 이벤트가 발생하지 않도록 막아야했다 submit 막기 button 태그에 type속성에 button을 명시해주면 된다 중복검사 2024. 1. 15.
JQuery input value 받아오기 자바스크립트에서는 id 로 가져오기 ex) document.getElementById('id').value; 이름으로 가져오기 ex) joinForm.mpwCk.value; 등등으로 가져왔었다 그런데 JQuery를 사용하다보니 JQuery로 input데이터를 받아와야했다 JQuery로 받아오는 방법은 1. id 로 받아오기 $('#id').val(); 2. class로 받아오기 $('.test_class').val(); 3.name으로 받아오기 $('input[name=name]').val(); 2024. 1. 15.
JQuery 요소 확인 요소가 없으면 요소를 추가하고 텍스트 삽입 요소가 있으면 텍스트 변경을 하고싶었다 그러기 위해선 요소가 있는지 확인해야 했다 JQuery를 사용하여 해당 요소가 있는지 확인해볼수 있는 방법이 3가지 있습니다 1. id로 확인 if($("#id").length){ consloe.log("요소있음"); } 2.class 이름으로 확인 if($(".class").length){ consloe.log("요소있음"); } 3. name으로 확인 if($("input[name='name']").length){ consloe.log("요소있음"); } 2024. 1. 15.
jquery jquery 란? 2006년 출시한 자바스크립트 라이브러리이다 Ajax를 다룰 수 있습니다 CDN이란 라이브러리를 사용할 때 파일이나 외부 링크의 주소를 입력한다 이때 웹 주소를 사용하는 것을 cdn이라고 하며 cdn을 사용하게 되면 사이트 트래픽을 줄일수있다 사용방법 웹 주소를 이용하여 사용해보겠습니다 https://releases.jquery.com/ jQuery CDN jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQ.. 2024. 1. 15.
JSP - 연습 DB연결 로그인 장바구니 문제 - db연결해보기 test01.jsp 로그인 | 회원가입 로그아웃 결제하기 test02.jsp test03.jsp test04.jsp ID PW test05.jsp ID PW test06.jsp test07.jsp SELECT * FROM ALL_TABLES; CREATE TABLE MEMBER( MID VARCHAR(15) PRIMARY KEY, MPW VARCHAR(15) NOT NULL ); DROP TABLE MEMBER; CREATE TABLE PRODUCT( PID INT PRIMARY KEY, NAME VARCHAR(30) NOT NULL, PRICE INT NOT NULL ); INSERT INTO PRODUCT VALUES(101,'귤 탕후루',4000); INSER.. 2024. 1. 9.
jsp - 연습 DTO,DAO 사용해 보기 jsp - 2에서 문제 1에서 더 추가하기 로그인 정보를세션에 저장하고 장바구니도 세션에 저장하는 구매로직 - 개수 추가(DTO,DAO) 로그인 페이지 ID 상품 목록 님 안녕하세요 2024. 1. 8.
JSP - 2 .jsp 페이지 내부에서 모든 로직을 작성 유지보수에 불리한 방법 로직을 JAVA Bean 클래스로 생성 .jsp 페이지 내부에서 Bean 클래스의 객체를 인스턴스화(new)하여 사용 유지보수에 유리한 방법 실습때 사용한방법 제어문자 :띄어쓰기 할 수 있음 html에서는 띄어쓰기를 여러개 하고있는데 하나밖에 인식하지 못함 >ㅅ<bb 가장 처음 사용하던 방식 기능을 수행하는 로직을 Servlet클래스에 작성하고, action속성에 그 Servlet 경로를 작성하는 방식 +) 서블릿에 직접 로직이 작성x 로직이 모듈화된 클래스를 서블릿에서 호춣하여 사용 O ★ .jsp 파일이 컴파일 되면 Servlet .java가 된다!!! 서블릿은 클래스의 한 종류이며, not POJO 이다 필더,리스너,서블릿 스크립트릿.. 2024. 1. 5.
jsp HTML 페이지의 구조 CSS 스타일 ----------------------------- JS 동작 데이터 처리 가능 노드.js 뷰.js 앵귤러 리액트★ V : 담당 사용자의 입력값에 대한 유효성 검사 ID 중복 검사 -> 비동기 처리 : 백엔드와 함께 작업 -------------------------------------------------------- 서버 프로그래밍 언어 : php C언어 기반 jsp를 채택 ->인기가 없는이유 스프링이 상위호환 HTML 주석은 화면에 나오지만 JSP 주석을 사용하면 웹화면에 나오지 않는다 (백사이드 주석) 모든 JSP 첫줄에 들어감 자동 import가 안됨 그래서 상단 페이지 지시어에 import를 한다 표현식 : out.print 을 생략할수있는 태그 .js.. 2024. 1. 4.
js JavaScript JAVA JavaScript 악어 악어새 둘이 연관이 없음 태그 바디 남들과 유사한 코드를 작성하는것이 중요하다 태그 바디가 없으면 바로 닫지만 스크립트는 태그를 대부분 따로 닫는다 32~40 : 내장 객체 String의 메서드를 사용중.. Math : 랜덤 값을 생성할때에 활용됨 Date : 날짜와 관련된 작업을 수행할때 활용됨 클릭 베스트상품 신상품 후드티 반팔티 운동화 버튼을 누르면 요소를 생성합니다 회원가입 예시 action 필수 - 다음페이지 method 필수 - 방식 아이디 : 비밀번호 : [문제1] 사용자에게 나이를 입력받아주세요! 1살~120살 입력가능합니다! 범위 밖의 입력을 하면 재입력 ㄱㄱ 1~8살 까지는 0원 9~19살 까지는 1200원 20살~65살 까지는 20.. 2024. 1. 3.

티스토리툴바