📗Inline, Block, Inline-block
Block vs Inline Block
HTML 요소들은 크게 두 가지로 분류할 수 있습니다. 첫번째는 Block 요소, 그리고 두번째는 Inline 요소입니다. 이 두 가지의 차이점은 굉장히 중요합니다. 그렇다면 그 차이점은 무엇일까요?
Block Elements
Block 요소들은 화면상에서 항상 새로운 줄에서 시작하고, 위 아래에 서로 쌓이는 형식으로 나타납니다. 그리고 사용 가능한 최대치의 폭을 차지하게 됩니다.
아래의 예제를 한번 보시기 바랍니다. HTML 상으로는 한 줄에 2개의 p
태그를 작성하였습니다. 하지만 화면에서 보시면, 두 개의 p
태그가 모두 전체 화면의 폭만큼 넓게 자리잡은 상태로 각각의 새로운 줄에 나타나는 것을 볼 수 있습니다. p
태그는 브라우저 상에서 기본으로 Block 요소이기 때문입니다.
Block 요소들은 또 다른 Block 요소를 자식으로 가질 수도 있고, Inline 요소를 자식으로 가질 수도 있습니다. 그에 대한 제약은 없습니다. 조금 다른 예제를 한번 볼까요?
div
또한 Block 요소입니다. 폭이 화면의 폭만큼 넓지 않은 이유는 width: 50%;
라는 설정을 했기 때문입니다. 그리고 div
요소 내부에는 p
태그가 두 개 들어있습니다. 해당 p
태그는 Block 요소이기 때문에 자신들이 차지할 수 있는 가장 최대치의 폭을 차지하게 됩니다. 양 옆에 약간의 노란색 공간이 보이는 것은 div
요소에게 주어진 padding: 10px;
때문입니다.
Inline Elements
Inline 요소들은 새 줄에서 나타나지 않습니다. 일반적인 문서에서의 텍스트 흐름과 동일하게 동작합니다. 하나에 이어 또 다른 하나가 줄줄이 이어 붙어서 나타나는 형식입니다. 그리고 요소 내부 컨텐츠의 양만큼만 폭을 차지하게 됩니다. Inline 요소들은 또 다른 Inline 요소들을 자식으로 포함할 수 있지만, Block 요소를 자식으로 품을 수는 없습니다. 예제를 통해 확인해볼까요?
span
태그는 대표적인 Inline 요소 중 하나입니다. 화면 상으로 초록색 배경이 적용된 부분들이 보이시나요? 각각의 Inline 요소들입니다. 새로운 줄로 넘어가지 않고 텍스트의 흐름 상에 자연스럽게 적용됩니다.
Using Inline Block
두 번째 방법은 display
속성에 해당하는 값 중 하나인 inline-block
을 이용하는 방법입니다. inline-block
을 이용하면, 여러 개의 Block 요소들을 마치 Inline 요소처럼 한 줄에 이어서 배치할 수 있습니다. 아래 예제를 보시면 이전 예제와 약간의 스타일 차이는 있지만, Block 요소를 한 줄에 나란히 배치한 것을 볼 수 있습니다. 이전과는 다르게 <section>
요소와 <aside>
요소에 display: inline-block;
을 주었습니다.
Last updated