요소가 레이아웃에 참여하는 방식을 바꿉니다.
block은 새 줄과 전체 가로 흐름, inline은 텍스트 흐름, inline-block은 인라인 배치와 크기 지정, none은 접근성 트리와 레이아웃에서 요소를 제거합니다.
두 div는 원래 한 줄씩 차지하는 블록이지만 inline-block이 되면서 글자처럼 한 줄에 나란히 서고, width: 140px도 그대로 적용됩니다. 두 상자 사이의 작은 틈은 margin이 아니라 HTML에서 두 div를 나눈 줄바꿈과 들여쓰기가 공백 한 칸으로 그려진 것입니다. .second의 display 선언은 .target과 같은 값이라 지워도 결과가 같습니다.
display 값은 바깥쪽 표시 방식과 안쪽 배치 방식을 함께 정합니다. inline-block은 바깥으로는 줄 안에 서고 안쪽으로는 새 블록 서식 맥락을 만드는 상자라 두 키워드 문법으로 쓰면 inline flow-root와 같고, 같은 원리로 inline-flex는 줄 안에 서는 flex 컨테이너가 됩니다.
display:none으로 숨긴 콘텐츠는 화면 읽기 도구에서도 사라집니다. 단순 시각 숨김과 구분하세요.
직접 바꿔보세요inline-block을 block과 inline으로 바꾸며 width 적용 여부를 확인하세요.