display
속성의 대표적인 것들을 정리하고 넘어간다.
1. inline
말 그대로 한 줄 안에 여러 요소들이 나란히 배치된다.
inline
으로 지정되면 태그에 담긴 컨텐트의 크기에 따라 공간이 차지된다.
따라서 width나 height를 지정할 수 없다.
padding이나 margin값도 좌우만 가능하다.
대표적으로 span
, a
태그 등이 있다.
2. block
한 줄 전체를 차지한다.
block
으로 지정되면 width나 height로 컨텐트의 크기를 조절할 수 있고 padding이나 margin도 위, 아래, 좌, 우 모두 조정 가능하다.
대표적으로 div
, p
, h1
태그 등이 있다.
3. inline-block
inline 요소들처럼 한 줄 안에 나란히 배치되지만 block 요소들처럼 width나 height, padding과 margin의 상하까지 조절이 가능하다는 이점이 있다.
대표적으로 button
, select
태그 등이 있다.
기본적으로 가지고 있는 속성값은 display
속성으로 자유롭게 변경이 가능하고 용도에 맞게 쓸 수 있도록 많이 보고 연습해야겠다.