HTML & CSS 9

HTML&JSP _ form 태그

태그의 메소드 속성은 폼 데이터가 서버로 제출 될 때 사용하는 HTTP 메소드를 명시한다. method 속성은 속성값으로 GET, POST 두가지가 있다. get post 폼 데이터를 HTTP GET 메소드로 전송함 폼 데이터를 HTTP POST 메소드로 전송함 URL에 폼 데이터를 추가하여 서버로 전달하는 방식 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식 get 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장됨 post 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않음으로 브라우저 히스토리에도 남지 않는다 get 방식은 보통 쿼리문자열에 포함되어 전송되므로 길이의 제한이 있다. post 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송된다. 보안상 취약점이 존재 데이터의 ..

HTML & CSS 2022.10.05

JS_드래그 앤 드롭 API

1. 드래그 할 수 있도록 만들기 드래그 앤 드롭이 가능하기 위해서는 HTML 요소를 드래그 할 수 있도록 해야한다. 2. 드래그 & 드롭 이벤트 dragstart 사용자가 객체를 드래그 하려고 시작 할 때 발생 dragenter 마우스가 드롭 요소의 경계선 안쪽으로 들어 갈 때 발생 dragover 드래그 하면서 마우스가 대상의 경계선 안쪽에 있을때 발생 drag 대상 객체를 드래그 하면서 마우스를 움직일때 발생 drop 드래그가 끝나서 드래그 하던 객체를 놓는 장소에 위치한 객체에서 발생 dragleave 드래그가 끝나서 마우스가 대생 객체의 위에서 벗어 날 때 발생 dragend 대상 객체를 드래그 하다가 마우스 버튼을 놓는 순간 발생 drag와 dragover은 마우스가 움직이지 않더라도 주기적으..

HTML & CSS 2022.09.29

JS_for in 루프 와 사용자 객체

for ... in : 각 속성에 대해 한번 실행된다. [형식] for(let 변수 in object){ } JavaScript Object Properties Looping object property values: 객체의 속성을 삭제하고 싶을때 (delete) const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }; //1 delete person.age; //2 delete person["age"]; 중첩된 객체 (객체 내부에 객체가 존재 할 수 있다. ) myObj = { name:"John", age:30, cars: { car1:"Ford", car2:"BMW", car3:"Fiat" } } //car2를..

HTML & CSS 2022.09.22

JS_배열

배열 : 하나이상의 값을 가질 수 있는 특수 변수이다. 사용할 수 있는 메소드들 toString() 배열을 쉼표로 구분된 배열값의 문자열로 변환 join() 모든 배열 요소를 문자열로 결합한다. ()안에 구분기호를 지정할 수 있다. pop() 배열에서 마지막 요소를 제거한다. 남은 요소들을 리턴한다. push() 배열의 마지막에 새 요소를 추가한다. / 새 배열의 길이를 리턴한다. shift() 첫번째 배열 요소를 제거하고 다른 요소들을 더 낮은 인덱스로 이동(앞으로 당긴다.) unshift() 배열의 처음에 새 요소를 추가하고 이전 요소를 이동 해제 한다. / 새 배열 길이 리턴 length 배열의 길이 알려준다. A.concat(B) A에 B를 연결(병합) 하여 새 배열을 만든다 splice() 배열..

HTML & CSS 2022.09.22

document.getElementById().innerHtml

innerHTML HTML 요소의 내용을 변경하고 싶은 경우에 사용하는 Element 오브젝트 프로퍼티이다. 예를들어 div나 span의 요소에서 작성한 것을 동적으로 내용을 변경할 때 사용할 수 있다. document.getElementById("id 이름").innerHTML = "변경하고싶은 내용"; innerHTML을 쓰기위해서는 div나 span등 HTML 요소에 id를 지정해 주어야 한다. document.GetElementById() 함수 :지정된 유일한 ID를 가진 요소를 찾는 함수 getElementById() :해당되는 id요소에 접근하는 함수이다. 접근하거나 조작하고자하는 원하는 요소의 id를 입력하면 된다. 거의 모든 브라우저에서 지원한다. 예를들어 라고할때 getElementByI..

HTML & CSS 2022.09.21

[연습] CSS_ 책갈피 기능이 있는 인물 사전만들기

위 인 전 이순신 세종대왕 장영실 이순신 이순신(李舜臣, 1545년 4월 28일 (음력 3월 8일) ~ 1598년 12월 16일 (음력 11월 19일))은 조선 중기의 무신이었다. 본관은 덕수(德水), 자는 여해(汝諧), 시호는 충무(忠武)였으며, 한성 출신이었다. 문반 가문 출신으로 1576년(선조 9년) 무과(武科)에 급제[2]하여 그 관직이 동구비보 권관, 훈련원 봉사, 발포진 수군만호, 조산보 만호, 전라좌도수사를 거쳐 정헌대부 삼도수군통제사에 이르렀다. 함경도 동구비보권관(董仇非堡權管), 1581년 발포 수군만호(鉢浦水軍萬戶)가 되었다가 전라좌수영의 오동나무를 베기를 거절하여 좌수사 성박의 미움을 받기도 했다. 이후 1584년 남병사의 군관과 건원보권관, 훈련원참군, 1586년 사복시주부를 거쳐..

HTML & CSS 2022.09.17

CSS_ 가상 선택자 (nth-child , nth-of-type)

1 2 3 4 6 7 다음과 같은 방법으로 세팅하고 확인함. nth-child nth-child(even) / nth-child(2n) : 짝수번을 선택 nth-child(odd) / nth-child(2n+1): 홀수번 선택 nth-child(2n+3) : 3번째 부터 2개마다 선택 (n=0 , 1, 2 .. 대입) nth-child(-2n+3) : 첫번째 요소부터 3번째 요소까지 2개마다 선택 nth-child(n+4) : 4번째 요소부터 모두 선택 nth-of-type nth-of-type(1) : 부모 요소 중 첫번째 요소 선택 nth-of-type(2n+1) : 부모 요소 중 첫번째 부터 2번째 마다 선택 p:nth-of-type(n+2):nth-of-type(-n+5) = 선택자를 두번 사용하..

HTML & CSS 2022.09.16