HTML

HTML 박스 모델

HTML의 모든 요소는 '박스 모델'을 기반으로 합니다. 이 모델은 웹 페이지 상의 각 요소를 박스로 간주하며, 다음과 같은 구성 요소로 이루어져 있습니다:

내용(Content): 요소의 실제 내용이 위치하는 부분입니다.
패딩(Padding): 내용과 테두리 사이의 공간입니다.
테두리(Border): 패딩과 마진 사이를 구분하는 선입니다.
마진(Margin): 요소와 다른 요소들 사이의 외부 간격을 설정합니다.

 

디스플레이 유형

블록(Block) 요소

예시: div, p, h1
특징:
전체 너비를 차지하며, 새로운 줄에서 시작하고 끝납니다.
너비와 높이, 마진, 패딩을 조절할 수 있습니다.
페이지의 구조를 만드는 데 주로 사용됩니다.

인라인(Inline) 요소

예시: span, a, img
특징:
콘텐츠의 흐름을 방해하지 않고 배치됩니다.
기본적으로 위아래 마진이나 높이를 가질 수 없습니다.
텍스트나 이미지 같은 콘텐츠를 스타일링하는 데 주로 사용됩니다.

Inline-block

특징:
'Inline'과 'Block'의 특성을 혼합한 것입니다.
줄 바꿈 없이 다른 요소와 나란히 배치되며, 너비와 높이를 지정할 수 있습니다.
예: <button> 태그는 기본적으로 inline-block 디스플레이 유형을 가집니다.

Flex

특징:
Flexible Box 또는 'flexbox'는 1차원 레이아웃 모델입니다.
Flex 컨테이너 안의 아이템들은 가로 또는 세로 축을 따라 유연하게 배치됩니다.
웹 애플리케이션의 반응형 디자인에 유용합니다.

Grid

특징:
CSS Grid Layout은 2차원 레이아웃 시스템을 제공합니다.
페이지를 행과 열로 구성된 격자로 나눌 수 있습니다.
복잡한 레이아웃과 정렬을 쉽게 구현할 수 있습니다.

None

특징:
요소를 화면에서 완전히 숨깁니다(display: none;).
요소가 DOM에 존재하지만, 레이아웃에서는 공간을 차지하지 않습니다.

Table, Table-row, Table-cell

특징:
HTML 테이블과 유사한 레이아웃을 CSS로 구현할 수 있습니다.
table, table-row, table-cell 등의 값으로 테이블, 테이블의 행, 테이블의 셀과 같은 역할을 합니다.
전통적인 테이블 레이아웃을 CSS로 재현하는 데 사용됩니다.