전체 글 232

[jquery] 문서객체조작 / 요소추가 / 삭제,복사 / attr / css 관련 메서드

※ 문서객체조작 - 조작관련메서드 : 요소에 값을 지정하거나, 특정 요소의 값을 읽어오거나, 동적으로 요소 자체를 생성, 삭제, 복사, 제거하는 기능 들 ▶ $( ) ▷ $(html태그) - 문서 객체를 생성한다 - 인자로 html 태그를 지정한 경우에는 동적으로 그 요소를 생성함 $("(클릭)").appendTo("b"); = > (클릭)라는 태그 문자열을 동적으로 생성한 뒤, 그를 모든 b 태그의 뒤에 덧붙임 ▷ $('선택자') - 문서 객체를 선택한다 - 인자로 선택자를 지정한 경우에는 일치되는 모든 요소를 찾음 $("#linkText") = > #linkText라는 선택자에 일치하는 요소들을 검 html() / text() - 요소의 내용을 다루는 메소드 ▶ html() - 사잇값 + 태그까지 가..

jquery 2022.04.27

[jquery] 선택자 / each()

※ jquery ▶ javascript = > jquery를 사용하는 이유 - javascript 1. 클릭하면 사라짐 = inline 으로 함수가 연결되어있는데, 이건 좋은 코드가 아니다. javascript 로도 완전히 분리된 코드를 짤 수 있지만, 코드가 너무 길어진다. - jquery $(document).ready(function(){ //페이지가 로드되면 내부의 것을 실행해라 $('div').click(function(){ // 이벤트핸들러 $(this).hide(); // 이벤트핸들러안에서의 this : 이벤트가 발생한 객체 }); }); = 위와 동일한 작업을 수행하지만 완전히 분리되어있고, 코드도 간결하다 ▶ jquery 사용하기위한 셋팅 : jquery 라이브러리를 넣고 경로 맞추기 s..

jquery 2022.04.26

[Javascript]

▶ Location 객체 - 브라우저의 주소 표시줄과 관련된 객체 - 현재 브라우저의 윈도우에 열려진 html 문서의 주소를 포함한 URL에 관련된 각종 정보를 제공하는 객체로서 주소 관련 정보는 물론 특정 사이 트에 접속하는 경우에도 사용됨 - 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보가 있음 · location.href() - 문서의 URL주소를 알려주거나 특정 사이트에 접속하는 등의 기능을 가지고 있는 속성 //Javascript function loadURL(){ // 선택된 index의 value의 URL 로 이동 location.href =document.frm1.site.options[document.frm1.site.selectedIndex].value; console.log("..

Javascript 2022.04.25

[Javascript] DOM / 객체 / 함수 / 메서드

※ 자바스크립트에서 html 객체 접근 - 웹 브라우저는 html 문서를 계층구조의 객체들로 관리하며, 자바스크립트는 이 객체들의 정보에 접근하여 객체를 제어할 수 있다. ▶ html 객체 구조 ▷ window 객체 - 자바스크립트의 브라우저 내장객체의 최상위 객체 - Window 객체 ( location, navigator, history, screen, document 객체들이 들어있음 ) ▷ Document 객체 - 현재의 문서에 대한 내용을 가지고 있다 - 제목, 배경색, 폼에 대한 속성을 가지고 있다 - html 페이지마다 하나씩 존재하는 객체 (웹 페이지를 나타낼 때) BOM - 브라우저객체모델 (Browser Object Model) - 웹 브라우저와 관련된 객체의 집합 - DOM 이외의 객..

Javascript 2022.04.25

[Javascript] 자바스크립트란 / 변수 / 배열 / 조건문 / 반복문 / this

HTML = 구조 CSS = 표현 Javascript = 동작처리 ※ 자바스크립트 : - 객체지향언어 – 실세계의 사물(객체)을 모델링해서 이를 프로그래 밍에 적용한 것 - HTML문서에 태그를 이용 - 자바스크립트 프로그램을 [3] html 태그의 EventHandler를 자바스크립트 코드로 표현하여 동작 [4] 자바스크립트 코드를 URL로 사용 //html 태그 내부임 naver 메시지띄우기 // **[4] bt배경색변경 = onclick 시 bgcolor 가 skyblue 로 변경 a태그 naver = mouseover 시 bgcolor 가 pink로 변경 mouseout 시 bhcolor 가 none ' ' 으로 변경 a태그 메시지띄우기 = onclick 시 안녕 alert 띄워짐 ※ 변수 - 변..

Javascript 2022.04.25

[개인프로젝트_항공예약프로그램] DB연결 메서드

당연히 다 적을 수는 없고 기억에 남고, 기억에 남겨야하는 DB연결 메서드 몇개만 적겠다 ※ DAO ▶ 로그인처리 △ 에 사용하기 위해서 선언한 변수 ▽ Static Userid 는 로그인 후 추후에 id 다시 사용할 일 있으면 여기서 꺼내쓰려고 선언해둠 ▶ 편도항공의 처리 - (우려했던) 편도항공은 DTO 에서 생성자를 따로 만들어서 예상보다 간단하게 해결했다 ! ▽ 이렇게두개 ▶ 반환타입 List - 사실 itinerary_number는 unique 값이다. 그래서 1행의 데이터가 출력된다. 근데 왜 반환타입에 Dto 가 아닌 List 를 사용했냐면, 데이터를 테이블에 올려야하기때문이었다. table model 에 끼워서 테이블에 출력되도록 해야하는데, Dto를 table model에 끼우는 방법을 ..

프로젝트 2022.04.24

[HTML] CSS 스타일속성 2

※ 위치속성 - 절대적 위치 좌표 : x, y좌표를 설정해 절대적 위치를 지정 - 상대적 위치 좌표 : 요소를 입력한 순서대로 상대적으로 위치를 지정 ▶ CSS에서 위치와 관련된 Positioning 방식 1. normal flow : (default) 사용자가 기본적으로 가지고 있는 positioning 2. absolute positioning : ★absolute/relative★ 3. float ▷ top, bottom, left, right - 위치지정 속성들은 절대, 상대 위치 지정과 함께 사용 ▶ ★position 관련 style 속성 ㄴ element 의 위치 지정방식, 흐름의 종류를 정함 ▷ static - default - 엘리먼트가 본래 가지고 있는 흐름을 가짐 - 태그가 위에서 아래..

HTML 2022.04.20

[HTML] CSS 스타일속성 1

※ CSS3 단위 ▶ CSS3 크기단위 ▷ % 백분율단위 - 초기 설정 크기 : 100% ▷ em 배수단위 - 1배 : 1em = 100% - 1.5배 : 1.5em = 150% ▷ px 픽셀 - p태그 기본 font-size : 16px ▶ CSS3 색상단위 ▷ HEX코드 : #000000 - 16진수로 RGB 색상 조합을 순서대로 입력함 ▷ RGB색상 : rgb(red, green, blue) ▷ HSL 색상 : 색상(Hue), 채도(Saturation), 명도(Lightness) ▶ CSS3 URL 단위 - url 함수 내부에 경로를 입력하면 됨 ▷ 현재 폴더의 Desert.jpg background-image: url('Desert.jpg'); ▷ 현재 폴더 내부의 Other 폴더의 Desert...

HTML 2022.04.20

[HTML] CSS, 선택자

※ 스타일시트 ▶ 사용방법 1. inline 방식 - 태그안에 style 바로 넣는 것 : 섞여있어서 별로 좋은코드가 아님 class 속성으로 select를 가지는 태그의 color 속성을 red 키워드로 적용 ▶ 속성 선택자 - 특정 속성을 가진 HTML 태그를 선택할 수 있다 ▷ 기본 속성 선택자 - 선택자[속성] : 특정한 속성이 있는 태그를 선택함 - 선택자[속성=값] - type 속성에 따라 서로 다른 스타일이 적용됨 input[type=text] { background: red; } = > input 태그 중에서 type 속성을 text로 갖는 태그의 background 속성에 red 키워드를 적용 input[type=password] { background: blue; } = > input ..

HTML 2022.04.19