개발 무지렁이

vh (view height) 보여주는 크기만큼 꽉차게 💡 min-height: 100vh? 화면높이와 같거나 크도록 (더 늘어날 여지가 있다) [index.html] 1차메뉴아이템 1 1차메뉴아이템 2 1차메뉴아이템 3 메인 [style.css] #container { min-height: 100vh; display: flex; flex-direction: column; } #main { flex-grow: 1; } 📌 푸터(footer) : footer는 화면 밑에 딱 붙어야 한다. (main content의 크기와 상관없이) 최소높이를 화면높이만큼 설정해놓고, main을 flex-grow로 커질수 있는만큼 커지게 하면 메인의 크기가 얼마큼이던 footer는 항상 화면 밑에 붙는다.

nth-child() div:nth-child(1) {} # div이면서, 전체 태그 기준 첫번째 child div:first-child {} div:nth-last-child(1) {} # div이면서, 전체 마지막 태그 기준 첫번째 child div:last-child {} div:nth-child(2n+1) {} # div이면서, 전체 태그 기준 홀수번째 child div:nth-child(2n) {} # div이면서, 전체 태그 기준 짝수번째 child

display: inline-block img태그 ◻️ 너비: 너비가 설정되어 있지 않다면 최소한으로 줄어든다 ◻️ 높이: 높이가 설정되어 있지 않다면 최소한으로 줄어든다 🎯 목적: 글자화 ✒️ 라인: 한 줄에 최대한 많이 📶 정렬: 부모의 text-align에 의해 정렬 display: inline a태그, span태그 ◻️ 너비: 너비가 설정되어 있지 않다면 최소한으로 줄어든다 ◻️ 높이: 높이가 설정되어 있지 않다면 최소한으로 줄어든다 🎯 목적: 글자화 ✒️ 라인: 한 줄에 최대한 많이 📶 정렬: 부모의 text-align에 의해 정렬 ⚠️ 주의: width, height, margin, padding 속성이 제대로 적용되지 않는다. display: block ◻️ 너비: 너비가 설정되어 있지 않다..

position: static; 🧍‍♂️ position: absolute; 👻 유령 👻: 다른 element와 상관없이, 화면 기준으로 움직인다 -> 겹칠 수 있다 * 유령화 (겹칠 수 있다) * 유령감옥 (자손 유령 👻을 가둘 수 있다) 🚩top / bottom / left / right -> default: auto (위치를 정해주기 전까지는 흐름에 맡긴다)position: relative; 🦹‍♂️ 사람 🦹‍: 본인은 아무 변화가 없지만 유령을 가둘 수 있는 능력 * 유령감옥 (자손 유령 👻을 가둘 수 있다)