LeeHyojin Blog LeeHyojin Blog

※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 프로젝트를 하면서 느꼈던 점 구글 캘린더, 네이버 캘린더 등등 평소에 캘린더 웹앱을 사용하면서 막연히 나도 언젠간 이런 웹앱을 만들어보고 싶다는 생각을 했었습니다. 이 캘린더를 구현할 때, 처음부터 이런 저런 기능들을 다 구현해가면서 시작하지는 않았습니다. 빈 js파일을 만들고 new Date()를 통해 날짜를 받아오는 테스트 과정만 따로 진행하여 Date에 대한 메서드들을 능숙하게 사용할 수 있을 때까지 계속해서 빈 페이지에 연습했습니다. 하나가 끝나고 나면 input으로 할일목록 제출하..

※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 최종 완성본 구현 목표 순서 1. 첫 로딩이 되면 현재 출력하고자 하는 달이 윤년인지 윤년체크를 한다. 2. 윤년 체크가 완료되면 해당하는 달의 일 수만큼 html 요소들을 createElement 메서드로 만들고 필요한 속성들도 setAttribute 메서드로 정의 해준다. 3. 왼쪽 파트에 현재 날짜를 보여주기 위해 함수를 작성하는데 이 함수는 재활용 할 여지가 있으므로 따로 함수로 만들어준다. 4. 첫 로딩이 되면서 해당 날짜에 등록된 할일 목록이 있으면 출력해줄 수 있는 함수를 만들..

※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 1. reset.css와 common.css 로 파일 분리하기 위의 사진처럼 reset.css 에는 기본적으로 태그들에 적용되어 있는 불필요한 css를 reset 시켜주기위해 따로 파일을 분리해주었습니다. 이렇게 분리하게 되면 img 태그나 리스트 태그들 a태그 등등에 불필요한 css를 하나하나 매번 적어주지 않아도 되어 편리합니다. 프로젝트를 진행하면서 프로젝트가 끝날 때까지 불필요한 css 속성이 있다면 이 파일에 한번에 적용시켜 놓으면 됩니다. common.css 에는 각 태그별로 적..

※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 먼저 HTML 에서의 전체적인 큰 구조로는 header 부분과 section 부분으로 왼쪽 파트와 오른쪽 파트로 구분되어 있습니다. 그리고 할일을 작성하는 input 태그와 제출 버튼인 INPUT을 그룹핑하고 있는 form태그가 있고 이 태그의 형제 요소로 지금 화면에는 안보이지만 ul태그가 자리잡고 있습니다. 할일을 적고 제출하고 나면 자바스크립트를 통해 동적으로 li태그들이 이 ul태그 안에 생성될 것입니다. INPUT section의 right 파트에서는 상단에 요일을 나타내는 부분과..

※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 구현된 최종 캘린더 이미지 구현한 계기 평소에 자주 사용하던 구글캘린더를 보고 편리함을 느꼈고, 구글캘린더와 비슷한 캘린더를 만들어보고 싶다는 생각을 하게되었습니다. 또한 지금까지 학습해온 html/css/JavaScript를 복습겸 잘 학습해왔는지 점검하기 위해서 프로젝트를 시작하게 되었습니다. html/css/JavaScript 를 사용하면서 각 파트에서 얻어갈 지식들 1. html 시멘틱 마크업을 이해하고 사용할 수 있으며, 각 태그들을 의미에 맞게 사용할 수있고 각 태그들에 clas..