[TIL] HTML - Block & Inline

 

 

Block 

- 블록요소는 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다 (부모 요소의 전체 공간을 차지 한다) 

- 상자를 아래로 쌓는다고 생각하면 간단 !

- div, h1, p 태그가 있음

 

Inline

- 인라인 요소는 바로 이전 요소가 끝나는 지점부터 시작하며, 요소의 내용(content)만큼만 크기를 갖는다 

- 인라인 요소는 블록 요소를 포함할 수 없다 

- span, img, a, strong 태그가 있음 

 

 

 

 

아래 그림을 보면 이해하기가 쉽고, VS code에서 직접 코드를 쳐보면 바로 이해가 되어요

블록요소를 갖는 태그 (대표적으로 div), 인라인요소를 갖는 태그 (대표적으로 span)를 각각 작성해 주고 

background-color를 지정해 주면 한 눈에 비교가 된다 

 

박스1은 block 요소이기 때문에 배경색이 전체를 차지하고 있고, 

박스2는 inline 요소이기 때문에 배경색이 컨텐츠 부분만 차지하고 있다 

 

 

 

 

HTML에서 엄청 기본적인 개념이지만 처음엔 나도 몰랐던 것.. 

요소가 블록인지 인라인인지 아는 것은 매우 중요하다 (css로 block-> inline으로 변경하여 속성을 적용할 수 있다) 

추후에 css를 적용할 때 이 개념을 제대로 모르면 내가 원하는 꾸밈(?)이 안되고 모든 것이 꼬여버릴 수 있기 때문이다