나디아 성장 일기

📌 Arlet창 UI 만들기 ✨ UI 만드는 단계 1. HTML/CSS로 미리 디자인 2. 언제, 어떻게 보여줄 지 JS로 구현 목차 1. JS로 HTML 조작하는 법 2. function 함수 3. class로 찾기 4. event 실행하기 📌 JS로 HTML 조작하는 법 document.getElementById("변경할 html의 id").변경 요소 = "변경 내용"; : 변경할 html의 id의 요소를 찾아 내부의 html 변경 요소를 "변경 내용"으로 변경 HTML 요소 ⇒ Element getElementById("변경할 html요소의 id") ⇒ 셀렉터(Selector) document.getElementById("hello").style.color = "red"; 📌 JS 조작 문법 HTM..

📌 object-fit : 요소의 크기에 맞게 태그와 태그의 크기를 조정하는 속성 📍속성 contain 비율을 유지하면서 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절한다. 딱 맞추기 때문에 남는 공간이 발생할 수 있다. cover 비율을 유지하면서 요소 콘텐츠 박스를 가득 채운다. 비율이 맞지 않으면 일부가 잘린다. fill 기본값 박스 크기에 맞춰 요소 크기를 조절한다. none 크기 조절 ❌ scale-down none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택한다. 출처 object-fit - CSS: Cascading Style Sheets | MDN CSS object-fit 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인..