본문 바로가기

분류 전체보기

 (265)
[plugin] AOS 플러그인 사용법 https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 1.CDN 삽입 2. INITIALIZE AOS 부분 복붙 3. 원하는 style을 적용한다. 아래 스타일마다 있는 각 data를 넣음 4. 옵션들을 각 추가로 사용 (사이트 오른쪽 logo클릭시 이동) ▼ CODE 페이드 다운 페이드 업 페이드 업 right 페이드 업 left 줌인 줌아웃 플립 ▼ 실행화면
[React] 리액트 설치하기, 시작 방법 1. 설치하기 (터미널 아래에 쳐서 설치) D:\file\react>npx create-react-app react01 2. 왼쪽에 react생성한 파일을 선택후 react01 >src>app .js 선택후 아래 터미널에 D:\새싹\react\react01>npm start 치기 ▼ 완성되면 뜨는 화면 3. app.js 에서 아래에 내용 삭제 후 스타일에 맞게 수정 가능 이건 건들면 안됨. html같은 역할임 style에 맞게 내용추가 import './reset.css'; import './App.css'; import Nav from './Nav'; /* /Nav.js라해도 되고 Nav라 해도 됨 */ function App() { const listLi={margin:'0 10px',lineHeig..
[plugin] alvarotrigo - Fullpage 플러그인 https://alvarotrigo.com/fullPage/ fullPage scroll snapping. Create full screen pages fast and simple Mouse wheel snap to sections. Fast and simple to use. alvarotrigo.com 1. CDN 복붙해서 html파일 Section1 Section2 Section3 Section4 섹션1 섹션2 섹션3 섹션4 ▼ 1 실행화면 (사진 대신 color로 대체) ▼ 2 콜백함수 이용한 예시 코드 메뉴1 메뉴2 메뉴3 PRODUCT 제품1 342,350 제품2 342,350 제품3 342,350 제품4 342,350 제품5 342,350 ▼ 2 실행화면 (사진 x)
[Plugin] swiperjs 슬라이더 사용 방법 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com swiperjs는 이미지 슬라이더를 사용할 때 많이 이용하는 사이트이다. (클릭이나 터치를 통한 이미지 슬라이더 가능) [ 사용방법 ] 1.사이트 내의 Get Started 클릭>Use Swiper from CDN 링크를 html 의 태그 안에 적용한다. + CDN이란? (Contents Delivery Network) 콘텐츠 전송 네트워크인 CDN이란, ..
[JS/HTML] DOM이란? (DOM 트리) DOM (Document Object Model) HTML내 원하는 위치에 접근하기 위한 하나의 방식, W3C의 표준 문서 객체 모델(DOM)은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 돔트리:브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델 노드 node 란? tree구조에서 root노드(가장 위에서 시작되는 node)를 포함한 모든 개개의 객체 ex)head, body, title, script, h1 등의 태그 뿐만 아니라 태그 안의 텍스트나 속성도 해당 노드의 종류 노드간의 관계 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다. - 노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재함..
[JS] <script> 태그의 defer, async 속성 HTML 이런 식으로 html의 안에 파일을 첨부하고 뒤에 defer라고 적어주는 형식이다. 태그나 를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. 외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있다. 이런 브라우저의 동작 방식은 두 가지 이슈를 만든다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 ‘막아버린다’. 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 된다. →그러면 태그 아래에 작성하면 되지 않나? →페이지 맨 아래에 놓을 시 스크립트 위..
[JS] document.addEventListener 와 window.addEventListener의 차이 빨간box=window 파란box=document (html) 영역을 나누면 아래 사진과 같지만 아래와 같은 창의 의미보다는 그냥 window를 document보다 더 큰 범위로 생각하면 된다. 이 둘 사용의 차이점은 window= (전체적용) 키다운이나 스크롤에 대부분 사용 브라우저를 켜면 가장 먼저 로딩되는 전역객체 / 자바스크립트의 최상위객체 / document를 포함 ex) window.addEventListener('onload') → onload는 window에 사용 document= (지정요소에 적용할때) 마우스에 대부분 사용 구분돼서 사용되긴 하지만, 이벤트 타겟 버블링,캡처링 때문에 겹쳐서 써도 적용됨
[JS] 윈도우 창크기 (window size), 브라우저 좌표 구하기 window.screen.width , window.screen.height, window.outerWidth, window.outerHeight, window.innerWidth, window.innerHeight window.screen.width , window.screen.height 사용자 모니터의 사이즈 window.outerwidth , window.outerheight 브라우저의 URL과 Tab을 포함한 전체적인 브라우저의 사이즈 window.innerWidth, window.innerHeight 브라우저의 URL과 Tab을 제외한 브라우저의 사이즈. 스크롤이 있는 경우 스크롤에 해당하는 부분도 포함 파란색BOX :가로 (window.outerWidth) /세로(window.outerHei..

티스토리툴바