[8주차] 15. 속성, 인라인 요소 <--> 블록 요소 상호 변경하는 display

display 속성

이 속성을 이용하면 블록 요소를 인라인 요소로, 인라인 요소를 블록 요소로 변경 가능하다.

아래는 인라인 요소인 img 요소를 블록 요소로 변경해준 예시이다.

(block / inline / none)- none 으로 설정해주면 요소를 안보이게 숨길수도 있음

img요소가 인라인 요소일때 4개의 이미지가 배치되는 방식

img 요소는 원래 인라인 요소라서 가로로 이어붙은 상태로 배치됨

img요소가 블록요소일때 4개의 이미지가 배치되는 방식

img 요소를 display 속성을 이용해 블록요소로 변경해주면 하나의 이미지가 한 줄을 다 차지하게 되어 아래와 같은 변화가 생긴다.

img{
	display : block;
}