Dev Diary

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 Vanilla JavaScript로 todolist와 같은 로직의 shopping list 를 구현해보았다. ❗️[문제 발견] 그런데 리스트를 수정하는 과정에서 오류가 발생했다. script.js:487 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler? at updateTitle (http://127.0.0.1:5501/script.js:487:24) at HTMLInputEl..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 선택된 리스트 개수가 얼마 없을 때는 이 버튼들이 박스 안에 잘 들어와있는데 리스트가 많아질수록 점점 내려오고 결국엔 밖으로 div 밖으로 나가 버린다 Your Ingredients No selected ingredients to my fridge recipe 분명 button을 감싸는 div `link-ingredient` 는 선택된 재료 박스 부모 div `main-container-2` 안에 있는데도 부모 div 밖으로 튀어나갈 수 있구나...를 알게 되었다 지금 보니까 버튼들 뿐만아니라 리스트가 넘쳐 흐르는 문제점도 있다 우선은 버튼부터 박스 안에 고정되게 처리해보자 1️⃣ child div의 위치를 parent div 안에..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 ✅오류 내용 분명히 아래 CANNED/JARRED 에서 체크박스를 클릭을 했지만 첫 번째 CONDIMENTS 카테고리에 있는 체크박스가 체크가 된다 아래에 다른 카테고리에서 뭘 눌러도 첫 번째 condiments 에서만 체크가 되는데 왜그럴까 오래 고민했지만 답이 바로 보이지가 않았다 그러다가 오늘 드디어 발견함! let condiment = ['Honey', 'Red pepper paste', 'Mayonnaise', 'Ketchup', 'Soy Sauce', 'Chilli Powder', 'Fish Sauce', 'Chilli Sauce', 'Barbeque Sauce', 'Hot Sauce', 'Mustard', 'Balsam..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 /* 체크 리스트에 마우스 올려두었을 때*/ label:hover { color: rgb(48, 178, 48); } input[type=checkbox], input[type=checkbox]:hover { -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; outline: none; content: none; } input[type=checkbox]:before { content: "✓"; font-size: 18px; color: transparent !important; display: block; width: 15px; height: 15px; bor..