CSS 인라인 블록 요소 레이아웃 스타일

HTML, CSS, JQUERY까지 퍼블리싱을 할 때 제일 중요한 display 속성값이자 기본중의 기본인 inline요소, block요소,inline-block요소에 대해 알아봅시다.

 

인라인요소_inline

inline elements span , a, small, big, em, u, s, del, br, audio, video, sub, mark, strong, b, q

 

블록 요소_block

block elements div h1~h6 table p ul ol blockquote li td th form hr caption header nav section footer

 

인라인 블록 요소_inline-block

inline-block elements img FontAwesome button input

 

 

	인라인 요소	블록 요소	인라인 블록 요소
너비값	콘텐츠의 너비값	너비값 100%	콘텐츠의 너비값
줄바꿈 여부	없음 (순서대로 가로 한줄)	있음 (세로 정렬)	없음 (순서대로 가로 한줄)
너비와 높이값	X (가질 수 없음)	O	O
margin , padding	좌우 간격만 반영	상하좌우 마진 반영	상하좌우 마진 반영

 여기서 줄바꿈 여부란, html로 인라인 요소를 입력했을 때 출력값이 모두 가로로 한줄에 반영되는 것을 의미합니다.

margin은 요소와 요소 사이의 간격이며, padding은 콘텐츠와 border(테두리) 사이의 간격을 의미합니다.