css display 속성

프로젝트를 하다보면 가장 시간이 많이 투자되고 손이 많이가는것이 css입니다.
이번에는 css 속성 중 display 속성에 대해 포스팅해보겠습니다.
display는 css에서 레이아웃을 제어할 때 가장 기본이 되는 속성입니다.
기본적인 display 속성으로는 block, inline, none등이 있습니다.

block

block은 새 줄에서 시작하여 좌우 최대폭으로 늘어납니다.
block의 표준 레벨 엘리먼트는 div이며 div외 p, header, footer등이 있습니다.

inline

inline은 단락안에서 해당 단락의 흐름을 방해하지 않고 텍스트를 감쌀 수 있습니다.
inline의 표준 레벨 엘리먼트는 span이며, a 태그도 인라인 엘리먼트에 속합니다.

none

none은 엘리먼트를 실제로 삭제하고 재생성하지않고 엘리먼트를 보이고 감추는 기능을 합니다.
visibility:hidden으로도 감출 수 있지만 visibility:hidden는 랜더링 시 공간을 차지하게 됩니다.

가장 많이 사용되는 display 속성에 대하여 정리해보았습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
위 링크에서는 display 모든 속성에 대하여 정리가 된 사이트여서 참고하시면 많은 도움이 될 것 같습니다.
엘리먼트에는 display 속성이 정해져 있지만 따로 display 속성을 변경하여 사용하실 수 있습니다.