CSS display 속성에 대해 설명해주세요.

내용 정리

• display에서 자주 정의되는 값은 block, inline, inline-block, none이 있는데(물론 flex나 grid도), block 요소는 말 그대로 블록처럼 가로 영역 전체를 차지합니다. 반면 inline 요소는 컨텐츠의 너비만큼 가로 영역을 차지하기 때문에 inline 요소끼리 가로로 위치하는 게 가능합니다. inline-block은 inline 요소처럼 컨텐츠만큼 가로를 차지하면서 동시에 block 요소처럼 width, height 등을 지정할 수 있습니다. none은 이름 그대로 랜더링 자체를 하지 않고, DOM 자체에 그려주지 않기 때문에 당연히 영역도 차지하지 않습니다.

꼬리 질문

• HTML 태그를 구분 지을 때 HTML5 이전에는 단순히 inline 레벨 요소와 block 레벨 요소로 나눴는데, HTML5 들어서면서 어떤 형식으로 변경됐는지 설명해주세요
• display 프로퍼티도 상속이 되나요?
• display에 none을 주는 것과 opacity나 visibility를 통해서 처리하는 것의 차이가 있나요?
  • 랜더트리 존재 유무 때문에 접근성과는 관련이 있습니다. display: none을 사용하게 되면 스크린 리더기를 통해 읽을 수 없는 부분이 있기 때문에 시각적으로 제거하되 읽혀야 되는 상황이라면 opacity나 visibility를 활용하는 게 적절하다고 볼 수 있습니다. querySelector로 선택은 둘 다 가능합니다.
• opacity를 0으로 주는 것과 visibility를 hidden으로 주는 것에 차이가 있나요?
  • 큰 차이는 없으나 둘 다 랜더트리에 요소가 사라지지 않음에도 visibility를 hidden으로 주는 경우 뒤에 있는 요소의 조작이 가능합니다.
• display에 flex나 grid를 사용해보셨나요? 각각 어떤 용도로 사용해보셨나요?

참고자료

• https://developer.mozilla.org/en-US/docs/Web/CSS/display
• https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
• https://abcdqbbq.tistory.com/6

스터디 메모

• input, textarea, select, button의 display의 default value는 inline-block