왜 CSS는 가짜 요소와 함께 작동합니까?

왜 CSS는 가짜 요소와 함께 작동합니까?

우리 반에서 장난을 치다가 CSS가 구성 요소와 함께 작동한다는 것을 알게 되었습니다.

예:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

제 교수님이 제가 이것을 사용하는 것을 처음 보았을 때, 그는 제가 만든 요소들이 효과가 있다는 것에 약간 놀랐고, 제가 만든 모든 요소들을 단순히 ID가 있는 단락으로 바꾸라고 권했습니다.

왜 교수님은 제가 화장품을 사용하는 것을 원하지 않습니까?효과적으로 작동합니다.

또한, 왜 그는 CSS와 함께 작동하는 구성 요소가 존재하고 있다는 것을 몰랐습니까?그들은 흔하지 않나요?

왜 CSS는 가짜 요소와 함께 작동합니까?

(대부분의) 브라우저는 향후 HTML에 추가될 요소와 (어느 정도) 전방 호환되도록 설계되었습니다. 인식되지 않는 요소는 DOM에 구문 분석되지만 관련된 의미론이나 특수한 기본 렌더링은 없습니다.

새로운 요소가 사양에 추가되면 CSS, JavaScript 및 ARIA를 사용하여 이전 브라우저에서 동일한 기능을 제공할 수 있습니다(그리고 해당 언어가 해당 기능을 추가하기 위해 요소를 조작할 수 있도록 DOM에 나타나야 함).

(사용자 정의 요소에 대한 사양이 있지만, 특정한 이름 지정 요구사항이 있으며 JavaScript를 사용하여 등록해야 합니다.)

왜 교수님은 제가 화장품을 사용하는 것을 원하지 않습니까?

• HTML 사양에서는 허용되지 않습니다.
• 동일한 이름을 가진 향후 표준 요소와 충돌할 수 있습니다.
• 작업에 더 적합한 기존 HTML 요소가 있을 수 있습니다.

또한; 그는 왜 구성 요소가 존재하고 CSS와 함께 작동하는지 몰랐습니까?그들은 흔하지 않나요?

네. 사람들은 위와 같은 문제가 있어서 사용하지 않습니다.

TL;DR

• 사용자 지정 태그가 HTML에서 잘못되었습니다. 이로 인해 렌더링 문제가 발생할 수 있습니다.
• 코드를 휴대할 수 없기 때문에 향후 개발을 더욱 어렵게 만듭니다.
• 유효한 HTML은 SEO, 속도, 전문성 등 많은 이점을 제공합니다.

긴 대답

사용자 지정 태그를 사용한 코드가 더 유용하다는 일부 주장이 있습니다.

그러나 잘못된 HTML로 이어집니다. 이는 사이트에 좋지 않습니다.

유효한 CSS/HTML의 시점 | 스택 오버플로

• 구글은 그것을 선호하기 때문에 SEO에 좋습니다.
• 테스트하지 않은 브라우저에서 웹 페이지가 작동할 가능성이 높아집니다.
• 그것은 당신을 더 전문적으로 보이게 합니다 (적어도 일부 개발자들에게는).)
• 호환되는 브라우저는 [유효한 HTML을 더 빠르게] 렌더링할 수 있습니다.
• 페이지의 코드 페이지나 언어 집합과 같이 테스트하지 않은 항목에 영향을 미치는 많은 모호한 버그를 지적합니다.

검증 이유 | W3C

• 디버깅 도구로서의 유효성 확인
• 미래에 대비한 품질 검사로서의 검증
• 검증을 통해 유지보수 간소화
• 검증을 통해 모범 사례 교육 지원
• 검증은 전문성의 표시입니다.

야다 (또 다른 (다른) 대답)

편집: 아래 BoltClock의 type vs tag vs element에 대한 코멘트를 참고하시기 바랍니다.나는 보통 의미론에 대해 걱정하지 않지만 그의 의견은 매우 적절하고 유익합니다.

