study

Markdown 작성법 vscode extension 설치markdown All in OneMarkdown Preview Enhanced  위키백과바로가기 1) 타이틀제목(Headers): # 으로 시작# 제목# 1개부터개 부터 ~ 6개 까지# h1 ~ # 6개 h6 # 제목1## 제목2### 제목3### 제목4#### 제목5###### 제목6   2) 수평선 - 또는 * 또는 _ 을 3개 이상 작성.단, - 을 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워두어야 함.***---___  3) 줄 바꿈  : 한 줄 처리 4) 리스트 순서 없는 목록 *, +, - 를 이용해서 순서가 없는 목록들여 쓰기를 하면 모양 변경  순서 있는 목록숫자 기입하면 순서가 있는 목록 들여 쓰기를 하면 모양..

모듈 module 코드를 파일 단위로 분리하고, 필요한 것만 명시적으로 공유하는 구조 import 혹은 export 구문을 사용엄격 모드(strict mode)로 동작export는 변수, 함수 및 클래스를 내보내려면 문을 사용import문을 사용하여 다른 모듈에서 변수, 함수 및 클래스를 가져오기type="module" 웹 브라우저에 JavaScript 파일을 모듈로 로드하도록 지시하려면 script 태그에 사용https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import import - JavaScript | MDN정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.developer.mozilla...

# 비구조화 할당 ( 구조분해 ) 문법 비구조화 할당 문법은 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org 비구조화 할당 ex1) const array = [10, 20]; const [a, b] = array; console.log(a); console.log(b); ex2) const..

# Masonry https://masonry.desandro.com/ MasonryInstall Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works omasonry.desandro.com - CDN https://masonry.desandro.com/#cdn MasonryInstall..

# AOS https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io - CDN - JS 형식 ) 명령어 설명 data-aos 사용할 애니메이션 효과명 data-aos-easing 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) data-aos-anchor 특정한 객체에 anchor를 설정, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정 data-aos-delay 애니메이션 재생 대기시간 설정(default: 0) data-aos-offset 애니메이션 효과가 시작될 객체의 위치 설정 data-aos-durat..

# swiper https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com - CDN https://swiperjs.com/get-started#use-swiper-from-cdn Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavi..

# 플러그인 사이트  http://www.htmldrive.net/ HtmlDrive - Free Dhtml scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library www.htmldrive.net https://www.jqueryscript.net/ Free jQuery Plugins and Tutorials - jQuery Script www.jqueryscript.net # fancybox https://fancyapps.com/ Fancyapps UI | Robust JavaScript UI Component LibraryCarousel Responsive, touch-friendly carousels..

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

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..