CSS display 속성의 특징

프론트엔드/CSS

Jake Seo 2022. 12. 5. 00:49

display 속성의 특징

CSS 에서 display 속성은 해당 엘리먼트와 내부 엘리먼트가 어떤 모양을 가질지를 결정한다. 복잡해보이지만 실제 엘리먼트의 display 속성은 block 혹은 inline 두가지만 존재한다고 보면 된다.

참고: block or inline element

flex, grid 와 같은 속성은 사실상 block 과 같은 속성인데, 자식 엘리먼트를 보여주는데만 그 차이가 있다. 자식 엘리먼트를 보여주는 방식도 보통 아래 3가지 중 하나를 따른다.

참고: flow layout, grid, flex

html 의 다양한 태그들에는 '기본 display 속성' 이 부여되어 있다.

이를테면 span 태그에는 inline 속성이 부여되어 있기 때문에, 문장 중간에 span 태그가 나오더라도 줄넘김이 되지 않는다.

div 태그에는 block 속성이 부여되어 있기 때문에, 문장 중간에 div 태그가 나오면 자동으로 줄넘김이 된다.

태그에 적용된 기본 CSS 프로퍼티들은 style 속성을 이용해 바꿀 수는 있지만, 의도에 맞게 설계된 태그를 사용하는 것이 당연히 더 좋다.