이미 많은 좋은 답변들이 있지만, 당신은 교수님이 이 질문을 올리도록 지시했다고 지적하셔서 (공식적으로) 학교에 있는 것처럼 보입니다.CSS 뿐만 아니라 웹브라우저의 메커니즘에 대해서도 조금 더 깊이 있게 설명해 보겠다고 생각했습니다.위키백과에 따르면, "CSS는... 마크업 언어로 작성된 문서를 설명하는 데 사용되는 스타일시트 언어입니다." ("a"에 강조점을 추가했습니다.) HTML의 특정 버전보다 훨씬 덜 "HTML로 작성됨"으로 표시됩니다. CSS는 HTML, XHTML, XML, SGML, XAML 등에서 사용할 수 있습니다.물론 이러한 문서 유형을 렌더링하고 스타일을 적용할 수 있는 도구가 필요합니다.정의에 따르면, CSS는 특정 마크업 언어 태그를 알지 못하고 이해하지 못합니다.따라서 HTML에 관한 한 태그는 "비활성"일 수 있지만 CSS에는 "유효한" 태그/요소/유형 개념이 없습니다.

현대의 비주얼 브라우저는 획일적인 프로그램이 아닙니다.그들은 특정한 일을 해야 하는 다른 "엔진"들의 혼합체입니다.최소한 렌더링 엔진, CSS 엔진, Javascript 엔진/VM 등 3개의 엔진을 생각할 수 있습니다.파서가 렌더링 엔진의 일부인지(또는 그 반대인지) 또는 별도의 엔진인지는 확실하지 않지만 이해할 수 있습니다.

