CSS Block/Inline

Block구조

Block속성은 Inline과 달리 한 줄에 나열되지 않고 그 자체로 한줄을 완전히 차지합니다. 대표적인 블록 요소로 <p>태그가 있습니다.

Block구조 특징

  • 기본적으로 너비 100&(width:100%)속성을 가지고 있습니다.
  • 인라인 요소와 다르게 margin, width, height 속성이 모두 적용됩니다.

Inline구조

Inline속성이란, 쉽게 말해 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향입니다. 대표적인 인라인 요소로 <a>태그가 있습니다.

  • 상,하단 외부 여백(margin)속성이 적용되지 않습니다. 인라인 요소의 상,하 여백은 line-height속성에 의해 발생합니다.
  • 너비(width)와 높이(height)속성이 적용되지 않습니다.
  • 인라인 속성을 가진 태그끼리 연속되는 경우 최소 간격 유지를 위해 좌,우 5px가량의 외부 여백(margin)이 발생합니다.

구별 방법

특정 태그가 블록 요소인지 아닌지 가장 쉽게 파악하는 방법은, CSS로 배경색을 입혀보는 것입니다. 만일 아래 예문과 같이 배경색이 화면 폭을 모두 차지하는 경우, 그 태그는 블록 요소 태그임을 알 수 있습니다.

<div>
<a>

Inline과 Block의 합성 속성

inline-block이라는 속성은, 인라인과 같이 한 줄에 표현하면서도 margin,width,height 속성을 정의하면 표현해 줍니다. 이 속성은 작성자의 CSS를 통해 inline-block임을 선언해 주어야만 합니다.

태그 표시기 주의할 점

Block은 Inline을 포괄하는 더 큰 개념입니다. 따라서 HTML을 마크업 할 때는 Inline속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 됩니다.

BAD
<span><p>문장입니다.</p></span>

GOOD
<p><span>문장입니다.</span></p>