WEB

카카오테크캠퍼스 과제를 수행하던 중 새로고침 시 값이 변경되지 않도록 하는 방법이 궁금해 찾아보았다. 기존 코드const [todos, setTodos] = useState([])const [filter, setFilter] = useState('all')... {todos.length > 0 && ( )}  기존코드는 사용자로부터 TodoInput을 받아와서 addTodo 함수를 통해서 새로운 리스트를 형성한다.  이 로직은 addTodo 함수를 통해 input으로 받은 값을 띄우는 것일 뿐이다.그래서 브라우저의 local storage 영역에 들어가면 아무런 값이 저장되어 있지 않다.그래..

event.preventDefault()가 뭐지 a 태그나 submit 태그는 누르게 되면 href를 통해 이동하거나 창이 새로고침이 되는데, 이때 preventDefault를 사용해서 동작을 멈출 수 있다. const checkbox = document.querySelector("#id-checkbox");checkbox.addEventListener("click", checkboxClick, false);function checkboxClick(event) { let warn = "preventDefault() won't let you check this!"; document.getElementById("output-box").innerHTML += warn; event.preventDefaul..

이게 뭔데 ㄴ미아ㅓ리마어 마지막에 export default App; 하고서 엔터안쳐서 문제 생긴 거였음. 엔터치면 해결됨

May 10 2022 1. 태그의 크기 CSS 👉 각각의 컨텐트의 크기를 설정할 수 있다. 정리하자면, 태그의 크기는 쓰임과 성격에 따라 다르다. 화면 전체를 사용하거나 해당 태그의 크기만큼만 사용 width 혹은 height로 크기 변경 가능 margin : border 간의 간격 padding : content와 border의 간격 참고 https://www.youtube.com/watch?v=ONcmkf07EuI&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62 https://www.quora.com/How-can-I-understand-Positioning-Padding-and-Margins

May 10 2022 1. 태그 선택자 a { /* selector */ /* Declaration */ color:red; /* property:value */ } 👉 'a' 태그가 걸려있는 모든 부분에 적용되는 조건 예를 들면, a { color:red; font-size:45px; /* 폰트 사이즈 */ text-align:center; /* 폰트 정렬 */ } 위와 같이 'a' 태그의 폰트 색, 사이즈, 정렬을 설정할 수 있다. 2. 클래스 선택자 . .saw { color:gray; } . . HTML CSS JavaScript 👉 'saw'라는 이름의 클래스에 적용되는 조건 .saw { color:gray; } .active { color:red; } . . HTML CSS JavaScript..