:empty를 알게된 계기

개인적으로 과제등을 할 때 로딩처리에 대한 구현을 css로 한 적이 있는데, 처음에는 아래처럼 개별적으로 loading에 대한 클래스를 통해 구현했었습니다.

.movie-title {
  font-size: 3rem;
  &.loading {
    height: 3rem;
    background-color: vars.$background-color--pulse;
    animation: pulse 1s infinite alternate;
  }
}

데이터를 가져오는 동안에는 loading클래스를 삽입하고, 데이터를 가져오는 것이 완료되면 loading클래스를 제거하는 방식으로 구현은 가능했습니다.
좀 더 편하게 적용할 수 있는 방법이 있는지 생각하던 중 저는 아래와 같은 고민을 하게 되었습니다.

마우스를 올렸을 때 :hover 가상 클래스 선택자를 활용할 수 있는 것처럼, 빈 요소에 대해서 활용할 수 있는 css 선택자가 있을까?

이후 mdn에서 css 가상 선택자에 대해서 살펴보던 중 :empty 를 접하게 되었고, 실제로 활용할 수 있는지 테스트하게 되었습니다

:empty

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

mdn 에서는 :empty 를 아래와 같이 설명하고 있습니다.

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

짧은 영어 실력으로 요약해보면, '자식이 없는 요소(element that has no children)를 의미한다'라고 할 수 있을 것 같습니다.

<div id="app"></div>

즉, 위와 같이 요소는 있지만, 하위 자식들이 없어 빈 요소로 표현될 수 있는 경우를 의미한다고 생각합니다.

적용해보기

.movie-title {
  font-size: 3rem;
  &.loading {
    height: 3rem;
    background-color: vars.$background-color--pulse;
    animation: pulse 1s infinite alternate;
  }
}

위에서 예로 들었던 영화 상세보기(모달 창)창에서 타이틀에 대한 scss를 수정해보면

.movie-title {
  font-size: 3rem;
  &:empty {
    height: 3rem;
    background-color: vars.$background-color--pulse;
    animation: pulse 1s infinite alternate;
  }
}

위와 같이 수정해줄 수 있습니다.

:empty를 이용할 때 동작하는 방식을 제가 이해한 방식으로 과정을 요약해보면 아래와 같습니다.

<h3 class="movie-title"></h3> -> 빈 요소 -> .movie-title:empty{...} 스타일 적용 -> 데이터 로드, 렌더링 -> <h3 class="movie-title">avengers</h3> -> 빈 요소가 아님 -> .movie-title:empty{...} 스타일 적용 해제, .movie-title 스타일 적용

omdbapi를 이용한 영화 검색 사이트(과제)의 배포된 도메인에서 :empty를 활용한 로딩처리 결과 화면은 아래와 같습니다.

적용해보면서 느낀 장점

자동화

제가 적용해보면서 느꼈던 장점은 javascript로 내가 css 클래스를 제어해주지 않아도, css 표준 기술을 활용해서 자동으로 빈요소에 대한 스타일을 제어할 수 있다 입니다. 요소는 있는데 안에 자식이 없어서 비어있는 경우의 스타일링을 :empty 에게 위임할 수 있다는 의미입니다. :empty를 활용하면서 로딩처리 스타일링을 할 때 좀 더 로딩처리 자체 스타일링에만 초점을 맞춰서 진행할 수 있어서 만족하면서 사용을 했습니다. 과제 이후에도 저는 개인적으로 로딩처리에 대한 css를 작성할 때 활용하고 있습니다.

호환성

기능이 좋아도 호환성이 좋지 않다면, 지금 바로 사용하는 것은 힘들 수 있습니다. 그러나, mdn과 caniuse에서 제공되는 호환성을 보면 거의 대부분의 브라우저에서는 사용이 가능하다고 볼 수 있습니다. 대부분의 사용자 브라우저에서 적용이 될 것이라 예상되기 때문에, 맘 놓고 적용할 수 있을 것 같다는 것이 저의 생각입니다.

끝맺으며

오늘은 :empty 를 개인적으로 학습하면서 적용해본 경험을 기반으로 포스트를 작성해보았습니다. 더 보기 영역(fetch-more)와 같이 요소 안에 스피너 아이콘에 대한 자식 요소를 보여주고 숨겨줘서 로딩 구현을 할 경우에는 :empty 를 활용해서 로딩 구현을 하기는 어렵다고 생각합니다. 다만, 이 외의 경우에는 좀 더 편하게 로딩에 대한 구현을 할 수 있어서 저는 만족하면서 필요한 경우 계속 활용하고 있습니다.

틀린 내용이 있거나, 이와 관련된 의견이 있으시다면 언제든지 댓글로 알려주시길 바랍니다.

profile
$ npm run dev:ryan

0개의 댓글