반응형 Web30 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. CSS float 속성 float 속성 해당 html 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어준다 본래는 이미지와 글자를 함께 출력하는 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃을 잡을 때 사용 float 스타일 속성이 적용된 요소는 컨테이닝 블록 안쪽의 왼쪽 또는 오른쪽에 배치 (컨테이닝 블록 : 그 요소와 가장 가까운 block 레벨 조상 요소의 콘텐츠 영역) float 스타일 속성이 적용된 요소는 문서의 일반적인 흐름에서 제거되므로 부모 요소의 콘텐츠로 인식되지 않는다 (모든 자식 요소들에 float 스타일 속성이 설정되면, 부모 요소의 콘텐츠가 없어진다) 다른 콘텐츠는 float 스타일 속성이 적용된 요소의 영역을 피해서 배치 float 속성 문제점 float 속성을 가진 요소는 부모요소의 영역.. 2021. 8. 23. 향상된 이미지 갤러리 기능 구현 안녕하세요 :) 오늘은 저번에 이어서 이미지 갤러리 기능을 구현할 예정입니다. 저번에 진행되었던 기본적인 이미지 갤러리부터 확인하고 넘어오시는 걸 추천드립니다. https://chpofo.tistory.com/61?category=891798 기본적인 이미지 갤러리 기능 구현 신나는 월요일을 js와 함께 시작해볼까 합니다. 이번 주는 이미지 갤러리 기능 구현을 해볼까 합니다. 단계는 2단계로 진행할 예정입니다. 어렵지 않으니까 천천히 같이 해봅시다 이미지 갤러리 chpofo.tistory.com 지난번과 많이 달라진 점은 없고, 클릭을 했을 때 오버레이 되면서 이미지가 크게 나왔다가 다시 클릭을 하면 오버레이가 사라지는 기능을 구현해보도록 하겠습니다 html과 css는 빠르게 정리해보도록 하겠습니다. 이.. 2021. 8. 11. 이전 1 2 3 4 ··· 8 다음 반응형