비주얼 브라우저 여부( 다른 사람들은 이미 그 화면에 대한 사실을 다루었습니다. 잘못된 태그를 처리하는 데 다른 문제가 있을 수 있습니다. 구문 분석기가 문서에 "확장" 태그를 남겨두는지 여부와 렌더링 엔진이 해당 태그에 스타일을 적용하는지 여부에 따라 형식이 적용됩니다.CSS 엔진은 개발/유지보수를 더 어렵게 만들기 때문에 "이것은 HTML 문서이므로 유효한 태그/요소/유형 목록입니다."라고 이해하기 위해 작성되지 않습니다. CSS 엔진은 단순히 태그/요소/유형을 찾은 다음 렌더링 엔진에 "적용해야 할 스타일이 여기 있습니다."라고 말합니다.렌더링 엔진이 스타일을 실제로 적용할지 여부에 따라 결정됩니다.

여기 엔진에서 엔진으로의 기본 흐름을 쉽게 생각할 수 있는 방법이 있습니다: 파서 -> CSS -> 렌더링.사실 그것은 훨씬 더 복잡하지만 이것은 시작하기에 충분합니다.

이 답변은 이미 너무 길어서 여기서 마치겠습니다.

수 없는 는 알 수 없 다 같 처 리 됩 니 다 이 과 음 요 는 소 는 니 ▁as 다 ▁are ▁unknown 됩 ▁treated 처 리 ▁elements 알div최신 브라우저에 의한 s.그게 그들이 일하는 이유입니다.이것은 새로운 요소를 추가할 수 있는 모듈식 구조를 도입하는 다가오는 HTML5 표준의 일부입니다.

이전 브라우저(IE7-라고 생각합니다)에서는 자바스크립트 트릭을 적용할 수 있으며, 그 후에도 작동합니다.

여기 예시를 찾다가 발견한 관련 질문이 있습니다.

Javascript 수정에 대한 질문이 있습니다.실제로 IE7은 이러한 요소를 즉시 지원하지 않습니다.

또한; 그는 왜 메이드 태그가 존재하고 CSS와 함께 작동하는지 몰랐습니까?그들은 흔하지 않나요?

네, 그렇습니다.그러나 특히: 그것들은 추가적인 목적을 제공하지 않습니다.그리고 그들은 html5가 처음입니다.이전 버전의 HTML에서는 알 수 없는 태그가 잘못되었습니다.

또한, 선생님들은 때때로 그들의 지식에 차이가 있는 것처럼 보입니다.이것은 학생들에게 주어진 주제에 대한 기초를 가르칠 필요가 있기 때문일 수도 있고, 모든 것을 알고 최신 정보를 얻는 것은 별로 효과가 없습니다.한제가 된 적이 . 제가 할 수 입니다. 단지 제가 컴퓨터를 사용하여 음악을 재생할 수 있기 때문입니다.playGWBasic 명령어. (실화, 네, 오래 전)하지만 이유가 무엇이든 간에 맞춤형 요소를 사용하지 말라는 충고는 건전한 것이라고 생각합니다.

실제로 사용자 지정 요소를 사용할 수 있습니다.이 주제에 대한 W3C 사양은 다음과 같습니다.

http://w3c.github.io/webcomponents/spec/custom/

다음은 사용 방법을 설명하는 튜토리얼입니다.

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

@Quentin이 지적했듯이, 이것은 개발 초기의 초안 사양이며, 요소 이름이 무엇이 될 수 있는지에 대한 제한을 부과합니다.

다른 답변들은 표현이 서툴거나 약간 틀린 것들이 있습니다.

거짓(ish):비표준 HTML 요소는 "허용되지 않음", "잘못됨" 또는 "잘못됨"입니다.

꼭 그렇다고 할 수는 없죠.그들은 "부적합"합니다.뭐가 달라요?어떤 것은 "적합하지 않을" 수 있고 여전히 "허용"될 수 있습니다.W3C는 HTML 경찰을 당신의 집으로 보내고 당신을 멀리 데려가지 않을 것입니다.

W3C가 이런 식으로 방치한 데는 이유가 있습니다.적합성 및 사양은 커뮤니티에 의해 정의됩니다.만약 당신이 더 구체적인 목적으로 HTML을 사용하는 소규모 커뮤니티가 있고 그들 모두가 상황을 더 쉽게 만들기 위해 필요한 몇 가지 새로운 요소에 동의한다면, 그들은 W3C가 말하는 "다른 적용 가능한 사양"을 가질 수 있습니다.(이것은 분명히 단순화에 비해 역겨운 것이지만, 당신은 이해할 수 있습니다.)

즉, 엄격한 검증자는 비표준 요소를 "비활성화"로 선언하지만, 검증자의 역할은 브라우저나 사용에 대한 "합법성"을 보장하는 것이 아니라 검증하는 모든 규격에 대한 적합성을 보장하는 것이기 때문입니다.

거짓(ish):비표준 HTML 요소로 인해 렌더링 문제가 발생합니다.

그럴 수도 있지만, 그럴 가능성은 없습니다.("의지"를 "의지"로 대체)이렇게 하면 렌더링 문제가 발생할 수 있는 유일한 방법은 사용자 지정 요소가 HTML 사양 변경 또는 동일한 시스템 내에서 허용되는 다른 사양(예: SVG, Math 또는 사용자 지정)과 충돌하는 경우입니다.

사실, CSS가 비표준 태그를 스타일할 수 있는 이유는 HTML 사양이 다음과 같이 명확하게 명시하고 있기 때문입니다.

사용자 에이전트는 의미론적으로 이해되지 않는 요소와 속성을 처리해야 합니다. DOM(DOM 프로세서의 경우)에 두고 CSS(CSS 프로세서의 경우)에 따라 스타일링하지만 의미는 추론하지 않습니다.

참고: 사용자 지정 태그를 사용하려면 나중에 HTML 사양을 변경하면 스타일이 엉망이 될 수 있으므로 준비하십시오.W3C가 다음을 구현할 가능성은 매우 낮습니다.<imsocool>그러나 태그.

비표준 태그 및 JavaScript(DOM을 통해)

JavaScript를 사용하여 사용자 지정 요소에 액세스하고 변경할 수 있는 이유는 이 사양이 페이지의 요소를 조작할 수 있는 (정말 끔찍한) API인 DOM에서 해당 요소를 어떻게 처리해야 하는지에 대해서도 설명하기 때문입니다.

HTMLUnknownElement 인터페이스는 이 규격(또는 다른 해당 규격)에 의해 정의되지 않은 HTML 요소에 사용해야 합니다.

TL;DR: 규격 준수는 통신 및 안전을 위해 수행됩니다.적합성을 강제하는 것이 유일한 목적이지만 사용이 선택적인 검증자를 제외한 모든 것이 부적합을 허용합니다.

예:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(이것이 불길을 잡을 것이라고 확신하지만, 여기 내 2센트가 있습니다.)

사양에 따름:

CSS

유형 선택기는 CSS 정규화된 이름의 구문을 사용하여 작성된 문서 언어 요소 유형의 이름입니다.

저는 이것을 요소 선택기라고 부르는 줄 알았는데, 실제로는 유형 선택기인 것 같습니다.스펙은 다음과 같이 말합니다.CSS qualified names이름이 실제로 무엇인지에 대한 제한을 두지 않습니다., 한입니다.", "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "HTML 등 특정 사양에 존재하지 않는 요소에 대한 CSS별 제한은 없습니다.

HTML

원하는 문서에 태그를 포함하는 것에 대한 공식적인 제한은 없습니다.하지만 문서에는 다음과 같이 나와 있습니다.

작성자는 요소, 속성 또는 속성 값을 적절한 의미 목적 이외의 목적으로 사용해서는 안 됩니다. 이렇게 하면 소프트웨어가 페이지를 올바르게 처리할 수 없기 때문입니다.

그리고 그것은 나중에 말합니다.

작성자는 이 규격 또는 다른 해당 규격에서 허용하지 않는 요소, 속성 또는 속성 값을 사용해서는 안 됩니다. 그렇게 하면 향후 언어가 확장되는 것이 상당히 어려워지기 때문입니다.

사양에서 알 수 없는 요소가 허용되는 위치나 위치는 정확히 알 수 없지만 인식되지 않는 요소에 대한 HTMLUnknownElement 인터페이스에 대해 설명합니다.일부 브라우저는 현재 사양에 있는 요소를 인식하지 못할 수도 있습니다(IE8이 떠오릅니다).

그러나 사용자 정의 요소에 대한 초안이 있지만 아직 어디에서도 구현되지 않았는지 의심스럽습니다.

이는 html5에서 가능하지만 이전 브라우저를 고려해야 합니다.

만약 당신이 그것들을 사용하기로 결정한다면, 반드시 당신의 html에 댓글을 달아주세요!어떤 사람들은 댓글을 달면 시간을 많이 절약할 수 있기 때문에 그것이 무엇인지 알아내는 데 어려움을 겪을 수 있습니다.

이런 거.

<!-- Custom tags in use, refer to their CSS for aid -->

태그 때 는 당이당요자사신지태신용/때소를들만그정다신, 오니브은 html5요소같과 같은 것이 .nav/section.

만약 당신이 이 개념에 관심이 있다면 올바른 방법으로 하는 것을 추천합니다.

시작하기

사용자 정의 요소를 사용하여 웹 개발자는 새로운 유형의 HTML 요소를 정의할 수 있습니다.이 사양은 웹 구성요소를 기반으로 하는 몇 가지 새로운 API 기본 요소 중 하나이지만, 가장 중요한 요소일 수 있습니다.웹 구성요소는 사용자 정의 요소에 의해 잠금 해제된 기능 없이는 존재하지 않습니다.

새 HTML/DOM 요소 정의 다른 요소에서 확장되는 요소 생성 사용자 정의 기능을 논리적으로 하나의 태그로 번들링 기존 DOM 요소의 API 확장

당신이 그것으로 할 수 있는 많은 것들이 있고 이 기사가 그것을 표현하는 것을 좋아하기 때문에 그것은 당신의 대본을 아름답게 만듭니다.HTML에서 새 요소를 정의하는 사용자 정의 요소입니다.

자, 다시 한 번 말씀드리겠습니다.

장점

• 매우 우아하고 읽기 쉽습니다.

• 그렇게 많이 볼 수 없어서 좋습니다.divs:p

• 코드에 고유한 느낌을 줍니다.

단점

• 오래된 브라우저 지원은 고려해야 할 강력한 사항입니다.

• 다른 개발자들은 커스텀 태그를 모르면 어떻게 해야 할지 모를 수도 있습니다. (설명을 하거나 댓글을 달아 알려주세요)

• 마지막으로 고려해야 할 사항은 블록 및 인라인 요소입니다.사용자 지정 태그를 사용하면 사용자 지정 태그에 기본 측면이 없기 때문에 더 많은 CSS를 쓰게 됩니다.

선택은 전적으로 여러분에게 달려 있으며 프로젝트가 무엇을 요구하는지에 따라 결정해야 합니다.

2014년 1월 2일 업데이트

여기 제가 찾은 매우 유용한 기사가 있습니다. Custom Elements(사용자 정의 요소)입니다.

사용자 지정 요소가 필요한 이유에 대해 알아보십시오.사용자 정의 요소를 사용하여 작성자가 자신의 요소를 정의할 수 있습니다.작성자는 JavaScript 코드를 사용자 정의 태그 이름과 연결한 다음 표준 태그와 마찬가지로 사용자 정의 태그 이름을 사용합니다.

예를 들어 슈퍼버튼이라는 특수한 종류의 버튼을 등록한 후 다음과 같이 슈퍼버튼을 사용합니다.

사용자 지정 요소는 여전히 요소입니다.우리는 그것들을 오늘날 표준처럼 쉽게 만들고, 사용하고, 조작하고, 구성할 수 있습니다.

이 라이브러리는 사용하기에 매우 좋은 라이브러리처럼 보이지만 Windows(윈도우)의 빌드 상태를 통과하지 못했습니다.이것도 프리알파에 있다고 생각하기 때문에 발전하는 동안 계속 지켜보겠습니다.

왜 그는 당신이 그것들을 사용하는 것을 원하지 않습니까?일반적이지도 않고 HTML5 표준의 일부도 아닙니다.엄밀히 말하면, 그것들은 허용되지 않습니다.그들은 해킹입니다.

하지만 저는 그것들을 좋아합니다.XHTML5에 관심이 있을 수 있습니다. 이를 통해 자신만의 태그를 정의하고 표준의 일부로 사용할 수 있습니다.

또한, 다른 사람들이 지적했듯이, 그것들은 무효이므로 휴대할 수 없습니다.

왜 그는 그들이 존재한다는 것을 몰랐을까요?그들이 흔하지 않다는 것을 제외하면, 저는 모릅니다.아마도 그는 당신이 할 수 있다는 것을 몰랐을 것입니다.

메이드업 태그는 현재의 모든 브라우저와 미래의 모든 브라우저에서 안정적으로 작동할 가능성이 낮기 때문에 거의 사용되지 않습니다.

브라우저는 HTML 코드를 자신이 알고 있는 요소로 구문 분석해야 합니다. 이를 통해 만들어진 태그는 문서 객체 모델(DOM)에 맞는 다른 태그로 변환됩니다. 웹 표준이 표준을 벗어나는 모든 것을 처리하는 방법을 다루지 않기 때문에 웹 브라우저는 비표준 코드를 다른 방식으로 처리하는 경향이 있습니다.

웹 개발은 불확실성의 다른 요소를 추가하지 않고도 고유한 특성을 가진 다양한 브라우저로 충분히 까다롭습니다.표준에 있는 것들을 고수하는 것이 최선의 방법입니다. 브라우저 공급업체들이 따르려고 하는 것입니다. 그래서 그것이 실제로 작동할 수 있는 가장 좋은 기회입니다.

저는 지어낸 태그가 ID가 있는 p의 태그보다 잠재적으로 더 혼란스럽거나 불분명하다고 생각합니다(일반적으로 일부 텍스트 블록).우리 모두는 ID가 있는 p가 단락이라는 것을 알고 있지만, 누가 태그가 무엇을 위한 것인지 알겠습니까?적어도 그것은 제 생각입니다. :) 그러므로 이것은 기능의 문제라기보다는 스타일/명확성 문제입니다.

