본문 바로가기

전체 글10

[jQuery] jQuery 완전정복 스터디(1) jQuery 완전정복 스터디(1) 자바스크립트 DOM과 jQuery 소개 자바스크립트 DOM과 jQuery의 관계 자바스크립트는 크게 4가지로 구성되어 있습니다. 자바스크립트 Core 문법: 기본 문법과 구조, 데이터 타입, 조건문, 반복문, 함수, 클래스 등 자바스크립트 Core 라이브러리: setInterval, String, Date, Math, Array, 기타 전역함수 등 자바스크립트 BOM(Browser Object Model): 브라우저와 관련된 Window, Navigator, Location, History, Document 객체 등 자바스크립트 DOM(Document Object Model): 노드, 스타일, 속성, 이벤트 등을 다룰 수 있는 기능 jQuery는 자바스크립트 DOM 요소.. 2018. 6. 10.
[React] Learn ReactJS: Part I Learn ReactJS: Part I [1] JSX 1. What is JSX? const h1 = hello world; Does this code belong in a JavaScript file, an HTML file, or somewhere else? The answer is...a JavaScript file! Despite what it looks like, your code doesn't actually contain any HTML at all. The part that looks like HTML, Hello world, is something called JSX. JSX is a syntax extension for JavaScript. It was written to be used.. 2018. 5. 30.
SVG Line Animation SVG Line Animation SVG 속성을 활용한 애니메이션 최근 열심히 웹 애니메이션을 찾아 공부하고 있습니다 :-9 웹 애니메이션을 그리는 데는 CSS 애니메이션이나 JS 라이브러리 등이 있는데, 오늘은 SVG 속성을 활용해 선을 그리는 애니메이션을 살펴보고자 합니다. SVG 살펴보기 준비운동 느낌으로 SVG에 대해 간단히 살펴봅시다. 아무 SVG 파일을 편집기로 열어보면 코드가 좌르륵 써있는 걸 볼 수 있습니다. SVG 넵, 이게 바로 중요한 점입니다. SVG는 이미지가 아닌 문서라는 거죠! JPG, PNG 등의 래스터 이미지는 크기가 명확하게 정의되어 있습니다. 정확히는 가로 세로 비율이 정해져있습니다. 그래서 강제로 다른 가로/세로 비율을 지정하면 이미지가 무참하게 깨져버립니다. 따라서 보.. 2018. 5. 16.
[작업 정리] AR GEAR 배운 점 정리 작업 정리 : AR GEAR 인트로 작업이 끝나면 배운 점이나 느낀 점을 적어야 기억에 남는 법...! 인데, 귀찮다고 맨날 까묵까묵. 그래서 이번에는 잊기 전에 정리해봅니다! 작업 분량은 원페이지 + 풀반응형 + 간단한 스크립트정도였고, 주어진 기간은 3일 정도였습니다. 물리적으로 시간이 부족해서 기한을 맞추고자 밤샌 건 안 비밀. 그래서 총 작업일은 약 4일입니다. SVG의 활용 - 로고/타이틀 작업 전에 SVG에 대해 아주 사알짝 공부를 했어서, 이번 작업에는 SVG를 사알짝 넣어봤습니다. :9 먼저, 로고와 타이틀을 .png 확장자로 저장하는 대신 .svg 코드로 저장했습니다. 래스터 이미지였다면 레티나에 대응하도록 2x 크기로 저장하거나, 또는 그에 해당하는 이미지를 따로 저장해야.. 2018. 5. 4.