[Flex] 요소 배치 계산은 브라우저에게 맡기자

HTML 요소는 크게 block과 inline으로 나눌 수 있다. block은 컨테이너처럼 쌓을 수 있는 "블록"처럼 말 그대로 높이가 존재하고 옆으로 이어붙일 수 없는 태그를 칭하고, inline은 문자나 글처럼 높이가 없고 한 줄로 이어진 태그를 칭한다. 이렇게 딱 나뉘어있기에 레이아웃을 짤 때 구분이 쉬운 장점이 있지만, 여러 요소들을 상위 요소로 감싸서 배치하는 등 "세부적"인 구성한다면, 한 줄로 이어붙여야하는 것과 그렇지 않은 것을 섞어야 하는 경우가 생긴다. 그래서 나온 것이 inline-block이다. 이름처럼 높이 속성을 그대로 유지하면서 한 줄에 연달아 배치할 수 있기 때문에, 여러 요소들을 품은 상위 컨테이너들의 한 줄 배치 등으로 널리 쓰인다. 하지만 inline-block 역시 한..

2020.06.09