HTML - inline 태그와 block 태그의 차이점과 사용법

닌니디자인 HTML 썸네일

 

inline 태그 & block 태그

inline 태그와 block 태그의 가장 큰 차이점은 출력하는 방식이다. inline 태그는 나란히 자연스럽게 출력되고 block 태그는 새로운 줄에서 출력된다. 스타일을 지정할 수 있는 방식에도 차이가 있다. inline 태그는 width, height, margin 등의 속성이 제대로 나타나지 않을 수 있다.

 

inline 태그

• inline 요소 태그는 block 요소 태그를 하위 태그로 포함시킬 수 없다.
• 내용물의 크기가 태그의 크기가 된다.
• width, height, margin 등의 속성이 적용되지 않는다.

 

대표적인 inline 태그

<a>	하이퍼링크를 연결하기 위한 태그
<span>	특별한 기능은 없으며 내용 출력을 위해 많이 사용되는 태그
<b>	text의 굵기를 bold로 변경하는 태그

 

inline 태그 예시

 

 

 

inline 태그 사이 공백/여백 지우기

1. inline 태그를 감싸고 있는 부모 요소를 font-size: 0;로 지정한다.
2. inline 태그를 font-size:1rem; 또는 원하는 폰트사이즈를 지정한다.

div { font-size:0; }
div span { font-size: 1rem; }

 

 

 

block 태그

• 내용물의 크기와 상관없이 항상 부모요소 전체의 너비를 차지한다.
• 요소 변경없이 style이나 css로 width, height, margin 등의 속성 변경이 가능하다.
• 요소들을 감싸는 용도로 주로 사용된다.

 

대표적인 block 태그

<div>	특정 영역을 묶거나 나누기 위한 태그
<p>	문단을 나누기 위한 태그

 

block 태그 예시