인라인 구조와 블록구조 알아보기

이미지 출처 : https://big-huni.tistory.com

인라인 레벨 요소 (Inline Element)

인라인 요소는 마크업을 할떄 가로롤 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다.

하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다.

 

인라인 요소 특징

1. 인라인 요소는 줄 바꿈이 일어나지 않습니다.
2. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.

블록 레벨 요소(Block-level Elements)

블록 레벨 요소는 마크업을 할 떄 줄이 바뀌는 특성을 가지고 있습니다. 블록요소는 하나의 박스라고 생각하면 됩니다.

하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다.

 

블록 요소 특징

1. 블록 레벨 요소는 줄 바꿈이 일어납니다.
2. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다.

 

블럭요소(block element)와 인라인요소(inline element)의 종류

• - 블럭요소 : <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등
  - 인라인요소 : <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img>

특징 및 주의점

• - 블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있습니다. 인라인요소는 내부에 블럭요소를 포함할 수 없습니다.
• - 블럭요소들 중에서도 인라인요소만 포함할 수 있는 것들이 있습니다. : <h1>~<h6>,<p>
• - 인라인요소를 css로 블럭화하여 내부에 블럭요소를 포함시킬 수도 있습니다. 브라우저에 보여지는데는 아무런 문제가 없지만 유효성에 어긋납니다.