본문 바로가기

웹 개발31

게임으로 익히는 css 1. Flexbox Froggy css 중 flex 속성에 대해 이해하고 연습할 수 있습니다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. Grid Garden css 속성 중 grid에 대해 이해하고 연습할 수 있습니다. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 2023. 12. 7.
table구조 유지한 채 반응형으로 만들기 HTML 삽입 미리보기할 수 없는 소스 2023. 11. 13.
[JS]GSAP.js - 애니메이션 자바스크립트 라이브러리 GSAP.js - 애니메이션 자바스크립트 라이브러리 https://greensock.com/docs/v3/Installation Installation | GSAP | Docs & Learning GSAP is framework agnostic and can be used in React, Webflow, Wordpress, or any other JS/Web frameworks. The core GSAP file and all the plugins are just Javascript files. gsap.com 2023. 11. 8.
[JS]D3.js - 차트만드는 자바스크립트 라이브러리 공식사이트 https://d3js.org/ D3 by Observable | The JavaScript library for bespoke data visualization D3 The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility d3js.org 2023. 11. 8.
페이지별 H 태그 구조 한번에 파악하는 방법 - html 5 outliner h태그에 대한 상세한 설명은 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements 참고 1. Html 5 Outliner - 웹사이트 https://gsnedders.html5.org/outliner/ HTML 5 Outliner gsnedders.html5.org 예시 ) 행정안전부 웹사이트 2. HTML5 Outliner - 크롬 확장프로그램 예시) 행정안전부 웹사이트 2023. 11. 8.
Youtube 썸네일 이미지 가져오는 방법 유튜브의 영상 아이디값을 알면 해당 영상의 썸네일 이미지도 알 수 있다. 기본적으로 썸네일 이미지의 URL은 다음과 같다. 여기에서 {영상아이디값}과 {크기별썸네일}을 알맞게 변경해주면 된다. https://img.youtube.com/vi/영상아이디값/크기별썸네일.jpg 썸네일 종류 및 URL 구분 이미지 크기 URL 기본 120 x 90 https://img.youtube.com/vi/영상아이디/default.jpg 중품질 320 x 180 https://img.youtube.com/vi/영상아이디/mqdefault.jpg 고품질 480 x 360 https://img.youtube.com/vi/영상아이디/hqdefault.jpg 중간해상도 640 x 480 https://img.youtube.com.. 2023. 10. 25.
[css] 스크롤 커스텀하기 HTML 삽입 미리보기할 수 없는 소스 2023. 10. 23.
웹접근성 배우기 좋은 유튜브 채널 추천 한국지능정보사회진흥원(NIA)이 운영하는 Youtube 채널 https://www.youtube.com/@AOA11Y AOA11Y 정보접근성 인식개선 및 기술기반 확산을 목표로 한국지능정보사회진흥원(NIA)이 운영하는 Youtube 채널 www.youtube.com 2023. 10. 23.
자바스크립트 애니메이션 라이브러리 Velocity.js http://velocityjs.org/ Velocity.js Overview At only 3Kb zipped, the UI pack is a must-have for improving your animation workflow. It exposes two functions: $.Velocity.RegisterEffect() and $.Velocity.RunSequence(). The former allows you to combine multiple Velocity calls into a a single effe velocityjs.org mo.js https://mojs.github.io/ mo.js mojs.github.io anime.js https://animejs.com.. 2023. 6. 30.
크로스브라우징 검사 도구 https://www.browserstack.com/list-of-browsers-and-platforms/live 3000+ Desktop & Mobile Browsers for Cross-Browser Testing Windows 8.1 (64-bit) www.browserstack.com 2023. 5. 8.