본문 바로가기
반응형

Front-End44

JSP(1) 한글 인코딩조합형(UTF-8) : 초성 + 중성 + 종성으로 조합. 더 많은 한글 표현이 가능완성형(EUC-KR) : MS949 JSP Directive(지시자) 지시자language = "" -> 생략 가능contentType = "" -> 필수요소pageEncoding = "" -> 생략 가능import="" -> 자바패키지 및 자바클래스 선언 JSP페이지에서 사용 가능한 문법HTML tagCSS JavaScript JSP 스크립트릿(Scriptlet)JSP 코드 작성 영역Tomcat WAS에 의해 JSP코드가 해석되고, 결과값을 HTML문서로 변환해서 Frontend 단으로 응답해준다 URL[http://localhost:9090/basic04_web/basic/02_JSP기본문법.jsp]http:.. 2023. 4. 4.
Bootstrap 실습 3w school bootstrap 테마 이용하여 페이지 만들기 HOME 게시판 공지사항 로그인 포토갤러리 메일보내기 Copyright © 2023 MyWeb 2023. 4. 3.
jQuery 실습 - 아날로그 시계 만들기 moment.js를 이용하여 아날로그 시계 만들기[결과] 2023. 3. 31.
AJAX(1) AJAX (Asynchronous JavaScript and XML) 페이지 전체를 로딩하지 않고 서버에 있는 데이터를 가져와서 페이지 일부분만 바꿀수 있다 문자단위로 통신(비동기 방식) 한개의 페이지에서 요청과 응답이 동시에 이루어짐 JavaScript : XMLHttpRequest 객체 이용 jQuery : $.ajax()함수 이용 $.ajax('actors.json', { //서버에 'actors.json' 파일의 데이터 요청하기 dataType: 'json', //응답 데이터타입 지정 → 지정하지 않으면 txt타입으로 자동지정됨 success: function(data, status, xhr){ alert('SUCCESS') alert(data) //요청에대한 서버의 응답 객체(배열 형태) ale.. 2023. 3. 31.
jQuery(2) $(’li’) 에 있는 요소들 중에서 요소에 접근 $(’’) 에 요소를 새로 생성 여러개의 선택자 선택하기 $(’#e_sdate, #e_edate, #e_date_dang, .class, #id, input, span’) each() 함수 → for in 반복문과 같음 let dan = 7; for(let i=1; i{ let idx = $(e.currentTarget).index() let color = $(e.currentTarget).css('background-color') let txt = $(e.currentTarget).text() } append() 함수 현재 대상의 엘리먼트의 자식 앨리먼트들의 맨끝에 새로운 엘리먼트를 추가함 적용되거나, 적용받는 엘리먼트가 닫는 태그가 없을시 자동으로 닫.. 2023. 3. 30.
jQuery(1) 자바스크립트 기반 오픈소스 (.js)jQuery, Bootstrap, moment, AJAX, AngularJS, react, vue 등 시각화 : chart.js, d3.js 등 jQuery - JavaScript Library 오픈소스 사용방법1. jQuery 라이브러리를 제공하는 해당사이트 직접 링크2. jQuery 라이브러리를 직접 다운 받아서 사용(추천) [사이트] https://jquery.com/download/ → Download the compressed, production jQuery 3.6.4 → 우클릭 → 다른이름으로 링크 저장 → jquery-3.6.4.min.js 다운 jQuery 시작selectorjQuery를 사용하여 선택하거나 조작할 HTML 요소를 지정하는 문자열cont.. 2023. 3. 29.
jQuery 예습 스타크래프트 레이스 클로킹 [결과][코드] 2023. 3. 28.
html과 css를 이용하여 웹 화면 구현해보기(3) [참조사이트] https://dinfree.com/lecture/frontend/122_css_exam.html Quiz-3) 부트스트랩 테이블 구조 만들기 부트스트랩의 container, table, button, pagnation등을 이용해 데이터 목록을 보여주는 화면을 만들어 봅니다. 전체 콘텐츠는 중앙정렬된 그림자가 있는 박스로 구성 테이블은 헤더를 어둡게 설정하고 짝홀수 로우의 배경색을 다르게 설정 마우스가 지나가는 로우의 배경색을 변경 페이지 목록 이동을 위한 페이지네이션 추가 ✅실행 결과 ✅코드 AddressBook::List New Entry #No Name CellPhone Birth Date Company Memo 9 Kang 011-7777-8888 2018-11-07 Facebook.. 2023. 2. 24.
JavaScript(9) - API 사용하기(2) 오픈소스 이용하여 카카오 맵 API 사용하기 마커에 인포윈도우 표시하기, 여러개 마커 표시하기 이용 여러개 마커 표시하기 기능은 마커에 인포윈도우가 뜨게 재설정 CSS로 인포윈도우 text 크기 조절, bold 처리 [결과] [코드] 2023. 2. 21.
반응형