[온보딩트랙]블록요소와 인라인 요소

 

 

 

Block Element(블록 요소)

 

개별 요소마다 줄을 바꾸며, 부모 요소 너비의 가로 길이를 차지한다.

내용과 별개로 자신의 영역을 가진다.

<h1> ~ <h6>, <p>, <div> 등이 있다.

 

블록 요소의 가로 길이를 줄이고, 새로 추가한다고 해도 옆에 생기지않는다.

 

width와 height로 요소의 크기를 조절할 수 있다.

---

 

Inline Element(인라인 요소)

 

한 줄에 표시되며, 태그로 감싸진 내용만큼만(콘텐츠만큼) 영역을 차지한다.

<a>, <img>, <span> 등이 있다.

 

HTML에서 인라인 요소 밑에 인라인 요소를 새로 추가하면

새로운 줄이 아니라 옆쪽으로 생기는 것을 알 수 있다.

 

width와 height로 요소의 크기를 조절할 수 없다.

margin과 padding은 좌우에만 적용 가능하다.

---

Inline-Block Element(인라인-블록 요소)

 

인라인과 블록 요소의 특징을 모두 포함하는 방식이다.

 

인라인 요소라서 콘텐츠 양만큼 전체 너비가 자동 조절되고,

부모 요소에게 지정된 text-align 속성에 영향을 받아 정렬에 용이하다.

 

블록 요소라서 width와 height값을 지정할 수 있고, 박스 모델을 자유롭게 사용할 수 있다.