CSS

Box Model출처 : MDN 박스 모델CSS box Model은 Block 박스에 적용되며, Inline 박스는 Box Model에 정의된 일부 동작만 사용한다. 이 개념은 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠 등이 어떻게 작동할 것인지에 대한 것을 결정짓기 때문에 정확히 이해하고 활용하는 것이 중요하다.  MDN에 있는 한국어 번역이 읽기 나빠서 천천히 정리해나가며 이해해보려고 한다. 본격적으로 Box Model에 대해서 알아보기 전에, 이와 관련된 display의 속성 중 block과  inline의 차이에 대해서 알아보려고 한다. 이 두 가지는 서로 다른 배치 방법, 가로 세로 길이, 줄 바꿈 등을 가지고 있기 때문에 차이점을 알고 사용하는 것이 좋다. ..

프론트엔드 공부를 하면서  CSS 실력도 너무 중요하다는 생각을 늘 하고 있었다.지금은 프론트엔드 멘토를 통해서 많이 만들어보고, 다양한 속성들에 대해 이해 해보려고 노력하고 있다.  그리고 기다리던, 빔캠프 6월 과정이 오픈해서 이번에 신청했다!CSS를 잘하는 지인이 정말 좋은 강의라고 강력 추천해서 신청했는데, 아직 한 달 정도 남았지만 너무 기대가 된다. ** 빔캠프에 대한 자세한 내용은 사이트를 참조하시길 **https://veamcamp.com/  빔캠프가 본격적으로 시작되기 전, CSS에 대한 기본 개념에 대해 공부를 한 후 가려고 한다.(강사님께서 메일로 예습해오면 좋을 개념들을 리스트업 해주셨음)더보기Cascade의 의미 & Selector SpecificityPositionCSS Box-..

캘린더와 함께 간단한 할 일을 메모할 수 있는 사이트를 만들어보자 생각한 지 언....(기억 안남)그래서 이번에 프로젝트도 끝났겠다, 프론트엔드 멘토에서 얻은 의욕을 여기에 써보자는 생각이 들었다. 리액트로 구현을 할까, 바닐라JS로 구현을 할까 고민을 했지만기본적인 자바스크립트에 익숙치 않은 상태에서 리액트로 들어갔던 것이 내심 불안했던 지라 이번에는 바닐라 JS로 구현해보기로 마음 먹었다!  우선 디자인부터 만들어보자! 원래는 프론트엔드 멘토에 있던 시안을 기반으로 만들어보려고 했는데, 조금 더 단순하고 깔끔한 디자인으로 만들고 싶어서 내가 처음부터 새로 만들어봤다!!구성은 아주 간단하다.이번 달을 확인할 수 있는 캘린더 부분 선택한 날짜의 일정을 확인하고 등록할 수 있는 사이드 바기본적인 HTML과..