CobaltBlue

5. 탐회(순회)메소드_조상 1. jQuery 라이브러리 연결하기 2. 페이지 가독성을 위해 스타일 부여 1) Ancestors(조상) 메소드 : 기준이 되는 요소의 상위요소들을 선택할 수 있는 메소드 - 스타일을 부여할 요소 생성 조상 div(증조할머니) ul(할머니) li(엄마) span(기준점) div(할아버지) p(아빠) span(기준점) (1) $('선택자').parent() 선택된 요소를 기준으로 바로 위 상위 부모요소 하나만을 선택 $(function(){ //parent() $('span').parent().css({color:'purple', border:'2px solid skyblue'}); (2) $('선택자').parents() 선택된 요소를 기준으로 모든 상위요소를 선택 //pa..

1. 개요 1) jQuery란? - 기존의 자바스크립트 언어만으로 구현하기에 복잡했던 구문작성들을 간소화하기 위해 "존 레식"에 의해 개발된 JavaScript기반의 라이브러리 (유용한 기능들의 모음집) 즉, JavaScript언어로 유용한 함수나 내용들이 이미 만들어져 있는(정의되어있는) 모음집 - jQuery의 장점 1) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다. 2) AJAX(비동기식 통신), 이벤트 처리 등 폭 넓게 지원한다. 3) jQuery와 관련된 확장 플러그인, 오픈 API 등을 지원한다. => 적은 양의 코드로 빠르고, 풍부한 기능을 제공함 == 생산성 향상 2) jQuery 라이브러리 연결방법 head태그 내부에 script태그로 jQuery관련 .js파일 가져오기 오프..

3. HTML요소에 접근하기(해당 요소 객체 가져오기) 1) 아이디로 접근하기 아이디로 요소에 접근할 때, document라는 객체가 요소들의 정보를 가지고 있음(접근해야 함) var 변수명 = document.getElementById('접근할 요소의 아이디 속성 값'); == 요소객체 (document, 변수) 아이디로 접근 * 출력 전 console로 확인하는 습관 길들이기 ! 2) 태그명으로 가져오기 태그명으로 요소에 접근 * 하나가 아닐 수도 있기 때문에 Elements document.getElementsByTagName('접근하고자하는 태그명'); => 선택된 여러개의 요소객체들이 배열에 담겨서 반환 자바스크립트에서 배열은 [ ]로 표현 목록1 목록2 목록3 목록4 목록5 태그명으로 접근 4..

web(Front-end)의 3요소 - HTML : 웹 문서의 큰 틀(뼈대) - CSS : 스타일(색상, 테두리, 디자인 등등) - JavaScript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야 하는 동작들 처리(동적인 효과) * 이벤트 : 사용자가 하는 모든 행위 (자바라는 프로그래밍 언어와는 전혀 무관) 1. 개요 1) 스크립트 언어란? - 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해줌. 매우 빠르게 배우고 짧은 소스코드로 상호작용 하도록 고안됨. 2) 자바스크립트란? 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어 - 자바 : 컴파일 방식 => 컴파일 단계를 거치고 나서 실행되는 개념 => 오류 잡기 수월 - 자바스크립트 : 인터프리..

1. 화면구조잡기-기본 2. 화면구조잡기 실습 3. 화면구조잡기 상세구조 4. 세부 footer 만들기

6. 영역 관련 태그 (요소를 확연하게 보기 위해 내부 스타일 부여) 1) 블럭 요소 : 한 줄 단위로 영역을 차지하는 요소 줄바꿈이 적용되어 이미 존재하는 요소 다음줄에 출력됨 (textarea, p, pre, h1~h6, ... "div") 2) 인라인 요소 : content 내용만큼만 영역을 차지하는 요소 줄바꿈이 적용되지 않아 옆으로 연이어져 출력 다음 줄로 넘기고자 할 때 로 개행해야 함 (input, label, mark, s, img, ... "span") - 태그들은 모두 의미가 있지만 div와 span은 의미가 없음 3) div태그와 span태그의 차이 (1) div 태그 : 블럭요소로 영역을 지정할 수 있는 태그 (한 줄 차지) (2) span 태그 : 인라인 요소로 영역을 지정할 수 ..

0. 설치 - visual studio code 설치 -> 확장프로그램 korean, Live Server, Auto Rename Tag 설치 0. 워크스페이스 생성 미리 'frontend-workspace' > '1_html_workspace'폴더 생성 후 폴더열기 > 주소복사 'C:\frontend-workspace\1_html_workspace' 0. Test - 새파일 > 0_test.html (확장자가 html) 여는 html 태그 닫는 html 태그 합쳐서 '요소' - - html의 자식요소 이면서 h1의 부모요소 HTML 제목 Open with Live Server시, - 버튼 태그 : 버튼 표시 만들기 버튼 - 태그 : 구분선(긴 실선) 가로로 구분선, 수평선을 긋는 태그 1. 글자 관련 ..

1. Properties : Map계열 컬렉션, Key + Value세트로 담는게 특징 Properties는 주로 외부설정 파일을 읽어오거나 파일형태로 출력할 때 씀 Properties, xml 파일로 내보내기 => store();, storeToXML(); 1) Properties 객체 생성 Properties prop = new Properties(); 2) Properties에 Key + Value 값 입력 prop.setProperty("driver", "oracle.jdbc.driver.OracleDriver"); prop.setProperty("url", "jdbc:oracle:thin:@localhost:1521:xe"); prop.setProperty("username", "..

1. Template com.kh.common : JDBC 과정 중 반복적으로 쓰이는 구문들을 각각의 메소드로 정의해둘 곳 => "재사용할 목적"으로 공통 템플릿 작업 진행 이 클래스에서 모든 메소드들은 전부 다 static메소드를 만들 것(객체 생성 X) * 싱글톤패턴 : 메모리영역에 단 한 번만 올라간 것을 재사용한 개념 1) DB와 접속된 Connection객체를 생성해서 반환시켜주는 메소드 public static Connection getConnection() { //Connection객체를 담을 그릇 생성 Connection conn = null; try { //1,2) 연결시키기 Class.forName("oracle.jdbc.driver.OracleDriver..

* try-catch문 자동완성 시 나오는 주석문 삭제하는 법 window -> priference -> 사진 속 위치 -> catch block body -> edit -> 주석문 삭제하기 저번 시간 만들어보았던 Member객체의 MVC패턴을 이용한 프로그램에서 DAO를 수정해보자. 1. JDBC용 객체 - Connection : DB에 연결 정보를 담고 있는 객체 (ip주소, port번호, 계정명, 비밀번호) - (Prepared)Statement : 해당 DB에 SQL문을 전달하고 실행한 후 결과를 받아내는 객체 - ResultSet : 실행한 SQL문이 SELECT문일 경우 조회된 결과들이 담겨있는 객체 1) Statement(부모)와 PreparedStatement(자식)관계 2) Prepare..