🌱 기초 프론트엔드
CSS에서 display 속성이란?
쉽게 이해하기
display는 물건을 진열하는 방식이에요. block은 선반 한 칸을 통째로 차지하는 큰 박스, inline은 책장에 책들이 나란히 꽂히듯 옆으로 이어지는 방식, inline-block은 작은 박스들이 옆으로 붙어있는 형태죠.
핵심 정리
HTML 요소를 화면에 어떻게 배치할지 결정하는 display 속성을 알아봅니다.
자세히 알아보기
display는 HTML 요소가 화면에 어떻게 표시될지 결정하는 CSS 속성이에요. 가장 많이 쓰는 값은 block, inline, inline-block, flex, grid 정도예요.
block은 div나 p 태그처럼 한 줄을 전부 차지하는 요소예요. 아무리 내용이 짧아도 다음 요소는 아래로 내려가죠. inline은 span이나 a 태그처럼 텍스트 흐름 안에서 옆으로 이어지는 요소예요. 너비와 높이를 지정할 수 없어요.
inline-block은 inline처럼 옆으로 붙지만 block처럼 크기 조절이 가능해요. 버튼이나 네비게이션 메뉴를 만들 때 자주 써요. flex와 grid는 좀 더 고급 레이아웃을 위한 값인데, 나중에 배우게 될 거예요.
실무에서는 display: none으로 요소를 화면에서 숨기거나, display: flex로 정렬을 쉽게 하는 경우가 많아요. 예를 들어 모바일 메뉴를 숨겼다가 보여주는 기능을 만들 때 display를 바꿔주면 돼요.