네이처리 노트

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 프론트엔드 개발을 빠르고 쉽게 할 수 있는 반응형 웹사이트의 프레임워크 HTML, CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소 포함 자바스크립트를 선택적으로 확장 할 수 있음 ‘프레임워크’라고 하는 것은 재사용이 가능한 요소들이 집합되어 있으며, 정해진 구조와 틀 안에서 이것들을 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jQuery는 라이브러리이고 부트스트랩은 프레임워크이다. 따라서 ‘부트스트랩4 프레임워크에서 jQuery 라이브러리를 사용되어 진다.’ 라고 할 수 있다. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 ‘그리드 시스템’을 채용하고 있기 때문에 웹 페이지를 데스크탑, 태블릿, 스마트폰..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🐟 설치하기 CDN 사용 head 상단에 jQuery CDN입력하면, 인터넷에 있는 원격 jQuery 코드를 내 프로젝트로 가져오게 된다. CDN 가져오기 : https://code.jquery.com/ 다운받기 프로젝트의 리소스폴더에 다운로드, script에 리소스 파일 경로를 작성한다. 프로젝트내에 다운받는 것이 무거울 수도 있으나 수정이나 코드를 들여다보기를 원할 경우 다운받는 것이 좋다. jQeury 다운로드 : https://jquery.com/ 🐟 jQuery Quick API

공부하면서 정리한 내용입니다 참고한 내용은 링크로 확인해주세요 사용하기 쉽게 만들어 놓은 소프트웨어로 라이브러리와 프레임워크가 있다. 라이브러리 란, 내가 필요한 부품들을 재사용하기 쉽도록 잘 정리, 정돈 해놓은 것들 프레임워크 란, 만들고자 하는것이 있을 때, 필요한 공통적인 어떤 것에 대해서 미리 만들어 놓은 덩어리 웹프레임워크 TOP10 ( 2020.08 기준 ) javascript와 jQuery의 비교 // javascript let element= document.getElementById("element"); //ex let tomato= document.getElementById("tomato"); let peach = document.getElementByClassName("peach");..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 js 방법 html 방법

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 script를 불러오는 것을 서버언어로 하면 한줄이면 되지만 자바스크립트는 한줄을 허용하지 않는다. 자바스크립트방식으로 적용해 보았다. case 1 // javascript fetch("가져올 파일 링크") .then(response=>{ return response.text() }) .then(data => { document.head.innerHTML= data; //head에 추가한다. }); 기존의 script 코드는 보이지않는데, 작동은 한다. (괜찮은거야?) Reference 1) 언어별 인클루드방식 The Simplest Ways to Handle HTML Includes | CSS-Tricks It's extremel..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 HTML 불러오는 방법 1. XMLHttpRequest 으로 body내에 넣을 조각불러오기 2. 광활한 document에서 html을 불러오기 할 경우에는 getElementById로 직접 지정해줘야 적용된다. let xhr = new XMLHttpRequest(); xhr.open("GET", "file.html", true); //옵션 :: 전송방식, 경로, 비동기사용여부 xhr.send(); xhr.onload = function(){ console.log(xhr.responseText); } document.body.innerHTML = xhr.responseText; // body에 넣기 // document.getElem..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🌔 Ajax ( Asynchronous JavaScript And XML ) XMLHttpRequest let URL = "API URL"; let xhr = new XMLHttpRequest(); xhr.open("GET", URL, true); //옵션 :: 전송방식, 경로, 비동기사용여부 xhr.send(); xhr.onload = function(){ if (httpRequest.readyState === XMLHttpRequest.DONE){ // 이상 없음, 응답 받았음 console.log(xhr.responseText); } else { // 아직 준비되지 않음 } } readyState 0 (uninitialized..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 Reference 1) 이벤트 실전예제 2) 이벤트 전파를 중단 하는 방법 click이벤트 안에 다른 click 이벤트 ( 같은 DOM에 걸린 이벤트들 ) Element.addEventListener("click", (e)=>{ e.target.parentNode.classList.add("open"); let list = e.target.nextElementSibling.children; Array.from(list).forEach((li)=>{ li.addEventListener("click", (eList)=>{ // 상위 이벤트가 동시에 진행되면서 eList + e + eList 로 동작 // 다음의 코드로 해결하면된다. e..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 target.addEventListener(type_이벤트유형 , listener_이벤트구현하는객체 [, options]); target.addEventListener("click" , 함수명); target.addEventListener("click" , function(){ 함수명(파라미터) }); //익명함수 사용한다!! ▲파라미터 전달방법 ▶이벤트 전파 중단하기, 중복발현 현상, 새로고침되는 현상 디버그하기 Reference 1) 클릭이벤트 옵션 Javascript : addEventListener 의 3번째 options 인자 addEventListener() 는 웹 요소에 이벤트를 거는것으로 많이 사용된다. 대부분 이런 ..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 element.style.display = "none"; 🌒 Class Name으로 접근하기 Element.classList.contains("클래스명"); // 클래스를 포함하는지, Return Boolean Element.classList.remove("클래스명"); Element.classList.add("클래스명"); Element.classList.toggle("클래스명"); 🌒 focus element.focus(); // Focus 부여하기 if (element === document.activeElement) //Focus 요소찾기 Reference 1) 🔗 [Javascript] class 추가/변경/삭제/읽기 (c..