PREVIEW 리액트와 css의 기본기를 다질 겸 가장 기본적인 프로젝트인 투두리스트를 한 번 만들어 보기로 했다. Initial setting CRA로 프로젝트를 생성했고 classnames 라이브러리의 bind를 이용하여 클래스명을 간단히 작성할 것이다. 그리고 scss에 더 익숙해지기 위해 이번에 사용해보기로 했다. File Structure ├── src │ ├── components │ │ ├── index.jsx => export TodoForm & TodoItem │ │ ├── TodoForm.jsx │ │ ├── TodoForm.scss │ │ ├── TodoItem.jsx │ │ ├── TodoItem. scss │ ├── index.js │ ├── App.js │ ├── App.scss..
이번에 만들어 볼 것은 브라우저 너비가 줄어들었을 때 기존 navbar를 없애고 토글버튼으로 navbar를 보여주는 기능이다. 미리보기 HTML 아이콘은 font awesome을 이용할 것이다. 이런 식으로 i태그 안에 class를 쓰면 아이콘이 생성된다. 원래 태그의 본래 목적은 italic 효과를 주기 위함이다. 하지만 디자인 요소를 분리하면서 i태그 쓰임이 감소하였다. 따라서 아이콘을 사용할 때 i 태그를 쓴다면 가독성과 편의성을 높일 수 있다. span 태그를 쓸 수도 있지만 span 태그를 사용할 경우 복잡해 보일 수 있다는 단점이 있다. JS const navToggle = document.querySelector(".nav-toggle"); const links = document.query..
이번에는 단순하게 버튼을 눌러 숫자를 증가, 감소, 리셋하는 사이트를 만들 것이다. Increase 버튼을 누르면 가운데 숫자가 초록색으로 바뀌고, Decrease를 누르면 빨간색으로 바뀐다. 내가 쓴 코드 index.html Counter 0 Decrease Reset Increase 일단 내가 작성한 html은 이렇다. 숫자가 태그에 수정할 수 있도록 태그를 넣어주었다. 그리고 버튼을 세개를 다 따로 만들었다. 앗 그런데 를 다 빼먹었다... 레이아웃에 대해 공부할 필요가 좀 있을듯 하다. 를 남발하지 말라고 하는데 언제어디서 적절히 사용해야할지 잘 모르겠다. 여기서 또 들은 의문점은 왜 class랑 id를 굳이 같이 써야하는지다. 저번 01 Color Flipper 프로젝트에서는 버튼에 CSS용 c..
