반응형 Web/JavaScript7 Dynamic Calendar 만들기 - 날짜 가져오기 (JS) 두 번째 파트 : 자바스크립트를 사용하여서 현재 날짜 정보 가져오기 우선 Date 객체를 활용해서 날짜를 가지고 와봅시다. const date = new Date(); const currYear = date.getFullYear(), currMonth = date.getMonth(); console.log(date); console.log(currYear); console.log(currMonth); 로그를 찍어보면 이렇게 찍히는 걸 확인하실 수 있습니다. 여기서 문제점은 아니지만 확인해야하는 부분은 currMonth의 값인데요 지금 오늘의 날짜는 2022-12-08 인데, 11월로 뜨는 걸 확인하실 수 있습니다. 그래서 현재의 달을 불러올때는 +1을 해줘야 한다는 점!! 또한 저희는 12월이 아닌 De.. 2022. 12. 8. Dynamic Calendar 만들기 - 뼈대잡기 (html, css) 프로젝트를 진행하면서 만들게 되었던 Calendar 만들기 정리 기본적으로 html [input] 태그를 이용해서 캘린더를 만들 수 있는데요 확인부터 해보겠습니다. 기본적인 달력도 디자인이 이상하진 않지만 저희가 원하는 달력의 모양이 아니므로, 달력을 새로 만들어봅시다. 저는 달력을 IBM Carbon Design System 바탕으로 약간 조정해서 저의 달력을 디자인을 먼저 잡고 시작했습니다 기본적인 구성 1. 달력의 width 값은 450px 2. 모서리는 10px 3. 화면 배경 색 : #008AFF / 달력 배경색 : #FFF 1. Html 뼈대 잡기 chevron_left September 2022 chevron_right Sun Mon Tue Wed Thu Fri Sat 27 28 29 30 .. 2022. 12. 7. 향상된 이미지 갤러리 기능 구현 안녕하세요 :) 오늘은 저번에 이어서 이미지 갤러리 기능을 구현할 예정입니다. 저번에 진행되었던 기본적인 이미지 갤러리부터 확인하고 넘어오시는 걸 추천드립니다. https://chpofo.tistory.com/61?category=891798 기본적인 이미지 갤러리 기능 구현 신나는 월요일을 js와 함께 시작해볼까 합니다. 이번 주는 이미지 갤러리 기능 구현을 해볼까 합니다. 단계는 2단계로 진행할 예정입니다. 어렵지 않으니까 천천히 같이 해봅시다 이미지 갤러리 chpofo.tistory.com 지난번과 많이 달라진 점은 없고, 클릭을 했을 때 오버레이 되면서 이미지가 크게 나왔다가 다시 클릭을 하면 오버레이가 사라지는 기능을 구현해보도록 하겠습니다 html과 css는 빠르게 정리해보도록 하겠습니다. 이.. 2021. 8. 11. 기본적인 이미지 갤러리 기능 구현 신나는 월요일을 js와 함께 시작해볼까 합니다. 이번 주는 이미지 갤러리 기능 구현을 해볼까 합니다. 단계는 2단계로 진행할 예정입니다. 어렵지 않으니까 천천히 같이 해봅시다 이미지 갤러리란? 많은 사이트에서 볼 수 있는 이미지 갤러리 이미지 리스트가 있고 메인 이미지가 있는데, 작은 이미지 썸네일을 클릭하면 메인 이미지가 변경되는 이미지 갤러리를 만들어볼까 합니다. 시작해볼까요?? 먼저 완성작부터 확인 후 시작해봅시다. 항상 시작은 html 작성 이미지 url이 길어져서 해당 소스에서는 수정해서 올려서 해당 소스 그래도 구현할 시 작동 안 됩니다. 이미지는 픽사 베이에서 이미지 주소 복사해서 사용했습니다. html 소스는 어렵지 않게 누구나 작성할 수 있는 수준이죠?? 갤러리처럼 CSS를 입혀주기만 하.. 2021. 8. 9. 이전 1 2 다음 반응형
