[CSS] Display

Flow layout

HTML element의 레이아웃은 레이아웃 알고리즘에 의해 결정된다. 여러가지 레이아웃 모드(e.g. flex box, grid, positioned 등)가 있는데, 디폴트는 Flow layout이다.

Flow layout에서는 모든 element들이 display 프로퍼티를 가지며 display 값은 inline, block, inline-block이다. 이 값들에 따라 레이아웃이 어떻게 위치할 지가 결정되며, 값들은 기본적으로 element 태그에 따라 다르다. 예를 들어 div는 디폴트로 block 값을 가지며, span은 inline을 디폴트 값으로 가진다.

inline

인라인 요소는 margin-left/right을 이용해서 방향을 조절할 수는 있지만, width나 height을 주진 못한다.

단 img, video, canvas 요소들은 inline이긴 하지만 특별하다. 명시적인 크기를 줄 수 있으며, 블록 레이아웃에 영향을 주고 margin-top을 주는 것도 가능하다.

Inline 요소의 특이한 점은, 인라인 요소를 감싸는 wrapper와 살짝 갭이 생긴다는 점이다.

예를 들어 img가 높이가 200px이고 이걸 감싸는 div가 있다면 이 div의 높이는 200px보다 살짝 크다. 이런 space는 typography 같은 인라인 요소들을 자연스럽게 보이게 하기 위한 장치이다. 이걸 해결하기 위해서는 img에 display block을 주거나 감싸고 있는 div에 line-height을 0으로 주면 된다.

block

블록 요소는 가로로 최대한 그리디하게 자리를 차지한다. 만약 컨텐츠 길이에 width를 맞추고 싶다면 width에 fit-content 값을 주면 된다. 그런데 이렇게 width는 줄어들어도 여전히 마진이 전체 너비를 차지하므로, 다음 블록은 옆에 위치하는게 아니라 밑에 위치한다.

width: -moz-fit-content; /* Firefox */
width: fit-content;

브라우저 서포트를 하기 위해서는 저런 prefix를 붙여줘야 할 때가 있다. 다만 보통은 요즘 css 전처리기가 전부 자동으로 처리해주기 때문에 직접 붙여줄 일이 많지 않다.

inline-block

블록 요소가 인라인으로 취급될 수 있게 해준다. 외부에서 볼 때는 인라인 요소로 취급되나 내부적으로는 블록 요소의 특징을 갖는다. 부모 컨테이너는 이 요소를 인라인으로 취급하지만 요소 자체는 블록이므로 대부분의 css 스타일을 요소에 적용할 수 있다는 소리이다. (e.g. width, hover effect 등)

line wrap 이슈

인라인 요소는 line-wrap이 된다. 즉 줄글이 주어진 컨테이너의 너비를 넘어가게 되면 분절되면서 다음 라인으로 이어지는 것이다. 이 줄글은 하나의 shape으로 처리된다.

하지만 인라인은 스타일 제한이 많기 때문에, a링크를 hover했을 때 이펙트를 주고 싶어서 a 태그를 인라인 블록으로 설정했다고 하자. 이 경우 해당 a 태그 안에 있는 텍스트들은 line-wrap이 되지 않아서, 이상하게 줄바꿈이 될 우려가 있다. 그러므로 이런 이펙트들은 paragraph안에서는 사용하지 않고 네이게이션 링크 등에서 사용하는 것이 맞다.