display 속성의 특징
CSS 에서 display 속성은 해당 엘리먼트와 내부 엘리먼트가 어떤 모양을 가질지를 결정한다. 복잡해보이지만 실제 엘리먼트의 display 속성은 block 혹은 inline 두가지만 존재한다고 보면 된다.
flex, grid 와 같은 속성은 사실상 block 과 같은 속성인데, 자식 엘리먼트를 보여주는데만 그 차이가 있다. 자식 엘리먼트를 보여주는 방식도 보통 아래 3가지 중 하나를 따른다.
참고: flow layout, grid, flex
display 속성을 모르면 삽질하기 쉬운 부분들
html 의 다양한 태그들에는 '기본 display 속성' 이 부여되어 있다.
이를테면 span 태그에는 inline 속성이 부여되어 있기 때문에, 문장 중간에 span 태그가 나오더라도 줄넘김이 되지 않는다.
div 태그에는 block 속성이 부여되어 있기 때문에, 문장 중간에 div 태그가 나오면 자동으로 줄넘김이 된다.
태그에 적용된 기본 CSS 프로퍼티들은
style속성을 이용해 바꿀 수는 있지만, 의도에 맞게 설계된 태그를 사용하는 것이 당연히 더 좋다.
참고하면 좋은 자료
레퍼런스
'프론트엔드 > CSS' 카테고리의 다른 글
| flex 엘리먼트 꽉 채웠을 때 자동 줄넘김되게 하기 (0) | 2022.12.05 |
|---|---|
| img 태그 사용시 아래의 4px 의 미묘한 빈공간이 생기는 이유 (0) | 2022.12.05 |
| CSS 접기 펴기 애니메이션 만드는 방법 (height: auto 일 때 문제 해결) (0) | 2022.11.29 |
| CSS Box-sizing (박스 사이징) 이란? (0) | 2022.11.29 |
| CSS Functional Notation 이란? (0) | 2022.11.14 |