728x90 반응형 JavaScript15 19.12.08 개발기록 -[Javascript] class를 이용한 객체 만들기 오늘은 생활코딩의 egoing님께 배운 class에 대해 포스팅 해보려고 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 class Person2 { constructor(name, first, second, third) { this.name = name; this.first = first; this.second = second; this.third = third; } sum() { return 'classes : ' + (this.first + this.second + this.third); } } class Person2Plus extends Person2 { avg() { return 'average : ' + (th.. 2019. 12. 8. 19.12.07 개발기록 -[Javascript] Prototype를 이용한 객체 만들기 나같은 초보 개발자(개발자라고 하기에도 민망한..)에게 정말 신과 같은 존재인 무료 인터넷 강의 사이트가 있다. 바로 생활코딩이라는 사이트인데, 닉네임 egoing(이고잉)을 사용하시는 선생님께서 재능기부로 프로그래밍에 대한 기초적인 강의를 완전 무료로 접할 수 있는 곳이다. https://opentutorials.org/course/1 생활코딩 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'.. 2019. 12. 7. 19.12.06 개발 기록 - [Javascript] 뉴스피드의 몇 년 전, 몇 개월, 몇 일 전, 전 몇 시간 전, 몇 분 전, 몇 초 전 만들기 오늘의 포스팅 내용은 페이스북 뉴스피드나 인스타그램 포스팅 등에서 볼 수 있는 ~~시간 전을 계산 하여 Javascript로 구현하는 Syntax이다. 뉴스피드 기능에 있어서 굉장히 중요하고 필요한 기능이라고 생각되어 완벽하게 구현하고자 하는 욕심이 있었다! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 var crrtDay = new Date(); var crrtYear = crrtDay.getFullYear(), crrtMonth = crrtDay.getMonth(), crrtDate =.. 2019. 12. 7. 19.12.05 개발 기록 - CSS transition 어제 얘기했던 CSS의 transition에 대해서 포스팅한다. transition을 사용해본 결과, 개인적으로 transition은 화면의 전환이나, 어떤 div등이 움직이거나 변형이 일어날 때 부드러운 효과를 주기 위한 것으로 이해가 되었다 ! 1 2 3 4 5 6 7 $("#one").css({ "-moz-transition": "all 0.75s ease-in-out", "-o-transition": "all 0.75s ease-in-out", "-webkit-transition": "all 0.75s ease-in-out", "-ms-transition": "all 0.75s ease-in-out", "transition": "all 0.75s ease-in-out", }); 위 코드를 보면, .. 2019. 12. 5. 19.12.04 개발기록 - Jquery를 이용한 선택자 및 CSS 추가 방법 JavaScript로 홈페이지 제작 중 페이지 슬라이드 기능을 넣어야 하는 경우가 있다. 슬라이드 기능을 넣기를 구글링 하던 도중 transition 이라는 CSS 옵션(?)을 발견 했다 ! 하여 Jquery로 해당 background 사진을 변경하며, transition 기능을 이용하여 자연스럽게 페이지가 넘어가도록 만들어 봤다 ! (슬라이드 기능은 다음에 꼭 해보도록 한다!) 1 2 3 4 5 6 7 8 9 10 11 12 13 $("#one").css({ "background": "url(\"/subhtml/main/images/Rectangle.jpg\")", "background-size": "cover", "background-attachment": "fixed", "background-pos.. 2019. 12. 4. 이전 1 2 3 다음 728x90 반응형
