Dev Diary

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

개인 웹 페이지를 만들어보고 있던 중에 5일 차에 배웠었던 position 속성(property)의 sticky를 사용해보면 좋을 것 같아서 다시 지난 학습을 돌아보았다 position에 대한 정의는 MDN을 참고하시길 position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org 재료를 선택했을 때 선택된 리스트를 보여주는 박스(오른쪽)가 스크롤을 내리더라도 따라다니면 좋을 것 같다 현재는 아래로 스크롤 해서 다른 재료들을 ..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 ✅오류 내용 분명히 아래 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..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 CSS Diner 사이트를 통해 Selectors 연습을 하고 있다 그 중 level 18 에서 이해가 가지 않는 부분들이 있어서 좀 더 파고들어 보려고 한다 :nth-child 자식 요소 선택을 사용하여 해결하면 되는 일이다 위 예시를 참고하여 응용해보았다 div plate:nth-child(3) 응? 안 되네? (div가 여러개 있는 것이 아니라 하나만 있어서 div를 선택해보았다) .table plate:nth-child(3) 얘도 안 되네?... :nth-child(3) 이 코드로만 된다 그런데 위 예시를 보면 EVERY element 를 대상으로 하는 것 같은데 만약 div가 여러개 있다면 `:nth-child`를 사용해 ..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 /* 체크 리스트에 마우스 올려두었을 때*/ 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..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 [SEO] : 검색엔진 최적화 우선 SEO는 많이 들어본 것이기 때문에 SEO 부터 살펴보려고 한다 IT지식을 공부하는 건데 영어 공부도 동시에 되는 것 같다... 아 내 골이야 organically를 저렇게 사용하는 거라니.. 유기적이라는 단어 자체도 넘 어렵다 문맥상 왜 유기적이라는 단어가 사용되는지 궁금해서 챗지피티 선생님한테 물어봄 궁금한 건 그 때 그 때 해결봐야 하는 편이라 진도가 참 느린 편... 따로 노트에 기록해놨다가 한꺼번에 공부하는 시간을 가져야 하나 어쨌든 이제 이해가 확 됨 과일이나 채소에서 organic 이라는 단어를 많이 사용하는데 그게 natural 적인 거기도 하니까 이 문맥에서는 'naturally'..