Inline ,Block , Inline-block

인라인(Inline) 요소

인라인 요소는 웹 페이지에서 한 줄에 여러 개가 배치될 수 있다.

기본 너비값은 콘텐츠의 너비만큼만 설정되며, 크기 값을 가질 수 없는 것이 특징이다.

또한, 상하 마진(margin) 값을 가질 수 없어, 요소 간 간격을 설정할 때에는 주의가 필요하다.

대표적인 인라인 요소에는 span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio 등이 있다.

이러한 요소들은 텍스트나 미디어 콘텐츠를 특정 스타일로 꾸미거나 링크를 걸 때 자주 사용된다.

 

 

블록(Block) 요소

블록 요소는 한 줄에 하나씩만 배치되는 요소로, 기본 너비값은 부모 요소의 100%를 차지한다.

이로 인해 웹 페이지 레이아웃의 기본 구조를 잡는 데 많이 사용된다.

또한, 블록 요소는 크기 값을 가질 수 있으며, 상하좌우 마진을 설정할 수 있어 레이아웃 조정에 유리하다.

대표적인 블록 요소로는 div, table, figure, figcaption, caption, header, nav, footer, section, article, aside, p, blockquote, ul, ol, li, td, th, form, hr, h1~h6 등이 있다.

이 요소들은 주로 웹 페이지의 큰 구조나 섹션을 나누는 데 사용된다.

 

 

인라인 블록(Inline-block) 요소

인라인 블록 요소는 인라인 요소와 블록 요소의 특성을 혼합한 요소다.

한 줄에 여러 개가 배치될 수 있으면서도, 블록 요소처럼 크기 값을 가질 수 있다.

또한,  상하좌우 마진을 설정할 수 있어 레이아웃 조정에 유리하다.

이러한 특성 덕분에 인라인 블록 요소는 레이아웃을 더욱 유연하게 구성할 수 있다.

대표적인 인라인 블록 요소에는 img, input 태그들, button, fontawesome 등이 있다.

이러한 요소들은 버튼, 이미지, 아이콘 등 다양한 인터페이스 요소를 구성할 때 유용하게 쓰인다.