CSS가 가짜 요소를 사용할 수 있는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

CSS가 가짜 요소를 사용할 수 있는 이유는 무엇입니까?

WBOY

풀어 주다： 2023-08-30 15:01:02

앞으로

414명이 탐색했습니다.

为什么 CSS 可以使用假元素？

프런트 엔드 개발자로서 기능, 다양한 표현 및 구조적 애플리케이션을 포함하여 CSS 의사 요소에 대해 잘 알고 있어야 합니다. 기본 CSS 선택기와 그 많은 속성은 사용하기 재미있지만 의사 클래스와 의사 요소를 이해하는 것이 CSS 전문가가 되기 위한 다음 단계입니다.

CSS 의사 요소 외에도 일반적으로 의사 요소로 알려진 일부 HTML 요소도 있습니다. CSS는 때때로 처리를 쉽게 하고 개발자가 웹 페이지에서 사용자 정의 요소를 만들 수 있도록 하는 데 사용됩니다. 그러나 표준화되어 있지 않으므로 전역적으로 사용할 수 없습니다.

이 기사에서는 CSS를 가짜 요소와 함께 사용할 수 있는 이유에 대해 설명합니다. 이 기사는 가짜 요소가 무엇인지, 왜 사용하는지, 작동 방식 및 기타 가짜 요소의 기본 측면을 설명하는 것으로 시작됩니다.

가짜 요소란 무엇인가요?

HTML 문서에 정의되지 않은 HTML 요소를 가짜 요소라고 합니다. 가짜 구성 요소를 만드는 것이 가능합니다. 요소에 원하는 이름을 지정할 수 있지만 이는 권장되지 않습니다. HTML을 통해 개발자는 웹 페이지에서 사용자 정의 요소를 사용할 수 있습니다. 이 요소는 페이지에서 원활하게 실행됩니다.

예

HTML 문서에서 Fake 요소를 사용하는 방법을 보려면 다음 예를 확인하세요.

으아아아

위의 예에서 볼 수 있듯이 및 과 같은 자체 요소를 사용합니다. 코드가 원활하게 실행되고 텍스트가 표시됩니다. 그러나 이에 따라 스타일을 지정해야 합니다. 예를 들어 대신 HTML 인식 요소(h1)를 사용하면 텍스트의 글꼴 크기가 자동으로 커집니다. 가짜 요소에 대해 이를 수행하려면 CSS를 사용하여 글꼴 크기를 지정해야 합니다.

예

이 예에서는 의사 요소 및 에 특정 CSS 속성을 선언했습니다.

으아아아

가짜 요소에 CSS 스타일을 추가했습니다. 코드가 원활하게 실행되고 스타일에 문제가 없습니다. 문제는 이러한 가짜 요소가 HTML 문서에서 어떻게 작동하는지입니다.

답은 다음과 같습니다. HTML 기능이 나날이 발전함에 따라 대부분의 최신 브라우저는 기능에 대한 많은 변경 사항이나 추가 사항과 호환됩니다. 따라서 인식할 수 없는 요소는 DOM 트리로 직접 구문 분석됩니다. 그러나 기능이나 특별한 기능이 없습니다.

왜 가짜 요소를 사용하면 안 되나요?

가짜 요소는 웹 페이지에서 잘 작동할 수 있지만 HTML 문서에서는 가짜 요소를 사용하지 않는 것이 좋습니다. 가짜 요소를 사용하면 안 되는 몇 가지 이유는 다음과 같습니다. -

HTML 사양은 이러한 허위 요소를 지원 및 인식하지 않습니다.
이 요소에는 지정된 기능이 없습니다.
의 텍스트에 미리 정의된 글꼴 크기가 있는 것처럼 가짜 요소는 이러한 기능에 액세스할 수 없습니다.
가짜 요소와 이름이 같은 향후 표준 요소(개발된 경우)의 기능을 방해할 수 있습니다.
HTML 버전이 빠르게 변화함에 따라 DOM에는 특정 기능에 가장 적합한 특정 표준 요소가 있을 수 있습니다.
이러한 태그는 다른 브라우저에서 호환성 문제를 일으킬 수 있습니다. 또한 브라우저는 표준 요소를 더 빠르게 렌더링합니다. 이렇게 하면 웹페이지가 원활하게 실행됩니다.
표준 HTML 요소는 SEO(검색 엔진 최적화), 속도 등 다양한 장점을 제공합니다. Google과 같은 널리 사용되는 브라우저에서 선호됩니다.
가짜 요소를 사용하는 것은 (일부 개발자의 경우) 전문성이 부족함을 나타냅니다. 표준 구성 요소는 유지 관리가 쉽습니다. 또한 필요한 경우 추가 수정이 가능합니다.
표준 HTML 요소를 사용하면 디버깅이 더 쉬워집니다. 이는 디버깅 도구가 표준 요소에 쉽게 액세스할 수 있기 때문입니다.