LeeHyojin Blog LeeHyojin Blog

※ 목차 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..