본문 바로가기
728x90
반응형

분류 전체보기128

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.
728x90
반응형