네이처리 노트

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

공부하면서 정리한 내용입니다 참고한 내용은 링크로 확인해주세요 사용하기 쉽게 만들어 놓은 소프트웨어로 라이브러리와 프레임워크가 있다. 라이브러리 란, 내가 필요한 부품들을 재사용하기 쉽도록 잘 정리, 정돈 해놓은 것들 프레임워크 란, 만들고자 하는것이 있을 때, 필요한 공통적인 어떤 것에 대해서 미리 만들어 놓은 덩어리 웹프레임워크 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..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 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..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 속성형태 (setAttribute, getAttribute) Array.from([전체배열값]).forEach((각배열값)=>{ 각배열값.addEventListener("click", ()=>{ 각배열값.setAttribute("속성", "값"); // set 각배열값.getAttribute("속성"); // get } } // Style 적용 element.setAttribute("style", "키:값; 키:값"); element.getAttribute("style"); // checked 확인 element.setAttribute("checked", boolean ); element.getAttribute("checked");..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 추가 let newDIV = document.createElement("div"); newDIV.innerHTML = "새로 생성된 DIV입니다."; newDIV.setAttribute("id","myDiv"); newDIV.style.backgroundColor="yellow"; // 결과 새로 생성된 DIV입니다. let newDIV = document.createElement("div"); newDIV.innerHTML = ' 새로 생성된 DIV입니다. '; // 결과 새로 생성된 DIV입니다. 추가할 위치를 지정할 수 있음 El.insertAdjacentHTML("option", "추가할내용"); //El.innerHTML ..