HTML에서 웹 페이지의 구성 요소를 정의하는 데 사용되는 두 가지 주요 요소 유형
인라인(Inline)요소와 블록(block)요소
두 유형의 요소는 웹 페이지 레이아웃과 구조를 제어하는 데 중요한 역할을 한다.
01. 블록(Block) 요소(Element)
<div>div</div>
<p>paragraph</p>
<h1>heading1</h1>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
- 블록 요소는 웹 페이지에서 콘텐츠를 구성하는 데 주로 사용된다.
- 예로, <div>, <p>, <h1>, <ul>, <li> 등이 있다.
- 블록 요소는 화면의 가로 폭을 모두 차지하며, 한 줄에 하나씩 배치된다.
- 블록 요소는 위에서 아래로 쌓이며, 다른 블록 요소와 수직으로 정렬된다.
- 블록 요소는 일반적으로 다른 블록 요소나 인라인 요소를 포함할 수 있다.
- 블록 요소는 width(너비), height(높이), margin(마진), padding(패딩) 등의 CSS 속성을 조절하여 디자인을 변경할 수 있다.
📍출력물
divparagraph
heading1
- list1
- list2
- list3
위 출력물에서 보다시피 각 태그가 한줄씩을 차지하고 있고 기본인 왼쪽정렬로 구성되어있다. ul 태그는 자식 태그인 li태그를 감싸고 있으며 두 태그 모두 블록 요소의 성질을 갖고있다.
02. 인라인(Inline) 요소(Element)
<span>hi</span>
<a href="">I'm</a>
<strong>Christopher</strong>
<em>, How are you?</em>
- 인라인 요소는 텍스트 내부에 콘텐츠를 삽입하는 데 주로 사용한다.
- 예로,
<span>, <a>, <strong>, <em>등이 있다. - 인라인 요소는 콘텐츠의 일부분으로 간주되며, 화면에서 콘텐츠의 흐름에 따라 배치된다.
- 인라인 요소는 다른 인라인 요소나 텍스트와 인접하여 수평으로 배치된다.
- 인라인 요소는 일반적으로 높이와 너비를 직접 조절할 수 없으며, 내부 콘텐츠의 크기에 따라 크기가 조절된다.
- 인라인 요소는 다른 인라인 요소나 블록 요소 내에 포함될 수 있다.
📍출력물
hi I’m Christopher , How are you?
위 출력물에서 모든 태그들을 각 줄에 배치하였으나 한 문장으로 출력된 것을 볼 수 있다. 인라인 요소는 한칸, 한줄을 모두 차지하지 않고 자신의 크기만큼만 영역을 차지한다.
⭐️지난 포스팅에 이어서 html에서 웹 페이지의 구성 요소를 정의하는 데 사용되는 두 가지 주요 요소 유형들에 대해서 알아보았습니다.
