HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요
블럭요소(block element)와 인라인요소(inline element)란?
- 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다.
- 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다.
블럭요소(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>
인라인(Inline) 요소:
인라인 요소는 문장이나 단락의 일부분을 나타냅니다.
인라인 요소는 콘텐츠 흐름을 방해하지 않고 가로 방향으로 배치됩니다.
너비와 높이 속성을 설정해도 적용되지 않고 외부 여백(top, bottom)은 적용되지 않고 내부 여백(left, right)만 적용됩니다.
인라인 요소 내부에 블록 요소를 포함할 수 없습니다.
블록(Block) 요소:
블록 요소는 페이지 레이아웃의 기본 구성 단위를 나타냅니다.
블록 요소는 가로 방향으로 최대 크기를 차지하며, 위아래로 줄바꿈이 일어납니다.
너비와 높이 속성, 외부 및 내부 여백(top, bottom, left, right) 모두 적용됩니다.
블록 요소 내부에 인라인 요소와 다른 블록 요소를 포함할 수 있습니다.
즉, 인라인 요소는 라인의 흐름을 방해하지 않고 문장이나 단락의 일부분을 나타내는 데 사용되며, 블록 요소는 페이지 레이아웃의 기본 구성 단위이고, 가로 길이를 최대로 차지하며 위아래 줄바꿈이 일어난다.
Q1. 인라인 요소와 블록 요소를 함께 사용할 수 있나요?
A1. 네, 인라인 요소와 블록 요소를 함께 사용하실 수 있습니다. 일반적으로 블록 요소 내부에 인라인 요소가 포함되는 경우가 많습니다.
Q2. 인라인 요소와 블록 요소를 변경할 수 있나요?
A2. 네, CSS의 display 속성을 사용하여 인라인 요소를 블록 요소로, 블록 요소를 인라인 요소로 변경할 수 있습니다.
Q3. 인라인 블록(Inline-block) 요소와는 무엇인가요?
A3. 인라인 블록 요소는 인라인 요소와 블록 요소의 특징을 모두 가지고 있는 요소입니다. 인라인 요소처럼 수평 방향으로 배치되며, 블록 요소처럼 너비와 높이 속성을 지정할 수 있습니다.
Q4. 인라인 요소의 파드를 왼쪽에 정렬하려면 어떻게 해야 하나요?
A4. CSS의 text-align 속성을 사용해 인라인 요소를 정렬할 수 있습니다. 해당 속성을 왼쪽(left)으로 설정하면 인라인 요소가 왼쪽에 정렬됩니다.
Q5. 블록 요소를 가운데 정렬하려면 어떻게 해야 하나요?
A5. 블록 요소를 가운데 정렬하기 위해 CSS의 margin 속성을 사용할 수 있습니다. 좌우 마진을 auto로 설정하면 블록 요소가 가운데 정렬됩니다.
Q6. flexbox와 grid는 인라인 요소와 블록 요소 간의 배치를 어떻게 처리하나요?
A6. flexbox와 grid는 복잡한 레이아웃에서 요소의 배치를 쉽게 조절할 수 있습니다. display: flex 또는 display: grid를 사용하면, 인라인 요소와 블록 요소의 차이는 상대적으로 중요하지 않아집니다. 요소들은 flex 아이템 또는 격자 항목처럼 작동하며, 레이아웃에 따라 쉽게 배치됩니다.
Q7. 인라인 요소와 블록 요소의 배경색을 손쉽게 변경하려면 어떻게 해야 하나요?
A7. CSS의 background-color 속성을 사용하여 인라인 요소와 블록 요소 둘 다 배경색을 변경할 수 있습니다.
Q8. 'p' 태그는 인라인 요소가 아닌 블록 요소로 간주되는 이유는 무엇인가요?
A8. p 태그는 단락(paragraph)을 나타내는 태그로, 페이지 레이아웃의 기본 구성 단위를 나타낸다고 볼 수 있습니다. 따라서 블록 요소로 간주되며, 상자 모델의 여백과 패딩 등 블록 요소의 특징이 적용됩니다.
Q9. 인라인 요소에서 다단(spanning)을 가능하게 하는 방법은 무엇인가요?
A9. 인라인 요소를 여러 줄로 나누기 위해 <br> 태그를 사용할 수 있습니다. 하지만 보통 이러한 작업은 블록 요소 등 다른 요소를 사용하여 구현하기 때문에 <br> 태그는 일반적으로 줄바꿈이 필요한 경우에만 사용합니다.
Q10. CSS에서 텍스트 아래에 선을 그어주는 속성은 무엇인가요?
A10. 텍스트 아래 선을 그어주는 CSS 속성은 text-decoration입니다. text-decoration: underline을 사용하면 텍스트에 밑줄이 추가됩니다. 이 속성은 인라인 요소에서도 적용 가능합니다.