목록HTML공부 (19)
겉바속촉
우리가 계속 꾸미고있는 사이트에서요 이제 방명록을 추가로 꾸며보도록 할게요:) 여태까지 한 과정은 지난번 포스팅 참고해주세요~ 2020/06/22 - [취업일기/HTML] - [html] 간단한 쇼핑몰 만들기 [html] 간단한 쇼핑몰 만들기 이번에는 간단한 쇼핑몰을 만들어볼게요:) [JspMiniProject] 라고 만들었어요 web-inf > lib> ojdbc jar츄가 Webcontent - index(jsp파일) 만들기 Webcontent - layout - body, bottom, header, menu(jsp파일) 만.. 2-juhyun-2.tistory.com 2020/06/23 - [취업일기/HTML] - [html] 간단한 쇼핑몰 만들기 - 수정, 삭제편 [html] 간단한 쇼핑몰 만들..
항상 프로젝트 해주실때마다 다음과 같이 설정해주셔야합니다:) JspProject - 우클릭 - Configure - Convert ..... 다음과 같이 3가지 체크해주세요 Browser, CKEditor, Jquery 체크체크 table 하나 생성해주세요 refresh 해보시면 다음과 같이 sinsang table이 만들어졌죠? 자바 로 오셔서 다음 표시해준 것과 같이 package(안에 class2개), folder(안에 jsp file 3개) 생성해주세요:) 1. sinsangDTO 만들기 변수 선언해주시고 자동생성으로 setter getter들 작성해주세요:) source - generate getters and setters select all - generate 그러면 다음과 같이 쭈루르르르륵..
우선 DTO랑 DAO개념들 잡고 갈게요:) DTO(Data Transfer Object) :특정테이블의 정보를 단위별로 정의한 클래스 필수변수와 set,get 메소드만 으로 이루어짐 DAO(Data Access Object) :데이타 베이스에 접속, 명령전송전담클래스(메소드) 시작하기 전에 포인트는!!!! WEB-INF 에 ojdbc jar를 넣어주셔야합니다:) 1. sequence 생성 후 refresh 해보면 SEQ_INFO 만들어진 것이 보입니다 2. DB창에서 테이블 생성 3. src에서 info.model 패키지 생성 4. infoDAO랑 infoDTO 클래스 생성해주기 아까 시작하기 전에 살펴봤던 개념 다시 복기! DTO(Data Transfer Object) ---------> 메소드 만드는..
이번에는 table을 만들어보려고 하는데요:) 우선 개념을 짚고 가보도록 할게요!! tr -> 각각의 한 행을 의미 (table row) td -> 하나의 칸을 의미 (table data) th -> 제목에 많이 사용 (table header) / 굵게, 가운데 정렬 table 디자인은 css를 사용해주려고합니다. table {border: 2px solid gray;} tr, td, th {border: 1px dotted purple;} 라고 작성했습니다 그리고 이제 table안에 들어갈 내용들을 작성해주시면 되는데요 행1 -> 행2 -> 행3 요런 순서로 데이터들이 들어간다고 생각해시면 됩니다:) 위의 그림이 이해가 가셨다면 다음과 같이 작성해보도록 할게요:) 이름 나이 학과 주소 보라돌이 10 체..
이번에는 우리가 이미지 파일 4개를 가지고 와서 작업을 해보도록 할게요:) 우선 블럭 사이에다가 div를 만들어줄게요:) 그리고 컴파일 해보시면 눈에 보이는 것은 아무것도 없을 거에요:) 그래서 윗 부분에 css로 style 작성해주세요!! 그리고 다음과 같이 스크립트문까지 완성해주시면 끝입니다!! 컴파일 해보시면 다음과 같이 디저트 4가지 이미지가 나오는 데요:) 각각 이미지를 클릭해보시면 ----> onclick 행위 아래 div 위치에 클릭한 이미지가 뜹니다 ----> window.onload = function이 작동
이번에는 자바스크립트 활용해서 array test를 해보도록 하겠습니다:) 1. 배열테스트 2. 10개의 난수 출력해보기 body사이에다가 다음과 같이 작성해볼게요:) 10개의 난수출력 3. 초기값 주고 컬러별로 출력해보기 초기값 주고 컬러별로 출력 4. 초기값 안주고 기본 초기값 안주고 기본
이번시간은 olul연습해보려고합니다!^^! 우선 css코드 만들어서 바디에들어갈 내용에 대해서 폰트사이즈와 백그라운드컬러 설정해주었구요:) 바디 사이에는 블럭을 넣어줍니다. 이 블럭안에 들어갈 것이 바로 순서 있는 목록(Ordered List)들입니다!! 순서 있는 목록은 ol로, 목록의 내용은 li로 작성해주시면 끝! 다음 보이시는 것과 같이 순서 있는 목록은 1, 2, 3, ···차례대로 증가하는 번호가 붙게 됩니다. 이번에는 1이 아니라 50번부터 주고싶은데요:) 그럴때는 블럭에서 에다가 start값을 지정해주세요! 아니? 나는 거꾸로 주고싶은데? 50 49 48....요렇게!! 그렇다면 start값은 50을 주되 뒷부분에 reversed ="reversed" 요렇게 추가해주세요 이제는 순서 없는 ..
이번에는 onchange를 연습해보도록 합시다:) 우선 html파일 3개를 만들어주세요 그 다음 이미지를 넣고 select로 이동시켜볼게요 select1 select1페이지입니다 select2 select2페이지입니다 select3 select3페이지입니다 main 블럭 사이에 을 만들어주세요 그리고 를 주실 건데요 ---> onchange 를 적용시켜주시는 겁니다. 선택하세요 페이지1로 이동 페이지2로 이동 페이지3로 이동 컴파일해보시면 다음과 같은 창이 실행이 됩니다. 선택하세요 박스 클릭하시면 다음과 같이 목록이 뜹니다:) 코드에서 작성한 각각의 value값들인 거쥬 페이지1로 이동 누르면 페이지2로 이동 누르면 페이지3로 이동 누르면 각각 잘 작동했다면 성공!^^!
이번 목표는 1. 마우스 이벤트 객체 2. id값 지정한 곳에 출력해내기 먼저 마우스 이벤트에 대해서 만들어볼게요:) 사진 두장을 가지고 왔어요!! 마우스를 올렸을 때, 내렸을 때 사진에 변화가 오도록 코드를 작성해보려고 합니다:) 이따가 id값에 대해서 만들기 위해 버튼도 미리 작성해두었습니다 마우스를 올렸을 때 --> onmouseover 마우스를 내렸을 떄 --> onmouseout 그리고 컴파일 해보시면!! 마우스 안 올렸을 때 마우스 올렸을 때 이제 click me 에 대해서 효과주기 촛불 사진 위에 click me라는 button을 아까 만들어두었죠?? 그걸 클릭하면 안녕하세요가 뜨게 해볼게요 바로 id 지정한 곳에 뜨게 하는 방식입니다:) 버튼 누르면!! 다음과 같이 뜨는 게 보이시쥬?! 이..