inline
span은 표준 인라인 엘리먼트입니다. 인라인 엘리먼트는 단락 안에서
<span>
이처럼
</span>
해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있습니다. 링크에 사용하는 a 엘리먼트는 가장 흔히 볼 수 있는 인라인 엘리먼트입니다.
none
흔히 볼 수 있는 또 한 가지 display 값은 none입니다. script와 같은 일부 특별한 엘리먼트에서는 none을 기본값으로 사용하기도 합니다. 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용됩니다.
이것은 visibility와 다릅니다. display를 none으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링됩니다. visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지합니다.
다른 display 값
list-item과 table 같은 다른 좀 더 특이한 display 값도 있습니다. 전체 목록은 이곳을 참고하세요. inline-block과 flex에 대해서는 나중에 살펴보겠습니다.
보충 내용
앞에서 언급했듯이 모든 엘리먼트에는 기본 표시 타입이 지정돼 있습니다. 하지만 언제든지 이러한 기본값을 재정의할 수 있습니다! 인라인 div를 만드는 것은 적절하지 않겠지만 이를 이용해 특별한 시맨틱을 지닌 엘리먼트의 표시 방식을 조정할 수 있습니다. 흔히 볼 수 있는 예로 가로 메뉴를 만들기 위해 인라인 li 엘리먼트를 만드는 것이 있습니다.
