[기술면접준비] HTML의 inline 요소와 block 요소의 차이점과 예시

HTML 요소는 브라우저에서 표시되는 방식에 따라 inline 요소와 block 요소로 구분됩니다. 이 두 요소는 각각 다음과 같은 특징을 가지고 있습니다.

Block 요소

• 새로운 줄에서 시작하며, 이전 요소와 수직으로 쌓입니다.
• 가로 너비가 부모 요소의 너비를 모두 차지합니다.
• 높이와 너비를 지정할 수 있습니다.
• padding, margin, border 속성을 사용하여 여백을 조절할 수 있습니다.
• <div>, <h1> ~ <h6>, <p>, <ul>, <ol>, <nav>, <header>, <footer> 등이 대표적인 block 요소입니다.

Inline 요소

• 줄 내에서 시작하며, 이전 요소와 수평으로 연결됩니다.
• 가로 너비가 내용의 크기만큼만 차지합니다.
• 높이와 너비를 지정할 수 없습니다.
• padding, margin, border 속성을 위아래 여백만 조절할 수 있습니다.
• <a>, <span>, <em>, <strong>, <img>, <input> 등이 대표적인 inline 요소입니다.

 

• Inline 요소와 Block 요소의 차이점은 다음과 같습니다.
  
  Inline 요소는 한 줄에 여러 개가 올 수 있지만, Block 요소는 한 줄 전체를 차지합니다.
  Inline 요소는 width와 height를 가지지 않지만, Block 요소는 가질 수 있습니다.
  Inline 요소는 일반적으로 부가적인 스타일링을 위해 사용되지만, Block 요소는 컨텐츠의 구조를 나타내기 위해 사용됩니다.

 

• inline 요소와 block 요소는 서로 중첩될 수 있습니다. 예를 들어, <a> 요소는 inline 요소이지만, <div> 요소와 함께 사용될 경우 <a> 요소는 <div> 요소의 자식 요소로 포함될 수 있습니다.
  
  이러한 inline 요소와 block 요소의 특징은 웹 페이지를 구성하는 데 매우 중요합니다. 레이아웃을 구성하는 데에는 block 요소가 더 효과적이고, 텍스트나 링크 등을 구성하는 데에는 inline 요소가 더 적합합니다. 따라서, HTML을 작성할 때 각 요소의 특징을 고려하여 적절하게 사용해야 합니다.

 

 

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해봅시다.

<div>
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
  <a href="#">Click here</a>
</div>

위 코드에서 <div> 요소는 block 요소이므로 새로운 줄에서 시작하며, 가로 너비는 부모 요소의 너비를 모두 차지합니다. 따라서, <h1> 요소는 새로운 줄에서 시작하고, 전체 너비를 차지합니다. <p> 요소도 새로운 줄에서 시작하며, <h1> 요소와 수직으로 쌓입니다. 마지막으로, <a> 요소는 inline 요소이므로, 줄 내에서 시작하며, 이전 요소와 수평으로 연결됩니다.

이러한 구조적인 차이 때문에, 위 코드에서 <h1>과 <p> 요소는 블록 단위의 요소이므로 가로 너비를 조절할 수 있고, 여백 등의 스타일링을 더 자유롭게 조절할 수 있습니다. 반면에, <a> 요소는 inline 요소이므로 가로 너비를 조절할 수 없으며, 여백 등을 위아래로만 조절할 수 있습니다. 이러한 특징을 고려하여, 웹 페이지를 구성하는 데 적절한 요소를 선택하여 사용해야 합니다.