[TIL] CSS 가상요소

간단한 이미지 슬라이더를 만드는데 첫번째 요소 왼쪽과 마지막 요소 오른쪽에 margin을 넣으려고 하니 마지막 요소의 오른쪽에는 margin이 안 먹는 버그가 있었다. 예전에도 겪은 적이 있었던 거 같은데, 그때는 padding을 주는 방법으로 해결했다면, 이번에는 이미지 안에 글씨가 들어가는 부분이 있어서 padding을 주면 글씨가 가운데 정렬이 안 되어서 다른 방법으로 해결해야 했다. 챗GPT에게 물어보니 CSS 가상요소를 알려주어서 이 방법으로 적용하게 되었다.

const ImageContainer = styled.div`
  display: flex;
  gap: 15px;

  &::after {
    content: '';
    flex: 0 0 17px;
  }
`;

이런 식으로 부모 컴포넌트 안에 빈 문자열로 정의된(content: '';) 가상 요소를 주면 실제로 보이는 마지막 요소에도 margin을 먹일 수 있다. 나는 마지막 요소에 margin을 넣지 않고 가상 요소에 넣으려는 margin만큼 flex-basis를 고정 너비로 줬다.

이런 간단한 상단바를 만든다고 가정할 때도 가상요소를 활용할 수 있을 거 같았다. 타이틀과 X버튼을 정렬할 때, 예전에는 X버튼을 position: absolute;로 설정했었는데 position으로 일일이 조정하기보다는 중앙에 있는 타이틀 요소와 같이 가로세로정렬을 맞출 수는 없을까 하는 생각이 들었다.

const Layout = styled.div`
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;

  &::before {
    content: '';
    flex: 0 0 24px;
  }
`;

이런 식으로 ::before을 사용하여 가상요소를 앞쪽에 주면 화면에는 아무 것도 표시되지 않지만, 가상요소와 X버튼이 타이틀을 기준으로 양옆으로 위치하고 있어 justify-content: space-between;을 적용하면 더 깔끔하게 정렬할 수 있었다. 이때, 가상요소의 고정너비를 X버튼과 같은 너비로 설정해주어야 한다. 가끔 반응형 화면에서 position: absolute;로 위치 조정을 했을 때 애매한 경우가 있었던 거 같은데 가상요소를 활용하면 더 깔끔하게 적용할 수 있을 거 같다.