Block elements
<div>, <h1>, <p>, <li>, <section>등
[참조] MDN - Block-level elements
Inline elements
<span>, <a>, <img>, <input>등
[참조] MDN - Inline elements
블록 레벨 엘리먼트 <div>태그와 인라인 레벨 엘리먼트 <span>태그를 통해
block 속성과 inline 속성의 차이점을 알아보고
또, inline-block 속성과는 또 무엇이 다른 것인지 알아보기로 하자.
우선 비교를 위해 동일한 콘텐츠를 가지고 있는 <div>와 <span>를 작성하였고
구분이 쉽도록 배경 색상을 다르게 설정해두었다.
자, 그럼 바로 결과를 확인해보자.
결과를 확인해보니 분명 <div>와 <span>은 같은 콘텐츠를 담고 있음에도 어째서인지 큰 차이를 보여주고 있다.
여기서 첫 번째 차이점이 드러나는 것이다.
block은 한 영역을 차지 하는 박스형태의 성질을 말한다.
블럭 레벨 엘리먼트는 새로운 라인에서 시작하며 사용 가능한 전체 너비를 차지한다.
즉, 상위 요소의 전체 폭을 차지하게 된다는 의미이다.inline은 컨텐츠의 폭만큼 차지하는 성질을 말한다.
그렇기 때문에 기본적으로 block처럼 width값이 전체영역(100%)이 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 높이 또한 폰트의 크기만큼 영역을 갖는다.
또한, 라인이 새로 추가되지 않고 동일한 선상에 표시한다.
하지만 width와 height값을 지정하면 첫 번째 차이점을 없앨 수 있는 것 아닌가?
그럼 코드를 다시 한 번 수정해보자.
<div>와 <span>의 첫 번째 차이점을 없애기 위해 width값과 height값을 동일하게 주었다.
결과는 어떻게 나왔을까?
예상과는 다르게 오히려 하나의 차이점을 더 보여주고 있다.
자, 우리가 발견한 두 번째 차이점이다.
block은 width와 height값을 지정할 수 있지만
inline은 콘텐츠 영역만을 갖기에 width와 height값을 지정할 수 없다.
자, 또 하나의 의문이 생긴다.
inline은 콘텐츠 영역만을 차지한다는 성질을 갖고 있다면 콘텐츠가 없이
width와 height값만을 가지고 있을 땐 어떻게 보이게 될까?
동일한 비교를 위해 <div>와 <span>태그 모두 콘텐츠를 지워보았다.
<div>는 콘텐츠가 없는 상황에서도 width와 height값을 가지고 영역을 갖고 있는 반면
<span>은 콘텐츠가 없으니 당연하게도 차지하는 영역을 모두 잃었다.
Inline-block
inline과 block의 차이점을 알아보니 inline-block을 어느 정도 예상해볼 수 있을 것 같다.
바로 코드를 수정하고 결과를 알아보자!
결과를 통해 inline-block은 inline처럼 새로운 라인이 추가되지 않고 동일한 선상에 요소들을 나타내고 block처럼 width와 height값을 지정할 수 있다는 것을 알 수 있다.
