Leeyanggoo
[HTML] 블록 레벨(Block-level) vs 인라인(Inline) 본문
블록 레벨 요소Block-level Elements
블록 레벨 요소는 일반적으로 목록·표 등을 포함하고 있으며, 문단으로 큰 공간을 차지하고 있습니다.
여기서 말하는 "문단Parahraph"이란 블록 레벨 요소가 기본적으로 가지고 있는 줄이 바뀌는 특성을 뜻합니다.
블록 레벨 요소는 새로운 줄에서 시작하기 때문에 '세로'로 쌓이는 형태를 보입니다.
See the Pen block_1 by leeyanggoo (@leeyanggoo) on CodePen.
위의 코드는 "블록 레벨 요소는 줄이 바뀌는 특성을 가지고 있습니다."라는 하나의 문장을 블록 레벨 요소 중 하나인 <p>태그를 이용해 세 문단으로 나눈 것입니다.
블록 레벨 요소가 차지하는 "문단의 공간"이란 부모 요소의 좌우 전체를 차지하여 블록을 만든다는 것입니다.
블록 레벨 요소는 하나의 박스라고 생각하면 됩니다. 코드로 예를 들어보겠습니다.
See the Pen block_2 by leeyanggoo (@leeyanggoo) on CodePen.
30px의 같은 높이height를 가진 3개의 블록div이 있다고 할 때 너비width값을 준 'block1'과 'block3'은 각각 지정된만큼 너비를 차지합니다.
하지만 너비를 제한하지 않은(width가 없는) 'block2'는 블록 레벨 요소답게 부모 태그의 모든 좌우 전체를 차지하는 걸 볼 수 있습니다.
블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
인라인 요소Inline Elements
인라인 요소는 일반적으로 텍스트나 링크·이미지 등을 포함하고, 할당된 공간만을 차지하며 문장을 구성합니다.
여기서 말하는 "문장Sentence"이란 인라인 요소는 블록 레벨 요소와 다르게 줄을 바꾸지 않는다는 것을 뜻합니다.
인라인 요소들은 줄을 바꾸지 않기 때문에 여러 인라인 요소가 '가로'로 나열되는 형태를 보입니다.
See the Pen Inline_1 by leeyanggoo (@leeyanggoo) on CodePen.
위의 코드는 "만들지 않으며"와 "필요한 너비만" 부분을 인라인 요소인 <span>태그를 사용해 강조하고 있습니다.
블록 레벨 요소와는 다르게 줄이 바뀌지 않고 그대로 이어지는 것을 볼 수 있습니다.
인라인 요소는 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.
인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.
Block-level vs Iiline
See the Pen In vs Block by leeyanggoo (@leeyanggoo) on CodePen.
지금의 코드 어디서 본 것 같지만 뭔가 다르지 않나요?
인라인 요소에서 강조 표시를 맡았던 <span>태그를 블록 레벨 요소인 <p>태그로 바꾼 코드입니다.
블록 레벨 요소인 <p>코드는 줄을 바꾸고 공간을 모두 차지한 걸 볼 수 있습니다.
앞선 설명에서 블록 레벨 요소는 '단락이나 목록·표 등을 포함하며 큰 공간을 차지한다'고 하였고,
인라인 요소는 '텍스트나 링크·이미지 등을 포함하며 할당된 공간을 차지한다'라고 했습니다.
즉 더 큰 공간을 차지하는 블록 레벨 요소는 인라인 요소를 포함할 수 있지만, 작은 공간을 차지하는 인라인 요소는 블록 레벨 요소를 포함하지 못한다는 뜻입니다.
다시 인라인 요소의 코드를 볼까요?
이미 블록 레벨 요소의 태그인 <div>태그가 인라인 요소 태그인 <span>을 포함하고 있었다는 사실!!
다시 쭉 살펴보시면 눈치채실지도 몰라요. :)
더 다양한 블록 레벨 및 인라인 요소 알아보기
블록 레벨 요소(Block-level elements) : https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
인라인 요소(Inline elements) : https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
