fullstack-study

# Sass ( SCSS ) 작성법 SCSS와 Sass는 둘 다 CSS의 전처리기로, CSS를 더 쉽게 작성하고 관리할 수 있도록 도와줍니다. 문법: Sass (Syntactically Awesome Style Sheets): 들여쓰기를 사용하여 CSS와 다르게 보이게 만들어줍니다. 중괄호 {}와 세미콜론 ;을 사용하지 않습니다.SCSS (Sassy CSS): CSS와 유사한 문법을 가지고 있습니다. 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 거의 동일한 구조를 가지고 있습니다.호환성:SCSS는 CSS와 거의 동일한 문법을 사용하기 때문에 기존 CSS 파일을 쉽게 가져와서 수정할 수 있습니다.Sass 는 기존 CSS 파일과 호환성이 떨어질 수 있습니다. 기존 CSS를 Sass 로 변환하기 위해서는..

window, 스크롤, 마우스 좌표, getBoundingClientRect  # windowwindow.open(url, windowName, [windowFeatures]);window.open(url, 창이름,옵션);옵션의 이름설명width창 너비height창 높이location주소 표시줄 표시 여부 (yes 또는 no)scrollbars스크롤 막대 표시 여부resizable창 크기의 변경 기능 여부toolbar도구 모음 표시 여부status상태 표시줄 표시 여부menubar메뉴 막대 표시 여부 let w = window.open( 'http://www.naver.com', 'naver', 'height=600,width=600');setTimeout(() => { w.clos..

createElement , append, prepend , video , table 1. 요소 생성 : createElement2. appendChild3. append , prepend4. video5. 테이블 추가,삭제 설명mdnappendChild()상위 노드의 하위 노드 목록 끝에 노드를 추가바로가기append()상위 노드의 하위 노드 목록 끝에 노드를 추가바로가기prepend()상위 노드의 하위 노드 목록 앞에 노드를 추가바로가기createElement ()새로운 노드 생성바로가기 # appendChild , createElementcreateElement () : document.createElement() 새 태그를 반환appendChild() : 지정된 상위 노드의 하위 노드 목록 끝..

클래스 조작 1. className 2. classList 3. getComputedStyle 4. setProperty 명령어 설명 mdn Element.className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정 바로가기 Element.classList 클래스 추가 삭제 등 바로가기 getComputedStyle CSS 속성값 가져오기 바로가기 setProperty CSS 속성에 대한 새 값을 설정 바로가기 # className 속성의 값을 가져오거나 설정 형식 element.className element.className += newClassName; element.className = "class1 class2"; 예) Homepage Services About Contact let m..

1. this2. target과 currentTarget의 차이점3. dataset4. animate5. transition # this : 이벤트 한 자기 자신 결과 : click 자신의 값 -> 짜장면결과 : 짜장면 예)let btn = document.querySelector('#btn');btn.onclick = function() {//this -> 이벤트한 대상//클릭한 자기자신 alert(this.id); alert(this.value); }; 예) 메세지 xxxconst message = document.querySelector('#message');const result = document.querySelector('#result');message..

# 이벤트흐름 : 버블링과 캡처링 자바스크립트 이벤트 핸들링에서 "버블링(Bubbling)"과 "캡처링(Capturing)"은 이벤트가 DOM 트리를 통해 전파되는 방식을 설명합니다. 이 두 용어는 이벤트의 전파 방향을 설명하는데 사용됩니다.  1. 캡처링 (Capturing)캡처링은 이벤트가 최상위 요소에서 시작하여 하위 요소로 이동하는 단계입니다. 이벤트가 트리의 루트에서 시작하여 이벤트 대상 요소까지 이동합니다.2. 버블링 (Bubbling)버블링은 이벤트가 대상 요소에서 시작하여 최상위 요소로 이동하는 단계입니다. 이벤트가 발생한 요소부터 시작하여 부모 요소, 그 부모의 부모 요소로 계속해서 이동합니다.이벤트 전파 단계캡처링 단계: 이벤트는 최상위 요소에서 시작하여 대상 요소로 향합니다. 대상 요..

# 자바스크립트 이벤트 Mouse EventEvent설명click마우스 버튼을 클릭했을 때dbclick마우스 버튼을 더블 클릭했을 때mousedown마우스 버튼을 누르고 있을 때mouseup누르고 있던 마우스 버튼을 뗄 때mousemove마우스를 움직일 때 mouseover마우스를 요소 위로 움직였을 때mouseout마우스를 요소 밖으로 움직였을 때mouseenter해당 요소에 마우스 커서를 올려다놓았을때mouseleave해당 요소에 마우스 커서를 빼낼때 Keyboard EventEvent설명keydown키를 누르고 있을 때keyup누르고 있던 키를 뗄 때keypress키를 누르고 뗏을 때keyCode키 코드값 , mdn 속성설명e.altKeyAlt 키가 눌렸는지 여부 (true / false)e...

DOM 선택, 출력, 속성,탐색 # querySelector("선택자") , querySelectorAll("선택 자명") 설mdnquerySelector("선택자")해당 선택자를 만족하는 요소하나반환바로가기querySelectorAll("선택자명")해당 선택자를 만족하는 모든요소반환바로가기선택자 바로가기innerHTML 바로가기innerText 바로가기textContent 바로가기 # document.querySelector("선택자")let element = parentNode.querySelector(selector); # document.querySelectorAll("선택 자명")let elementList = parentNode.querySelectorAll(selector);let no..

# DOM 문법 문서 객체 모델(DOM) getElementById getElementsByName getElementsByTagName getElementsByClassName # 문서 객체 모델(DOM)이란 문서 객체 모델(The Document Object Model, 이하 DOM) HTML 문서를 로드한 후, 해당 문서에 대한 모델을 메모리에 생성합니다 이때 모델은 객체의 트리로 구성되는데, 이것을 DOM tree라 합니다. 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 웹 문서를 구조화한 DOM 트리(DOM tree)와 이벤트 등을 정리해 놓은 표준 DOM은 HTML문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연..

# Date객체속성, 메소드설명mdnDate1970년 1월 1일 자정과의 시간 차이를 밀리초로 나타내는 정수 값바로가기getFullYear()주어진 현지 시간 기준 연도를 반환바로가기getMonth()월은 0부터 시작바로가기getDate()주어진 날짜의 현지 시간 기준 일을 반환바로가기getDay()주어진 날짜의 현지 시간 기준 요일을 반환바로가기getHours()주어진 날짜의 현지 시간 기준 시를 반환바로가기getMinutes()Date 인스턴스의 분을 현지 시간 기준으로 반환바로가기getSeconds()초값을 현지 시간에 맞춰 반환바로가기toTimeString()시간을 문자열로 반환바로가기toDateString()날짜 부분을 문자열로 반환바로가기 - 년, 월, 일const now = new Date(..