Front-End 32

[JavaScript] DOM트리와 요소 다루기

window 객체`window` 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다.어느 곳에서나 항상 접근할 수 있는 객체이기에 전역 객체, Global Object라 하며, 어떤 프로퍼티나 메소드를 사용하든 전역 객체 내부의 것이기 때문에 앞에 `window.` 생략할 수 있다.DOMDOM이란 Document Object Model의 약자로 문서 객체 모델이다.웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이며, 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.자바스크립트로 태그 선택 방법메소드결과`document.getElementById('id')`id에 해당하는 태그 하나`document.getElementByCl..

[CSS] flex-grow, shrink, basis 정리

flex grow`flex-grow`는 요소가 남는 공간을 얼마나 차지할지 결정합니다. `flex-grow: 0`은 확장되지 않고 원래 크기를 유지합니다. `flex-grow: 1`은 남은 공간을 전부 차지합니다. 두 박스에 동일하게 `flex-grow: 1`을 적용하면 남은 공간을 나눠가지고 동일한 비율로 확장됩니다. `flex-grow: 2`를 적용한 박스가 `flex-grow: 1`을 적용한 박스보다 2배 많이 확장됩니다.flex shrink`flex-shrink`는 요소가 공간이 부족할 때 얼마나 줄어들 수 있는지를 결정합니다. `flex-shrink: 0`은 줄어들지 않음. 공간이 부족해도 요소 크기가 그대로 유지됩니다. `flex-shrink: 1`은 기본 값이며, 요소가 공간에 맞게 비율대로..

Front-End/CSS 2024.09.07