본문 바로가기

전체 글

 (121)
개발환경설정 개발환경설정 https://github.com/spring-projects/toolsuite-distribution/wiki/Spring-Tool-Suite-3 다운로드를 받으면 아래와 같이 이름을 변경한다. 압축 시 이름이 길어 오류가 날수 있기 때문이다. 그리고 c드라이브 밑에 압축을 푼다. 압축이 풀렸으면 아래와 같이 실행파일을 더블클릭하여 실행한다. 프로젝트를 생성한다. 아래와 같이 패키지명을 입력 후 Finish 버튼을 클릭하면 메이븐이 필요한 라이브러리들을 다운로드 받기 시작한다. 메이븐은 빌드도구로서 필요한 라이브러리들을 다운로드하며 빌드에 필요한 작업들을 수행한다. ※ 라이브러리들이 제대로 다운로드되지 않았다면 STS를 끄고 .m2 폴더에 있는 하위 폴더들을 삭제한 후 다시 STS를 실행하..
회원 가입 시 비밀번호 일치 여부 체크하기 회원 가입 시 비밀번호 일치 여부 체크하기 아래 그림과 같이 회원 가입 시 비밀번호 확인에 비밀번호를 입력하면 비밀번호가 일치하는지 체크하는 기능을 만든다. 비밀번호가 일치하면 회원가입이 진행된다. 다른 입력항목 체크 로직도 만든다. memberForm.jsp ... ... 비밀번호 비밀번호 확인 비밀번호가 일치하지 않습니다. ...
36. 웹 표준 사이트 만들기(2019) - 마무리 36. 웹 표준 사이트 만들기(2019) - 마무리 소스를 정리한다. HTML, CSS 소스검사를 한다. 웹 표준에서 문법 검사를 한다. slick.css 38라인 지우기 -> cursor: hand; ->.slick-slide.dragging img ->{ -> pointer-events: none; ->} lightgallery.css 주석 표시 -> pointer-events: none; 3개지우기 브라우저 간 호환성검사를 한다. JS파일을 정리한다. js파일에 custom.js 파일을 만든다. index.html에 아래와 같이 추가한다. custom.js파일 안에는 기존에 작성한 제이쿼리 스크립트를 복사하여 붙여넣는다. 태그는 없어도 된다. 로그인 시 아이디, 비밀번호 태그에 placeholder..
35. 웹 표준 사이트 만들기(2019) - 라이트 박스 35. 웹 표준 사이트 만들기(2019) - 라이트 박스 라이트 박스는 레이어 팝업이랑 이미지 슬라이드랑 합쳐진 것이라고 생각하면 된다. https://sachinchoolur.github.io/lightGallery/ 에 접속한다. css와 script를 연동시킨다. 소스 index.html ... ... Advertisement ... //라이트 박스 $(".lightgallery").lightGallery({ //thumnail 보내주기 thumnail: true, autoplay: true, //멈춰있는 시간 pause: 3000, //멈춰있는 시간 프로그래스바 progressBar: true });
34. 웹 표준 사이트 만들기(2019) - 윈도우 팝업 34. 웹 표준 사이트 만들기(2019) - 윈도우 팝업 소스 index.html ... Advertisement ... //윈도우 팝업 $(".window").click(function(e){ e.preventDefault(); //window.open("파일명", "팝업이름", "옵션설정"); //옵션 : left, top, width, height, status, toolbar, location, menubar, scrollbars, fullscreen window.open("sample_popup.html","popup01","width=800, height=590, left=50, top=50, scrollbars=0, toolbar=0, menubar=0"); }); sample_popup.h..
33. 웹 표준 사이트 만들기(2019) - 레이어 팝업 33. 웹 표준 사이트 만들기(2019) - 레이어 팝업 팝업은 2종류가 있다. 레이어 팝업, 윈도우 팝업이 있다. 요즘은 레이어 팝업을 많이 쓴다. 소스 index.html ... Advertisement ... Close ... //레이어 팝업 $(".layer").click(function(e){ e.preventDefault(); //$("#layer").css("display", "block"); //$("#layer").show(); $("#layer").fadeIn(200); //$("#layer").slideDown(); //여기서는 토글이 필요없다. }); //레이어 팝업 $("#layer .close").click(function(e){ e.preventDefault(); //$("#l..
32. 웹 표준 사이트 만들기(2019) - 갤러리 스크립트 32. 웹 표준 사이트 만들기(2019) - 갤러리 스크립트 https://kenwheeler.github.io/slick/에 접속한다. 아래와 같이 마크업 세팅을 다시한다. ※ 위에 배너와 같이 slick 플러그인을 쓰기 때문에 class명 겹치지 않도록 주의힌다. 소스 index.html 포트폴리오 시작 정지 이전이미지 다음이미지 ... //갤러리 $(".gallery_img").slick({ fade: true, //이미지 위에 마우스 커서가 있으면 멈추게 pauseOnHover: true, //양 옆에 화살표 안보이게 arrows: false, //무한으로 움직이게 infinite: true, autoplay: true, autoplaySpeed: 3000, speed: 300, slidesToS..
31. 웹 표준 사이트 만들기(2019) - 탭메뉴 스크립트 31. 웹 표준 사이트 만들기(2019) - 탭메뉴 스크립트 소스 index.html ... 탭 메뉴 공지사항1 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 공지사항2 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 공지사항3 세 번째 공지사항 탭 메뉴 테스트 목록입니다. 세 번째 공지사항 탭 메뉴 테스트 목록입니다. 세 번째 공지사항 탭 메뉴 테스트 목록입니다. ... //탭메뉴(웹..

티스토리툴바