blog.coinsect.io
🇰🇷
원문
마크다운
2024-06-19
74
공유

요소 사이의 간격에는 gap을 사용하자

퍼블리싱을 하다보면 리스트를 많이 보게 된다. 아래와 같은 목록에서, 자녀들 사이의 간격을 8px로 설정하고 싶다면 어떻게 코드를 쓸 것인가? ```markup <div class="parent"> <div>1</div> <div>2</div> <div>3</div> </div> ``` 아마도 아래와 같은 코드를 쓸 것이다. ```css .parent { div:not(:last-child) { margin-bottom: 8px; } } ``` 그런데 만약 자녀들 중 div가 아닌 요소가 들어간다면 위 css는 그 요소에는 적용되지 않는다. 물론 `*:not(:last-child)` 를 사용할 수도 있지만, 아래와 같이 하면 깔끔하다. ```css .parent { display: flex; flex-direction: column; gap: 8px; } ``` 개인적으로는 `:last-child`, `:first-child` 등을 고려해가며 `margin-bottom`, `margin-right` 등을 쓰는 것보다, `gap`이 직관적이므로 선호한다. `display: grid;`의 경우는 `column-gap`, `row-gap`을 따로 줄 수도 있어 편리하다. 우리가 흔히 레이아웃에 사용하는 `div` 태그의 경우 블록 요소이기 때문에 디폴트가 `display: block;`이지만, 작업을 하다보면 레이아웃의 특정 영역들을 밀고 당기고 해야할 경우들이 생긴다. 그럴 경우 block과 margin을 통한 레이아웃보다는 `display: flex; flex-direction: column;` 하에서 작업하는 것이 편리한 경우가 많다. (e.g. 높이가 고정된 상태에서, 그 컨테이너 내부의 요소들이 동일한 간격으로 벌어지게 하려면 column flex + `justify-content: space-between;`이 정답이다.)
0
댓글 [0]