html
-
(JSP/Servlet) 개념과 기초 정리서버 프로그래밍 2021. 8. 24. 17:50
JSP란 JavaServer Page의 약자로 HTML 코드 내부에 JAVA코드를 작성할 수 있는 서버 프로그램 언어이다. 이번에도 역시 개념과 특징을 정리해보자. 빈즈, 자바 컴포넌트 사용 가능 -> 후에 실습 내용에 서술 커스텀 태그 만들어서 사용 가능 JSTL(JSP Standard Tag Library)과 같은 태그 라이브러리 이용 가능 스프링, @MVC 등 다양한 프레임워크와 결합하여 개발 가능 ★ JSP의 동작 ★ test.jsp 코드를 실행! -> Server with Container가 읽고 변환 -> test_jsp.java(Servlet파일 생성) -> 컴파일 -> test_jsp.class -> 실행 -> HTML 파일 -> HTTP 프로토콜을 통해 브라우저가 서비스를 받는다. -->..
-
(HTML/CSS/JS) Google Map API를 사용해보자!HTML CSS JS 2021. 8. 20. 14:51
구글 API를 사용해서 내가 만든 페이지에 구글 지도와 기능들을 추가해보자! API를 사용하기 위해서는 먼저 Key를 받아와야 한다. https://webruden.tistory.com/378 구글맵 API Key 간단하게 발급받는 방법 (Get an API Key | Maps JavaScript API) 웹사이트에서 구글 지도를 사용하기 위해서는 구글 지도 API 키를 발급받아야 합니다. 구글맵을 사용하기 위한 Maps JavaScript API 설정과 API 키 발급 과정에 대해서 설명하도록 하겠습니다. 과정은 webruden.tistory.com (잘 정리되어 있으니 참고해서 Key를 발급받아보자!) Key를 발급 받았다면 API 문서를 참고해서 코드를 작성만 하면 지도를 불러올 수 있다! http..
-
(HTML/CSS/JS) 사진 갤러리 만들기HTML CSS JS 2021. 8. 17. 11:24
- 웹사이트를 돌아다니다 보면 버튼이 있고 누를 때 마다 사진이 변경되는 기능이 있다. 예를 들면 네이버 메인페이지의 우측에 쇼핑 탭이 그러한데 이런식으로 되어있다. - 버튼을 눌렀을 때, 다음 사진 or 이전 사진을 보여주는 기능을 만들어보자. - HTML로 틀을 만들어주는데, 사진을 미리 모두 넣어두고 CSS에서 hidden으로 숨겨놓았다가 버튼을 클릭하면 순서를 바꿔가며 사진을 보여주게 끔 만들었다. - 사진을 순서대로 보여주기 위한 Jquery의 insertBefore() , insertAfter() 함수, CSS의 overflow(고정된 틀 이상을 넘치는 사진들을 hidden으로 지정) 등등을 활용했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19..
-
(HTML/CSS/JS) Jquery를 이용한 반응형 메뉴판 만들기HTML CSS JS 2021. 8. 17. 10:59
- 상위 메뉴가 보이고 메뉴를 눌렀을 때, 하위 메뉴가 출력되게끔 하는 메뉴판을 만들어보자. - display:none 옵션으로 메뉴 구조를 숨겨놓고 클릭 시 display: block 옵션을 켜주게 끔 Jquery의 toggleClass 함수를 사용했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 Insert title h..
-
(HTML/CSS/JS) 간단한 이벤트 처리 해보기!HTML CSS JS 2021. 8. 11. 15:46
- 추후 프로젝트에 메뉴바를 만들기 위해 메뉴바 실습을 해보기로 했다. - 메뉴바에 마우스를 올리면 메뉴바 색상, 글씨 크기, 굵기가 변경하게끔 이벤트 처리를 했다. - 메뉴바 크기가 천천히 길어지게끔 추가! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 Insert title here div{ width: 100px; height: 75px; background-color: coral; text-align: center; line-height: 75px; margin: 5p..