이 게시물은 2020년 10월 24일 수정판입니다.

이야기에 앞서

태그는 웹 브라우저에 탑재된 스타일시트에 따라 기본적인 CSS 속성을 가지고 있습니다. 그 중에, Inline과 Block이라는 속성은 화면 레이아웃과도 직접적인 연관성이 있기 때문에 꼭 이해해야 합니다. 한번 읽어보는 것 만으로 쉽게 이해할 수 있습니다.

Inline 속성

Inline 속성이란, 쉽게 말해 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향입니다. 대표적인 Inline 속성을 가진 태그로는 <a> 태그가 있습니다. 아래 예문을 보면 <a> 태그들이 줄을 넘기지 않고 한 줄에 나란히 붙는 결과를 볼 수 있습니다.

그래서 Inline 속성은, 문장안에서 사용하는 태그에 주로 기본값으로 설정되어 있습니다. 특정 문장이나 단어를 굵게 표시해주는 <strong> 태그도 Inline 속성을 가지고 있습니다.

어떤 태그가 인라인 요소인지 일일이 종류를 나열하는 것보다는, CSS를 작성할 때 아래와 같은 특징을 발견해서 파악하는 것이 좋습니다.

• 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않습니다. 인라인 요소의 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생합니다.
• 너비(width)와 높이(height) 속성이 적용되지 않습니다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰집니다.
• 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생합니다.

이와같은 특징은, 인라인 요소를 가진 태그들이 서로 나열되었을 때, 최소한 같은 줄에 같은 높이로 가지런히 위치하면서, 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 때문입니다.

Block 속성

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

블록 속성을 가지고 있는 태그는 기본적으로 너비 100%(width: 100%) 속성을 가지고 있습니다. 화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 되는 것이죠.

또한, 인라인 요소와 다르게 margin, width, height 속성을 정의하면 모두 적용됩니다. 모양새를 쉽게 제어할 수 있는 속성 때문에 대부분 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용합니다.

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

Inline과 Block의 합성 속성

Inline과 Block, 두 속성의 중간 단계도 있습니다. inline-block이라는 이 속성은, 인라인과 같이 한 줄에 표현하면서도 margin, width, height 속성을 정의하면 표현해 줍니다.

inline-block 속성을 기본값으로 가지고 있는 태그는 없습니다. 이 속성은 작성자의 CSS를 통해 inline-block임을 선언해 주어야만 합니다. 아래는 이전에 알아 본 inline 속성의 특징입니다. inline-block 속성에서는 어떻게 바뀌었는지 살펴보세요.

• 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의할 수 있습니다. inline-block 요소의 상, 하 여백을 margin과 line-height 두가지 속성 모두를 통해 제어할 수 있습니다.
• 너비(width)와 높이(height) 속성을 정의할 수 있습니다. 기본적으로는 태그가 품고 있는 내부 요소의 부피에 맞춰집니다만, 너비와 높이를 지정하면 이 값 또한 표현됩니다.
• inline-block 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생합니다. 하지만, margin-left나 margin-right를 사용하면 여기에 추가로 여백을 줄 수 있게 됩니다.

CSS에서 p { display: inline-block }과 같이 정의하면, 기존의 inline 혹은 block 속성의 태그가 inline-block 속성으로 변경됩니다.

지금 당장 이 속성의 활용 예제를 볼 필요는 없습니다. 인라인 속성의 태그와 블록 속성의 태그를 사용하다보면 언젠가 inline-block 속성이 필요함을 느끼게 됩니다. 그때 다시한번 이 글을 읽어본다면 활용 용도를 확실히 알 수 있게 됩니다.

Inline과 Block 속성 태그 표기시 주의할 점

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

BAD

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

GOOD

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

부득이한 경우에는 Inline 속성의 태그를 CSS에서 span { display: block }과 같이 정의하여 임의로 block 속성으로 변경할 수 있지만, 표준을 지키면서도 여러분이 원하는 모든 것을 표현 할 수 있습니다. 각종 태그와 CSS 속성을 정의하다보면 차차 익힐 수 있으므로, 평소에는 항상 Inline이 Block보다 작은 개념임을 잊지마세요.

<a> 태그와 같은 일부 인라인 요소는 블록 요소를 품을 수도 있지만, 여기서는 깊이있게 다루지 않습니다.