CSS 금지 아이콘

프런트 엔드 개발에서는 웹 사이트 페이지를 아름답게 하고 사용자 경험을 향상시키기 위해 아이콘을 사용해야 하는 경우가 많지만 때로는 특정 아이콘의 표시를 금지해야 할 수도 있습니다. 이때 아이콘 비활성화 기능을 구현하려면 CSS를 사용해야 합니다.

일반적으로 페이지에서 아이콘을 참조하는 방법은 글꼴 아이콘이나 SVG 아이콘을 사용하는 것입니다. 왜냐하면 이러한 아이콘은 벡터 아이콘이고 다양한 크기로 왜곡되지 않기 때문입니다. 아이콘을 비활성화하는 두 가지 주요 방법이 있습니다. 하나는 CSS에서 의사 클래스 선택기를 사용하는 것이고, 다른 하나는 HTML에서 data 속성을 사용하는 것입니다. 아래에서는 이 두 가지 방법의 구체적인 구현에 대해 자세히 설명합니다.

먼저 첫 번째 방법인 CSS 의사 클래스 선택기를 사용하는 방법을 살펴보겠습니다. 이 방법은 글꼴 아이콘에 사용하기에 적합합니다. 일반적으로 글꼴 아이콘을 사용하는 방법은 요소의 클래스 속성을 아이콘의 클래스 이름으로 설정한 다음 @font-face를 사용하여 CSS에서 글꼴을 선언하고 페이지에 글꼴 파일을 도입한 다음 글꼴을 설정하는 것입니다. -family 속성 요소의 이 글꼴 이름은 페이지에 아이콘을 표시하는 데 사용됩니다. 아이콘이 표시되는 것을 방지하려면 :before 또는 :after 가상 클래스를 사용하여 원래 아이콘 클래스 이름을 대체하고 content 속성을 공백으로 설정할 수 있습니다.

예를 들어, 클래스 속성이 "icon"인 요소와 "icon-delete"라는 아이콘 클래스가 있습니다. 이 요소에 아이콘이 표시되지 않도록 하려면 CSS에 다음과 같이 작성할 수 있습니다.

.icon::before {
  content: none;
}

이렇게 하면 이 요소의 "아이콘 삭제" 아이콘이 표시되지 않습니다.

또 다른 방법은 HTML에서 데이터 속성을 사용하는 것입니다. 이 방법은 SVG 아이콘과 함께 사용하기에 적합합니다. SVG 아이콘을 사용할 때 일반적으로 SVG 아이콘 파일을 페이지에 삽입한 다음