CSS display 속성은 요소의 바깥 배치와 내부 레이아웃을 어떻게 결정하나요?

이렇게 답해 보세요 (핵심 답변)

display 속성은 요소가 부모 흐름에 참여하는 바깥 배치(Outer Display)와 자식 요소를 배치하는 내부 레이아웃(Inner Display)을 함께 결정합니다. block과 inline은 줄바꿈 여부와 크기 지정 방식을 정하는 바깥 배치이고, flex와 grid는 자식들을 플렉스나 그리드 컨테이너로 정렬하는 내부 레이아웃입니다. 반면 display: none은 해당 요소와 하위 트리의 렌더 박스 생성을 아예 생략해 화면 공간도 차지하지 않게 만듭니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 부모에 display: flex를 주면 직계 자식들이 flex 아이템이 될 뿐, 손자 요소까지 자동으로 flex 컨테이너가 되는 것은 아닙니다.
2. display: none은 스크린리더를 포함한 접근성 트리에서도 요소를 숨기지만, visibility: hidden이나 opacity: 0은 레이아웃 공간을 그대로 차지합니다.

면접에서 자주 하는 실수

display: none과 visibility: hidden, opacity: 0이 단지 화면에서 안 보인다는 이유로 완전히 똑같은 숨김 방식이라고 설명하면 안 됩니다.