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 재료를 선택했을 때 선택된 리스트를 보여주는 박스(오른쪽)가 스크롤을 내리더라도 따라다니면 좋을 것 같다 현재는 아래로 스크롤 해서 다른 재료들을 ..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 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`를 사용해 ..

바닐라 자바스크립트로 내 주방의 식료품을 관리할 수 있는 웹사이트 만들어 보기 (현재 HTML, CSS 까지 진행중) [식료품 페이지 만드는 이유] 다이어트를 하면서 식재료 신경을 많이 쓰는 편인데 주방에 뭐가 있는지 기록할 수 있는 앱 중에 맘에 드는게 하나도 없었다. 내가 불편했고 필요한 부분을 직접 만들어서 써보고 싶다는 생각으로 식료품 페이지를 만들기로 했다. [구상] 기획자와 디자이너의 역할이 굉장히 중요하다고 느낀 부분... 내가 아직 자바스크립트도 마스터 못 한 비기너라 그런가 어떻게 구성할 지 고민하는 것이 제일 시간이 많이 소요된 것 같다. 클론코딩이나 강의 중간에 작은 과제를 시키는 것은 짜여진 틀 안에서 코드를 어떻게 짤지만 고민하면 됐었는데 혼자서 포트폴리오가 될 수 있는 웹사이트를..