빈 요소 숨기기

소개

이 랩에서는 CSS 의 :empty 가상 클래스를 탐구합니다. 이 가상 클래스를 사용하면 내용이 없는 요소를 선택하고 숨길 수 있습니다. 이 기술을 적용하여 불필요한 요소와 빈 공간을 제거함으로써 웹 페이지의 전반적인 디자인과 가독성을 향상시킬 수 있습니다. 일련의 연습을 통해 :empty 가상 클래스를 효과적으로 사용하여 빈 요소를 숨기고 더 깔끔하고 세련된 웹 페이지를 만드는 방법을 배우게 됩니다.

빈 요소 숨기기

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

내용이 없는 요소를 숨기려면 :empty 가상 클래스를 사용하십시오. 예를 들어, 다음과 같은 HTML 코드가 있는 경우:

<p>Lorem ipsum dolor sit amet. <button></button></p>

다음 CSS 코드를 사용하여 내용이 없는 button 요소를 숨길 수 있습니다:

p:empty {
  display: none;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 빈 요소 숨기기 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.