다른 사람들은 훌륭한 지적을 했지만 AngularJS와 같은 프레임워크를 보면 사용자 지정 요소 및 속성에 대해 매우 유효한 사례가 있다는 점에 주목할 필요가 있습니다.이것들은 xml에 더 나은 의미의 의미를 전달할 뿐만 아니라 웹 페이지에 대한 행동, 보기 및 느낌을 제공할 수 있습니다.

를 표시하는 데 사용할이며, (CSS XML 파일뿐만 (X)CSS의 XML 문서를 하는 데에도 할 수 있습니다.HTML 문서입니다.구성된 태그가 있는 스니펫은 합법적인 XML 문서의 일부일 수 있습니다. 단일 루트 요소로 묶으면 하나가 됩니다.아마도 당신은 이미 가지고 있을 것입니다.<html> ...</html>그주에? 할 수 .현재 브라우저는 XML 문서를 표시할 수 있습니다.

물론 그것은 매우 좋은 XML 문서는 아니며, 문법과 XML 선언이 부족합니다.HTML 선언 헤더를 대신 사용하는 경우(아마도 올바른 MIME 유형을 전송하는 서버 구성) 잘못된 HTML이 됩니다.

HTML은 웹 페이지 프레젠테이션의 맥락에서 유용한 의미론적 의미를 갖는 요소로서 일반 XML에 비해 이점이 있습니다.도구는 이 의미론과 함께 작동할 수 있고, 다른 개발자들은 그 의미를 알고 있으며, 오류가 발생하기 쉽고 읽기에 더 좋습니다.

그러나 다른 상황에서는 XML 및/또는 XSLT와 함께 CSS를 사용하여 프레젠테이션을 수행하는 것이 좋습니다.이게 당신이 한 짓입니다.이것은 당신의 업무가 아니었기 때문에 당신은 당신이 무엇을 하고 있는지 알지 못했고, HTML/CSS가 당신의 시나리오에서 그것을 고수해야 하는 가장 좋은 방법입니다.

(X)를 추가해야 합니다.도구가 의미 있는 오류 메시지를 제공할 수 있도록 문서의 HTML 헤더입니다.

...제가 만든 태그를 모두 ID가 있는 단락으로 변경하기만 하면 됩니다.

저는 사실 그것을 제대로 하는 방법에 대한 그의 제안에 이의를 제기합니다.

1. A <p>태그는 문단에 대한 것입니다.저는 사람들이 항상 디브 대신에 그것을 사용하는 것을 봅니다. 단순히 띄어쓰기를 목적으로 하거나 더 부드럽게 보이기 때문입니다.단락이 아니면 사용하지 마세요.

2. 특정 대상(예: Javascript)을 지정할 필요가 없는 한 모든 항목에 ID를 부착할 필요가 없거나 부착할 필요가 없습니다.클래스를 사용하거나 그냥 정직한 디브를 사용합니다.

초기부터 CSS는 마크업에 구애받지 않도록 설계되어 트리 유사 DOM 구조(예: SVG)를 생성하는 모든 마크업 언어와 함께 사용할 수 있습니다.다음을 준수하는 모든 태그name token생산은 CSS에서 완벽하게 유효합니다.그래서 당신의 질문은 CSS 그 자체보다는 HTML에 관한 것입니다.

사용자 지정 태그가 있는 요소는 HTML5 사양에서 지원됩니다.HTML5는 DOM에서 알 수 없는 요소를 구문 분석하는 방법을 표준화합니다.따라서 HTML5는 엄밀하게 말하면 사용자 정의 요소를 가능하게 하는 최초의 HTML 사양입니다. HTML5 doctype을 사용하면 됩니다.<!DOCTYPE html>당신의 서류에.

사용자 지정 태그 이름 자체의 경우...

이 문서 http://www.w3.org/TR/custom-elements/ 에서는 '-'(으) 기호를 하나 이상 포함하도록 선택하는 사용자 지정 태그를 권장합니다.이렇게 하면 이후 HTML 요소와 충돌하지 않습니다.따라서 다음과 같은 방법으로 의사를 변경하는 것이 좋습니다.

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 

놀랍게도, 아무도 (나의 과거를 포함해서) 접근성을 언급하지 않았습니다.사용자 지정 태그 대신 유효한 태그를 사용하는 또 다른 이유는 화면 판독기 및 사람들이 접근성 목적으로 필요로 하는 기타 도구를 포함하여 가장 많은 소프트웨어와의 호환성을 위해서입니다.또한 WAI와 같은 접근성 법은 접근 가능한 웹 사이트를 만들 것을 요구하며, 이는 일반적으로 유효한 마크업을 사용하도록 요구한다는 것을 의미합니다.

---

^{아무도 언급하지 않은 것 같으니 그렇게 하겠습니다.}

이것은 브라우저 전쟁의 부산물입니다.

인터넷이 처음 주류가 되기 시작했던 1990년대로 돌아가서, 브라우저 시장에서 경쟁이 증가했습니다.경쟁력을 유지하고 사용자를 끌어들이기 위해 일부 브라우저(특히 Internet Explorer)는 페이지 설계자가 의미하는 바를 파악하여 잘못된 마크업을 허용함으로써 도움이 되고 "사용자 친화적"이 되도록 노력했습니다(예:<b><i>foobar</b></i>굵은-이탤릭체로 올바르게 렌더링됩니다.

만약 한 브라우저가 구문 오류에 대해 계속 불평하는 반면 다른 브라우저는 당신이 던진 것을 먹고 (거의) 정확한 결과를 뱉는다면, 사람들은 자연스럽게 후자로 몰려들 것이기 때문에 이것은 어느 정도 일리가 있습니다.

많은 사람들이 브라우저 전쟁이 끝났다고 생각했지만, 크롬이 출시된 후 지난 몇 년 동안 브라우저 공급업체들 사이의 새로운 전쟁이 다시 불붙었고, 애플은 다시 성장하기 시작했고 사파리를 밀어붙였고, IE는 그 우위를 잃었습니다.(브라우저 공급업체들의 협력과 표준 지원으로 인해 "냉전"이라고 부를 수 있습니다.)따라서 웹 표준을 엄격하게 준수하는 현대의 브라우저도 이전과 같은 이점을 얻기 위해 실제로 "똑똑하다"며 이와 같은 표준 위반 행동을 허용하는 것은 놀라운 일이 아닙니다.

불행하게도, 이러한 관대한 행동은 제대로 표시되지 않은 웹 페이지의 대규모(일부는 암적이라고도 할 수 있음) 성장으로 이어졌습니다.IE가 가장 관대하고 인기 있는 브라우저였기 때문에, 그리고 마이크로소프트의 지속적인 표준 무시로 인해 IE는 나쁜 디자인을 장려하고 홍보하고 고장난 페이지를 전파하고 영구화하는 것으로 악명이 높아졌습니다.

현재로서는 일부 브라우저에서 그러한 기교와 악용을 피할 수 있지만, 가끔 퍼즐이나 게임 같은 것을 제외하고는 웹 페이지와 사이트를 만들 때 항상 웹 표준을 준수하여 브라우저 업데이트로 올바르게 표시되고 손상되지 않도록 해야 합니다(가능하면 완전히 무시됩니다.

브라우저는 일반적으로 유효 여부에 관계없이 CSS를 HTML 태그와 연관시키지만, 이 작업은 절대로 하지 말아야 합니다.

기술적으로 CSS 관점에서 이것에는 아무런 문제가 없습니다.하지만, HTML에서 만들어진 태그를 사용하는 것은 절대 해서는 안 되는 일입니다.

HTML은 마크업 언어이며, 이는 각 태그가 특정 유형의 정보에 해당한다는 것을 의미합니다.

생성된 태그가 어떤 유형의 정보와도 일치하지 않습니다.이것은 구글과 같은 웹 크롤러로부터 문제를 일으킬 것입니다.

올바른 마크업의 중요성에 대한 자세한 내용을 읽어보십시오.

편집

Divs는 블록 형태로 표시되며 조작할 수 있는 여러 관련 요소의 그룹을 나타냅니다.

스팬은 현재 사용 중인 컨텍스트와 다르게 스타일을 지정해야 하며 블록이 아닌 인라인으로 표시되어야 하는 요소를 나타냅니다.예를 들어 문장에서 몇 개의 단어가 모두 대문자여야 하는 경우입니다.

사용자 지정 태그는 어떤 표준과도 관련이 없으므로 클래스/ID 속성과 함께 span/div를 대신 사용해야 합니다.

여기에는 Angular JS와 같은 매우 구체적인 면제가 있습니다.

비록 CSS가 "태그 선택기"라고 불리는 것을 가지고 있지만, 그것은 실제로 태그가 무엇인지 알지 못합니다.이는 문서의 언어를 정의하는 데 남아 있습니다.CSS는 HTML 뿐만 아니라 XML과도 함께 사용하도록 설계되었으며, 여기서 (DTD나 다른 유효성 검사 체계를 사용하지 않는다고 가정하면) 태그는 거의 모든 것이 될 수 있습니다.다른 언어에도 사용할 수 있지만, "태그"와 "속성"과 같은 것들이 정확히 무엇에 해당하는지에 대한 독자적인 의미론을 생각해내야 할 것입니다.

브라우저는 일반적으로 HTML의 알 수 없는 태그에 CSS를 적용합니다. 왜냐하면 이것은 완전히 깨지는 것보다 더 나은 것으로 간주되기 때문입니다: 적어도 그들은 무언가를 표시할 수 있습니다.하지만 "가짜" 태그를 의도적으로 사용하는 것은 매우 나쁜 관행입니다.이에 대한 한 가지 이유는 새 태그가 때때로 정의되기 때문입니다. 만약 새 태그가 가짜 태그처럼 보이지만 동일한 방식으로 작동하지 않는 것으로 정의된다면 새 브라우저에서 사이트에 문제가 발생할 수 있습니다.

왜 CSS는 가짜 요소와 함께 작동합니까?어차피 사용해서는 안 되기 때문에 누구에게도 피해를 주지 않기 때문입니다.

왜 교수님은 제가 화장품을 사용하는 것을 원하지 않습니까?왜냐하면 앞으로 해당 요소가 사양에 의해 정의되면 해당 요소는 예측할 수 없는 동작을 하게 됩니다.

또한, 왜 그는 CSS와 함께 작동하는 구성 요소가 존재하고 있다는 것을 몰랐습니까? 그들은 흔하지 않나요?왜냐하면 그는 대부분의 다른 웹 개발자들과 마찬가지로 우리가 미래에 무작위로 깨질 수 있는 것들을 사용해서는 안 된다는 것을 이해하고 있기 때문입니다.

언급URL : https://stackoverflow.com/questions/20353613/why-does-css-work-with-fake-elements