2024/12 2

리액트 투두리스트 만들기 (1편) : Editor UI 만들기

안녕하세요  지난 시간에 이어서 투두리스트를 만들어보겠습니다.       1. Header 파란 글씨 만들기  오늘 날짜를 위 사진처럼 파란색으로 만들어볼게요  오늘 날짜를 h1태그로 나타내줍니다. {new Date().toDateString()} import "./Header.css"const Header = () =>{ return 오늘은 🔥 {new Date().toDateString() } }export default Header; 그러면 파란 글씨를 적용할 부분은 className이 Header인 태그 안에h1 태그 입니다.   그러면 Header.css에는 어떻게 적으면 될까요?  className이 Header 이고 그 아래에 h1 태그이다. .Head..

리액트 투두리스트 만들기 (0편) : Header UI 만들기

안녕하세요 리액트로 투두리스트를 만들어봅시다.    만들어볼 TodoList는 다음과 같습니다! 이 글은 한입크기 리액트 인프런 강의를 기반으로 합니다.    1. 요소 간격 Gap (css) 주기  우선 Header, Editor, List 이렇게 3개의 컴포넌트를 만들어줍니다.  자 이렇게 3개의 컴포넌트를 App.jsx에서 호출해줍니다.그리고 이것들을 묶는 div 태그가 있죠 ?여기에 CSS를 적용해줄거에요  왜냐하면 각 요소별로 간격을 주고 싶기때문이죠  className은 Css 파일에서 . (점) 으로 제어할수있어요 .App.css에 들어가서 className이 App인 요소들의 css를 수정하여봅시다.   display : flex는 유연하게 요소의 배치 조절을 가능하게 합니다. flex-d..