display 속성의 이해 (인라인, 인라인블록, 블록)

 

1. 인라인요소 :  크기는 컨텐츠의 너비값

- 한줄에 여러개 배치, 상하마진 못가짐, 기본 너비값은 컨텐츠의 너비값

- span, a, small, em, b, br, audio, video, s, u, mark, q, strong, sup, sub, i, big, del, label

(서식을 꾸미는 요소)

 

 

2. 블록요소 : 크기값 지정가능 

- 크기값을 지정할 수 있음, 한줄에 한개만 배치, 상하좌우마진 모두 가짐, 기본 너비값은 100%

- div, ul, ol, li, h, hr, form, dl, dt, dd, p, table, header, article, footer, section, nav, details, summury, center,

 

3. 인라인블록 : 크기값 지정가능, 기본크기는 컨텐츠의 너비값

한줄에 여러개 배치

상하좌우마진 모두 가짐

- img, input, button, fontawesome icon

 

기본값 position: static;

 

어떤 요소이건 position: absolute 또는 fixed가 적용되면 인라인블록으로 변함.

before after는 기본적으로 인라인요소

 

 

 

absolute 일 때 display: inline-block;을 또 쓸 필요 x

 

		.main_txt {
			position: relative;
			display: inline-block;
		}
		.main_txt:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 5px;
			left: 0;
			bottom: 0;
			background: orange;
		}