display 속성
display 프로퍼티를 설명하기 전에, display 속성 특징을 알아야한다.
block: 기본적으로 가로영역을 다 채우며, 해당 특징을 가진 태그 이후에 작성한 태그는 줄바꿈을 한 것 처럼 보임
div,p,h,li,ul,ol등이 이에 해당된다
inline: content만큼의 width, height값을 가지며 줄바꿈이 되지 않는다span,a,img등이 이에 해당된다
display?
display 는 태그 속 요소의 특징을 변경시켜주는 프로퍼티이다.
태그의 본래 특징에 제약받지 않고 자유자재로 사용 할 수 있도록 만들어준다는 것이다.
예를 들면 <span> 은 inline의 특징을 가진 태그이지만 display 프로퍼티를 사용하여 block line level의 특징을 가지게 만들 수 있다.
display 프로퍼티는 none, inline, block, inline-block 가 있다.
none
화면에서 사라지게 만든다
원래 차지했던 공간도 없어지게 된다
inline
inline 특징을 부여한다
줄바꿈 없이 element들이 나란히 배치된 걸 확인할 수 있다
block
block 특징을 부여한다
자동으로 줄바꿈 되는 것을 확인할 수 있다
inline-Block
inline 의 특징과 block 의 특징을 가진다
inline 에서 줄 수 없었던 width와 height, margin, padding 값을 줄 수 있으며,
element들을 줄바꿈 없이 이어붙일수 있게 된다
