Today I Learned

appendChild(노드) 자식 노드의 뒤에 노드가 삽입됨. 소스코드 let el = document.getElementById('form'); let input = document.getElementById('param1'); el.appendChild(input); 결과 insertBefore(노드, 기준 노드) 기준 노드의 앞에 노드가 삽입됨. 소스코드 let el = document.getElementById('form'); let input = document.getElementById('param1'); el.insertBefore(input, el.childNodes[4]); // el.childNodes[4] 앞에 input이 삽입..

parentElement 부모 element를 가져온다. parentNode 부모 element를 가져온다. 소스코드 button let el = document.getElementById('param1').parentElement; console.log(el); let el2 = document.getElementById('param1').parentNode; console.log(el2); 결과 차이점 parentElement: 부모 element 노드를 반환. 부모 element 노드가 더이상 없을 경우 null 반환한다. parentNode: 종류에 상관없이 부모 노드를 반환. parentElement는 까지 거슬러 올라가고, document까지 가고 싶지 않을 때 사..

querySelector('.클래스명') HTML에서 해당 클래스명를 사용하는 첫번째 요소를 찾음. getElementById('id') HTML에서 해당 id를 가지고 있는 요소를 찾음 소스코드 button let el = document.getElementById('param1'); let el2 = document.querySelector('.param'); console.log("document.getElementById('param1') : ", el); console.log("document.querySelector('param') : ", el2); 결과 참조 https://www.w3schools.com/..

this로 전달한 경우 button function run(el){ console.log(el); } 실행결과 button input element를 전달한 경우 button function run(el){ console.log(el); console.log(el.value); } 실행결과 seogineer

Ajax(Asynchronous Javascript And XML) 웹페이지에서 데이터를 갱신할 때, 웹페이지 전체를 새로고침 없이 데이터를 갱신할 수 있는 기술 XMLHttpRequest 객체를 사용해서 서버와 통신한다. XML, Plain Text, JSON 포맷의 데이터를 주고 받을 수 있다. HttpRequest 만드는 방법 open(param1, param2, param3) param1(필수): HTTP 요구 방식(request method), GET, POST, HEAD 중 하나의 방식을 사용(대문자 사용 필수). param2(필수): 요청하는 URL. param3(선택): 비동기식(Asynchronous) 여부, true가 기본값. send("data") POST 방식으로 요청한 경우 서버로..

inline script 외부파일 참조 https://opentutorials.org/course/1375/6620

CSS 구성 span { color:red; } span : selector color : property red : value 적용방법 우선순위 : inline > internal = external 1.inline apple 2.internal ... 3.external ... 참고 https://www.edwith.org/boostcourse-web/lecture/16673/

미디어쿼리란 지정한 규칙이 장치 환경과 일치하는 경우만 CSS를 적용하게 할 수 있는 기능 예제 소스 및 설명 브라우저의 뷰포트 너비가 868px 이하인 경우에만 스타일 적용 @media (max-width: 868px) { }브라우저의 뷰포트 너비가 868px 이상인 경우에만 스타일 적용 @media (min-width: 868px) { }참고 https://developer.mozilla.org/ko/docs/Web/CSS/@media https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%..

position 속성 static: 순서대로 배치 relative: 자신이 원래 위치할 위치를 기준으로 상대적인 위치를 설정할 수 있다. absolute: 기준점에 따라 특별한 위치에 위치시킬 수 있다. 기준점은 상위 엘리먼트들 중에 static이 아닌 position이 기준점이 된다. 현재는 wrap이 position:relative 이기 때문에 기준점이 된다. fixed: 고정된 위치에 위치시킬 수 있다. 예) 따라다니는 광고 소스 HTML static(default) relative(left:10px) absolute(left:130px,top:30px) fixed(top:250px) CSS .wrap { position: relative; } .wrap > div { width: 150px; he..

display 주요 속성 block : 블록 처럼 쌓는다. inline : 한 줄로 나란히 배치된다. inline-block : 크기를 유지하면서 나란히 배치된다. 소스 HTML div1 div2 div3 div1 div2 div3 div1 div2 div3 CSS .exam1 { border: 1px solid gray; width: 100px; height: 100px; display: block; } .exam2 { border: 1px solid gray; width: 100px; height: 100px; display: inline; } .exam3 { border: 1px solid gray; width: 100px; height: 100px; display: inline-block; }결과