1. CSS - display

바깥쪽

block

• 한 줄을 차지한다. 즉, 자신의 위아래로 줄바꿈이 일어난다.
• 주로 섹션을 나누는데 사용되며, 화면 전체의 가로폭을 차지한다.
• width, height, margin, padding 지정 가능
• 대표적인 블록 요소로는 ＜div＞, ＜h1~h6＞, ＜header＞, ＜header＞, ＜section＞ 등

inline

• 줄 바꿈 없이 요소를 배치하며, 요소의 크기만큼만 공간을 차지한다.
• 인라인 요소는 주로 텍스트 내에서 스타일링을 적용할 때 사용된다.
• 인라인 요소는 상하의 마진이나 패딩은 적용되지 않고, 좌우의 마진이나 패딩만 적용된다.
• width, height 지정이 불가능하다. 이속성은, 내용의 크기에 의해 결정된다.
• 대표적인 인라인 요소로는 ＜span＞, ＜a＞, ＜button＞, ＜img＞ 등

안쪽

flex

grid

table

flow-root

flow

ruby

DOM (Document Object Model)

웹 페이지를 프로그래밍 언어로 조작할 수 있게 하는 인터페이스이다.

DOM은 웹 페이지의 구조를 표현하며, 이는 HTML 문서를 브라우저에서 로드할 때 생성되는 것이다. HTML 문서의 각 요소는 DOM의 노드(node)라는 객체로 표현되며, 이러한 노드들은 트리 구조를 형성한다. 이 트리 구조를 'DOM 트리'라고 부른다.

DOM 트리는 HTML 문서의 모든 부분을 객체로 표현하므로, JavaScript와 같은 스크립팅 언어를 사용하여 이러한 객체들을 선택, 수정, 추가 또는 삭제할 수 있다. 예를 들어, 요소의 텍스트 내용을 변경하거나, 스타일을 동적으로 바꾸거나, 새로운 요소를 생성하고 기존 요소를 삭제하는 등의 작업을 수행할 수 있다.

따라서 DOM은 웹 페이지의 동적인 행동을 가능하게 하는 핵심 기술이다.

Node

노드(Node)는 컴퓨터 과학의 여러 영역에서 사용되는 개념으로, 대개 데이터 항목과 이를 연결하는 링크(link)를 포함한 기본적인 데이터 단위를 가리킨다. 많은 종류의 자료구조, 특히 그래프와 트리 구조에서 노드는 중요한 역할을 한다.

웹 개발의 맥락에서 노드는 특히 Document Object Model (DOM)에서 중요한 개념이다. DOM에서 노드는 HTML 문서의 각 부분을 대표하는 객체이다. 예를 들어, HTML 요소, 텍스트, 주석, 속성 등은 모두 DOM 트리의 노드가 될 수 있다.

각 노드는 DOM 트리에서 다른 노드와의 관계를 통해 정의된다. 예를 들어, ＜p＞ 요소는 부모 노드로서 자식 노드인 텍스트 노드를 포함할 수 있고, 이는 DOM 트리에서 ＜p＞ 요소 노드가 텍스트 노드의 부모 노드임을 의미한다. 또한, 위 그림을 보면 H1과 P는 BODY라는 같은 부모를 두었는데, 이럴 경우 이 두 노드의 관계는 형제관계(sibling)이라 한다.

이러한 노드 구조는 JavaScript와 같은 스크립팅 언어를 통해 웹 페이지의 내용, 구조, 스타일을 동적으로 변경할 수 있게 해주는 기반이 된다.

Event

웹에서 이벤트는 사용자 입력(마우스 클릭, 키보드 키 입력 등) 또는 브라우저의 수명주기(페이지 로드, 페이지 언로드 등)와 같은 다양한 사건을 나타낸다. 이벤트가 발생하면 브라우저는 이를 처리하기 위해 이벤트를 생성하고, 이 이벤트는 Document Object Model(DOM)을 통해 전파된다.

표준 DOM 이벤트에서 정의한 이벤트 흐름(처리 과정)엔 다음 3가지 단계가 있다.

• 캡쳐링 단계(Capturing Phase): 이벤트가 최상위 노드에서 시작하여 이벤트의 대상이 되는 요소까지 내려간다. 이 단계에서는 이벤트가 어디에서 발생했는지를 찾는 작업이 이루어진다.
• 대상 단계(Target Phase): 이벤트가 실제로 대상 요소에 도달한다. 이 시점에서 대상 요소에 등록된 이벤트 핸들러가 실행된다.
• 버블링 단계(Bubbling Phase): 이벤트가 다시 상위 노드로 이동한다. 이 단계에서 이벤트는 DOM 트리를 따라 위로 "버블링"되며, 각 노드에 연결된 이벤트 핸들러가 호출된다.

이러한 이벤트 전파 메커니즘은 JavaScript와 같은 스크립팅 언어를 사용하여 특정 이벤트에 반응하는 코드를 작성할 수 있게 해준다. 예를 들어, 버튼 클릭 이벤트에 반응하여 특정 DOM 요소의 스타일을 변경하거나, 새로운 요소를 추가하거나 기존 요소를 삭제하는 등의 작업을 수행할 수 있다.

CSS Overflow

CSS의 overflow 속성은 HTML 요소의 컨텐츠가 그 요소의 box를 넘어갈 때 어떻게 처리해야 하는지를 지정한다. overflow 속성에는 다음과 같은 값들이 있다.

• visible (기본값): 컨텐츠가 넘쳐도 그대로 보여집니다. 즉, 박스를 넘어서 표시되며, 스크롤바는 생기지 않는다.
• hidden: 이 설정이면, 박스를 벗어난 부분은 보이지 않는다. 컨텐츠가 넘쳐도 잘리게 되며, 스크롤바는 생성되지 않는다.
• scroll: 이 설정이면, 박스를 벗어난 컨텐츠를 위한 스크롤바가 항상 생성된다. 실제로 컨텐츠가 넘치지 않아도 스크롤바는 보이게 된다.
• auto: 이 설정이면, 컨텐츠가 넘치면 스크롤바가 생성되어 넘치는 부분을 볼 수 있게 해준다.

또한, 'overflow-x' 와 'overflow-y' 속성을 사용하여 각각 가로축과 세로축에 대한 오버플로우를 따로 설정할 수도 있다.

overflow가 의미있게 동작하려면, 컨테이너의 크기를 설정하거나 white-space를 nowrap으로 설정하여, 넘어가는 상황을 만들어야 한다.

CSS

/* 가로 스크롤만 활성화하고, 세로 스크롤은 사용하지 않음 */
div {
  overflow-x: auto;
  overflow-y: hidden;
}

위의 CSS 설정은 ＜div＞ 요소의 내용이 가로 방향으로 넘치게 되면 스크롤바가 생성되고, 세로 방향으로 넘치게 되면 그 내용이 잘리도록 한다.

JavaScript

// 선택한 요소를 가져옴
var element = document.getElementById('myDiv');

// overflow-x와 overflow-y 설정
element.style.overflowX = 'auto';
element.style.overflowY = 'hidden';

// overflow-x와 overflow-y 값을 가져옴
console.log(element.style.overflowX);  // 'auto'
console.log(element.style.overflowY);  // 'hidden'

이 JavaScript 코드는 'myDiv'라는 id를 가진 요소를 선택하고, 해당 요소의 overflow-x를 'auto'로, overflow-y를 'hidden'으로 설정합니다. 그리고 console.log를 사용하여 각각의 속성값을 출력한다.