Frontend(2)
-
DOM에 대하여
DOM 이란? 공식문서에서는 DOM 이란 HTML, XML 프로그래밍을 위한 인터페이스 정도로 묘사하고 있다. HTML 문서는 여러개의 DOM들의 Tree 형태로 구성되고 있다. DOM 에 어떻게 접근할 수 있을까? 일단 DOM은 프로그래밍 언어에 독립적이다. 즉 어떤 언어로도 DOM을 다룰 수 있다. 하지만 주로 Javascript 를 이용한다. DOM의 대표적인 인터페이스는 무엇이 있을까? Node는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. DOM들을 트리화하여 관리하기 위해 childNodes(), firstChild, lastChild nextSibling parentNode 같은 속성들과 appendChild(), insertBefor..
2022.09.02 -
HTML Layout 만들기 (flexbox)
1차원 Layout을 위한 Flexbox 언제 Flexbox를 사용하는가? 한 번에 하나의 차원 레이아웃을 다룰 때, 즉 하나의 행이나 열의 배치를 다룰 때 사용한다. 레이아웃 내 아이템의 공간배분, 정렬을 위해 사용한다. 여담: 2차원 레이아웃은 그리드 레이아웃을 사용하는 것이 일반적이다. 주 축(Main axis)과 교차 축(Cross axis) Flex는 Main axis와 Cross axis라는 개념을 갖고 있다. Main axis는 flex-direction 에 의해 조정된다. row 의 경우 주 축은 inline 으로 배치되고, column의 경우 주 축은 block방향으로 상단에서 하단으로 블록 방향을 따른다. Cross axis 의 경우 Main axis에 수직 방향으로 축이 형성된다. F..
2022.08.31