요소가 레이아웃에 참여하는 방식을 바꿉니다.
block은 새 줄과 전체 가로 흐름, inline은 텍스트 흐름, inline-block은 인라인 배치와 크기 지정, none은 접근성 트리와 레이아웃에서 요소를 제거합니다.
이번 예제의 출발점은 display: block | inline | inline-block | none;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 inline-block을 block과 inline으로 바꾸며 width 적용 여부를 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
display:none으로 숨긴 콘텐츠는 화면 읽기 도구에서도 사라집니다. 단순 시각 숨김과 구분하세요.
직접 바꿔보세요inline-block을 block과 inline으로 바꾸며 width 적용 여부를 확인하세요.