CSS가 가짜 요소와 작동하는 이유는 무엇입니까?

수업 시간에 놀고 있었고 CSS가 구성 요소와 작동한다는 것을 알았습니다.

예:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

교수님이 처음으로 이것을 사용하는 것을 보았을 때, 그는 구성 요소가 효과가 있다는 사실에 약간 놀랐고 구성 요소를 모두 ID가있는 단락으로 간단하게 변경하도록 권장했습니다.

교수님이 왜 내가 만든 요소를 ​​사용하기를 원하지 않습니까? 그들은 효과적으로 작동합니다.

또한 왜 구성 요소가 존재하고 CSS와 함께 작동하는지 알지 못했습니다. 드문 일입니까?

CSS가 가짜 요소와 작동하는 이유는 무엇입니까?

(대부분의) 브라우저는 향후 HTML 추가에 어느 정도까지 호환되도록 설계되었습니다. 인식 할 수없는 요소는 DOM으로 구문 분석되지만 의미 나 특수화 된 기본 렌더링이 없습니다.

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

( 사용자 지정 요소 를 사용하여 HTML 을 확장 하는 수단을 정의하는 작업이 진행 중이지만이 작업은 현재 초기 개발 단계에 있으므로 성숙 할 때까지는 피해야합니다.)

교수님이 왜 내가 만든 요소를 ​​사용하기를 원하지 않습니까?

• HTML 사양에서는 허용되지 않습니다.
• 이름이 같은 미래의 표준 요소와 충돌 할 수 있습니다.
• 작업에 더 적합한 기존 HTML 요소가있을 수 있습니다.

또한; 왜 구성 요소가 존재하고 CSS와 함께 작동하는지 알지 못했습니다. 드문 일입니까?

예. 사람들은 위의 문제가 있기 때문에 사용하지 않습니다.

TL; DR

• 맞춤 태그가 HTML에서 유효하지 않습니다. 렌더링 문제가 발생할 수 있습니다.
• 코드를 이식 할 수 없으므로 향후 개발을 더욱 어렵게 만듭니다.
• 유효한 HTML은 SEO, 속도 및 전문성과 같은 많은 이점을 제공합니다.

긴 답변

있습니다 일부 인수는 사용자 정의 태그와 코드를 더 사용할 수있다.

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

유효한 CSS / HTML의 포인트 | 스택 오버플로

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

검증해야하는 이유 | W3C

• 디버깅 도구로서의 검증
• 미래를 보장하는 품질 검사로 검증
• 검증으로 유지 보수 용이
• 검증은 모범 사례를 가르치는 데 도움이됩니다.
• 검증은 전문성의 표시입니다

YADA (아직 다른 답변)

편집 : 유형 대 태그 대 요소에 관한 아래의 BoltClock 의견을 참조하십시오. 나는 일반적으로 의미론에 대해 걱정하지 않지만 그의 의견은 매우 적절하고 유익합니다.

이미 많은 좋은 답변이 있지만 교수님 은 귀하가 (공식적으로) 학교에있는 것처럼 보이는이 질문을 게시하라는 메시지를 표시했습니다 . CSS뿐만 아니라 웹 브라우저 의 메커니즘 에 대해 좀 더 깊이 설명하겠다고 생각했습니다 . 에 따르면 위키 백과 , "CSS는 설명에 사용되는 스타일 시트 언어 ... 작성된 문서입니다 마크 업 언어." ( "a"에 중점을 두었습니다.) 특정 HTML 버전보다 "HTML로 작성되었다"는 말은 없습니다. CSS는 HTML, XHTML, XML, SGML, XAML 등에 사용될 수 있습니다. 물론 렌더링 할 무언가가 필요합니다.스타일을 적용 할 각 문서 유형 정의상, CSS는 특정 마크 업 언어 태그를 알거나 이해 하지 못합니다 . 따라서 HTML과 관련하여 태그는 "유효하지 않을 수 있지만"CSS에는 "유효한"태그 / 요소 / 유형에 대한 개념이 없습니다.

최신 비주얼 브라우저는 모 놀리 식 프로그램이 아닙니다. 그것들은 특정한 일을해야하는 다른 "엔진"의 융합체입니다. (A)에서 최소한 나는 3 개 엔진, 렌더링 엔진의 CSS 엔진과 자바 스크립트 엔진 / VM 생각할 수 있습니다. 파서가 렌더링 엔진의 일부인지 (또는 그 반대) 확실하지 않은지 또는 별도의 엔진인지 확실하지 않지만 아이디어를 얻습니다.

여부가 아니라 시각적 브라우저 ( 다른 사람이 이미 화면의 사실 언급 한 독자가 유효하지 않은 태그를 다루는 다른 문제가있을 수 있습니다를 ) 서식 문서 및 파서 잎 여부 "무효"태그에 따라 적용 후 렌더링 엔진은 스타일을 적용되는지 여부 그 태그에. 그것이 더 어렵게 개발 / 유지하기 위해 만들 것 때문에, CSS 엔진에 기록되지 않은 이해하는 것을 "이것은 그래서 여기에 HTML 문서가 유효 태그 / 요소 / 유형의 목록되어 있습니다." CSS 엔진은 단순히 태그 / 요소 / 유형 을 찾은 다음 렌더링 엔진에 "적용 할 스타일이 있습니다"라고 말합니다. 렌더링 엔진이 실제로 스타일을 적용할지 여부를 결정합니다.

엔진에서 엔진으로 의 기본 흐름을 쉽게 생각할 수있는 방법은 다음과 같습니다 . 파서-> CSS-> 렌더링. 실제로는 훨씬 더 복잡하지만 초보자에게는 충분합니다.

이 답변은 이미 너무 길어서 거기서 끝낼 것입니다.

알려지지 않은 요소는 div최신 브라우저에서 s로 취급됩니다 . 그것이 그들이 작동하는 이유입니다. 이것은 새로운 요소를 추가 할 수있는 모듈 식 구조를 소개하는 HTML5 표준의 일부입니다.

구형 브라우저 (IE7-라고 생각합니다)에서 Javascript-trick을 적용한 후에도 작동합니다.

다음은 예제를 찾을 때 찾은 관련 질문 입니다.

다음은 Javascript 수정에 대한 질문 입니다. 실제로 IE7은 이러한 요소를 즉시 지원하지 않는 것으로 나타났습니다.

또한; 왜 메이크업 태그가 존재하고 CSS와 함께 작동하는지 알지 못했습니다. 드문 일입니까?

그렇습니다. 그러나 특히 : 그들은 추가 목적을 제공하지 않습니다. 그리고 그들은 html5를 처음 사용합니다. 이전 버전의 HTML에서는 알 수없는 태그가 유효하지 않습니다.

또한 교사들은 때로는 지식에 차이가있는 것 같습니다. 이것은 학생들에게 주어진 주제에 대한 기초를 가르쳐야한다는 사실 때문일 수 있으며, 모든 인과 아웃을 알고 실제로 최신 정보를 얻는 데 실제로 돈을 지불하지는 않습니다. playGWBasic 의 명령을 사용하여 컴퓨터에서 음악을 재생할 수있게했기 때문에 교사가 바이러스를 프로그래밍했다고 생각했기 때문에 구금 된 적이 있습니다. (참 이야기, 예, 오래 전). 그러나 이유가 무엇이든, 나는 custome 요소를 사용하지 않는 충고가 건전한 것이라고 생각합니다.

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

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

다음은 사용법을 설명하는 자습서입니다.

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

@Quentin이 지적한 바와 같이, 이것은 개발 초기의 초안 사양이며 요소 이름에 대한 제한을 부과합니다.

다른 답변에 대해서는 잘못 표현되었거나 약간 틀린 답변이 몇 가지 있습니다.

FALSE (ish) : 비표준 HTML 요소는 "허용되지 않음", "불법"또는 "잘못된"입니다.

반드시 그런 것은 아닙니다. 그것들은 "부적합" 입니다. 차이점이 뭐야? 무언가가 "일치하지 않고"여전히 "허용"될 수 있습니다. W3C는 HTML 경찰을 집으로 보내지 않고 집으로 가져갈 수 없습니다.

W3C는 이런 이유로 물건을 남겼습니다. 적합성과 사양은 커뮤니티에 의해 정의됩니다. 좀 더 구체적인 목적을 위해 HTML을 소비하는 소규모 커뮤니티가 있고 모두 더 쉽게 만드는 데 필요한 새로운 요소에 동의하는 경우 W3C가 "다른 적용 가능한 스펙"이라고하는 것을 가질 수 있습니다. . (이것은 분명히 단순화에 대한 총체적이지만 아이디어를 얻습니다)

즉, 엄격한 유효성 검사기는 비표준 요소를 "잘못된"것으로 선언합니다. 하지만 검증의 작업은이에 대해 "합법성"을 보장하지 않기 위해 검증하는 것 스펙 어떤 적합성 보장하기 위해 그의 때문에 브라우저 나에 대한 사용 .

FALSE (ish) : 비표준 HTML 요소 는 렌더링 문제가 발생합니다

아마도 가능하지는 않습니다. ( "will"을 "might"로 대체) 렌더링 문제가 발생하는 유일한 방법은 사용자 지정 요소가 HTML 사양 변경 또는 동일한 시스템 내에서 존중되는 다른 사양과 같은 다른 사양과 충돌하는 경우입니다 (예 : SVG, 수학 또는 사용자 정의).

실제로 CSS가 비표준 태그의 스타일을 지정할 수있는 이유 는 HTML 사양에 다음과 같이 명시되어 있기 때문 입니다.

사용자 에이전트는 이해하지 못하는 요소와 속성을 의미 상 중립으로 취급해야합니다. DOM (DOM 프로세서의 경우)에 그대로두고 CSS (CSS 프로세서의 경우)에 따라 스타일을 지정하지만 의미는 유추하지 않습니다.

참고 : 맞춤 태그를 사용하려는 경우 나중에 HTML 사양을 변경하면 스타일이 손상 될 수 있으므로 준비하십시오. W3C가 실제로 구현할 가능성은 거의 없습니다.<imsocool> 태그 .

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

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

HTMLUnknownElement 인터페이스는이 사양 (또는 기타 적용 가능한 사양)으로 정의되지 않은 HTML 요소에 사용해야합니다.

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

예를 들면 다음과 같습니다.

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

(이것이 화염을 일으킬 것이라고 확신하지만 내 2 센트가 있습니다)

사양에 따르면 :

CSS

형 선택자는 CSS 자격을 갖춘 이름의 구문을 사용하여 작성된 문서 언어 요소 유형의 이름입니다

이것이 요소 선택기 라고 생각 했지만 실제로 유형 선택기입니다. 사양은 계속 이야기합니다.CSS qualified names 실제로 이름이 무엇인지 제한하지 않는 합니다. 즉, 유형 선택기가 CSS 규정 된 이름 구문과 일치하는 한 기술적으로 올바른 CSS이며 문서의 요소와 일치합니다. 특정 사양에 존재하지 않는 요소 (HTML 등)에는 CSS 특정 제한이 없습니다.

HTML

원하는 문서에 태그를 포함시키는 것에 대한 공식적인 제한은 없습니다. 그러나 설명서에는

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

그리고 나중에 말합니다

작성자는이 사양 또는 기타 해당 사양에서 허용하지 않는 요소, 속성 또는 속성 값을 사용해서는 안됩니다. 그렇게하면 나중에 언어를 확장하기가 훨씬 어려워집니다.

스펙에서 unkown 요소가 허용 되는지 또는 어디에서 명시되어 있는지 확실 하지 않지만 인식 할 수없는 요소 의 HTMLUnknownElement 인터페이스에 대해 이야기 합니다. 일부 브라우저는 현재 사양에있는 요소를 인식하지 못할 수도 있습니다 (IE8을 염두에 두십시오).

그러나 맞춤 요소에 대한 초안이 있지만 아직 구현되지 않은 것 같습니다.

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

당신이 그것들을 사용하기로 결정했다면, 당신의 html을 주석하십시오! 어떤 사람들은 그것이 무엇인지 알아내는 데 어려움을 겪을 수 있으므로 주석이 많은 시간을 절약 할 수 있습니다.

이 같은,

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

나만의 맞춤 태그 / 요소를 만들면 이전 브라우저는 nav/ 와 같은 html5 요소와 같은 것을 전혀 알 수 없습니다 section.

이 개념에 관심이 있다면 올바른 방법으로 수행하는 것이 좋습니다.

시작하기

사용자 정의 요소를 사용하면 웹 개발자가 새로운 유형의 HTML 요소를 정의 할 수 있습니다. 이 스펙은 Web Components 우산 아래에있는 몇 가지 새로운 API 프리미티브 중 하나이지만 가장 중요 할 수 있습니다. 사용자 지정 요소로 잠금 해제 된 기능이 없으면 웹 구성 요소가 존재하지 않습니다.

새 HTML / DOM 요소 정의 다른 요소에서 확장되는 요소 만들기 사용자 지정 기능을 단일 태그에 논리적으로 묶음 기존 DOM 요소의 API 확장

당신이 할 수있는 일이 많으며이 기사가 그것을 좋아하는 것처럼 스크립트를 아름답게 만듭니다. HTML에서 새 요소를 정의하는 사용자 정의 요소 .

요약하자면

찬성

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

• 너무 많이 보지 않는 것이 좋습니다 divs . :피

• 코드에 독특한 느낌을줍니다

단점

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

• 다른 개발자는 사용자 정의 태그에 대해 모른다면 어떻게해야할지 모릅니다. (그들에게 설명하거나 의견을 추가하여 알려주세요)

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

선택은 전적으로 귀하에게 달려 있으며 프로젝트가 요구하는 것을 기반으로해야합니다.

2014 년 1/2 월 업데이트

다음은 내가 찾거나 공유 할 것으로 생각되는 유용한 요소 인 Custom Elements 입니다.

왜 커스텀 엘리먼트인가? 사용자 정의 요소를 사용하면 작성자가 자신의 요소를 정의 할 수 있습니다. 작성자는 JavaScript 코드를 사용자 정의 태그 이름과 연결 한 다음 표준 태그처럼 사용자 정의 태그 이름을 사용합니다.

예를 들어, super-button이라는 특수한 종류의 버튼을 등록한 후 다음과 같이 super 버튼을 사용하십시오.

사용자 지정 요소는 여전히 요소입니다. 표준이나 오늘날처럼 쉽게 작성, 사용, 조작 및 작성할 수 있습니다.

이것은 사용하기에 매우 좋은 라이브러리처럼 보이지만 Window의 빌드 상태를 통과하지 못했습니다. 이것은 또한 내가 생각하는 프리 알파에 있기 때문에 그것이 발전하는 동안 이것을 계속 지켜 볼 것입니다.

왜 당신이 그것들을 사용하기를 원하지 않습니까? 그것들은 일반적이거나 HTML5 표준의 일부가 아닙니다. 기술적으로는 허용되지 않습니다. 그들은 해킹입니다.

그래도 나는 그들을 좋아한다. XHTML5에 관심이있을 수 있습니다. 고유 한 태그를 정의하고 표준의 일부로 사용할 수 있습니다.

또한 다른 사람들이 지적했듯이 유효하지 않으므로 이식성이 없습니다.

왜 그들이 존재하는지 몰랐습니까? 그것들이 일반적이지 않다는 것을 제외하고는 모르겠습니다. 아마도 그는 단지 당신이 할 수 있다는 것을 알지 못했습니다.

구성 태그는 현재 사용중인 모든 브라우저와 향후 모든 브라우저에서 안정적으로 작동하지 않을 수 있으므로 거의 사용되지 않습니다.

브라우저는 HTML 코드를 알고있는 요소로 구문 분석해야하며, 구성 태그는 DOM (Document Object Model)에 맞도록 다른 것으로 변환됩니다. 웹 표준은 표준 외부의 모든 것을 처리하는 방법을 다루지 않기 때문에 웹 브라우저는 비표준 코드를 다른 방식으로 처리하는 경향이 있습니다.

웹 개발은 또 다른 불확실성을 추가하지 않고 자체 단점이있는 여러 브라우저로 충분하지 않습니다. 실제로는 표준에있는 것들, 즉 브라우저 공급 업체가 따르려고하는 것들을 고수하는 것이 가장 좋습니다. 그래서 실제로 작동 할 수있는 가장 좋은 기회가 있습니다.

메이크업 태그는 ID가있는 p (일반적으로 일부 텍스트 블록)보다 혼란 스럽거나 명확하지 않을 수 있습니다. 우리는 모두 ID가있는 AP가 단락이라는 것을 알고 있지만, 어떤 구성 태그가 어떤 용도로 사용되는지 알고있는 사람은 누구입니까? 적어도 그것은 내 생각입니다. :) 따라서 이것은 기능 중 하나보다 스타일 / 명확성 문제입니다.

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

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

물론 그것은 좋은 XML 문서가 아니며 문법과 XML 선언이 부족합니다. HTML 선언 헤더를 사용하면 (그리고 올바른 MIME 유형을 보내는 서버 구성 일 수도 있음) 대신 HTML이 잘못됩니다.

(X) HTML은 요소가 웹 페이지 프리젠 테이션 컨텍스트에서 유용한 의미 론적 의미를 갖기 때문에 일반 XML보다 장점이 있습니다. 도구는이 의미와 함께 작동 할 수 있으며 다른 개발자는 그 의미를 알고 있으며 오류가 적고 읽기 쉽습니다.

그러나 다른 상황에서는 프리젠 테이션을 수행하기 위해 XML 및 / 또는 XSLT와 함께 CSS를 사용하는 것이 좋습니다. 이것이 당신이 한 일입니다. 이것이 당신의 작업이 아니기 때문에, 당신은 무엇을하고 있는지 알지 못했고, HTML / CSS는 대부분의 시간을 시나리오에서 고수하는 더 좋은 방법입니다.

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

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

나는 실제로 그것을 올바르게하는 방법에 대한 그의 제안과 관련하여 문제를 겪습니다.

1. <p>태그 문단이다. 나는 사람들이 단순히 div 대신 항상 간격을 사용하거나 부드럽게하기 때문에 그것을 사용하는 것을 봅니다. 단락이 아닌 경우 사용하지 마십시오.

2. 구체적으로 (예를 들어, 자바 스크립트로) 타겟팅 할 필요가없는 한 모든 것에 ID를 붙일 필요는 없습니다. 클래스 또는 일직선 div를 사용하십시오.

CSS는 초기부터 마크 업과 무관하게 설계되었으므로 DOM 구조 (예 : SVG)와 같은 트리를 생성하는 모든 마크 업 언어와 함께 사용할 수 있습니다. name token프로덕션 을 준수하는 모든 태그 는 CSS에서 완벽하게 유효합니다. 따라서 귀하의 질문은 CSS 자체보다는 HTML에 관한 것입니다.

사용자 정의 태그가있는 요소는 HTML5 사양에서 지원됩니다. HTML5는 DOM에서 알려지지 않은 요소를 구문 분석하는 방법을 표준화합니다. 따라서 HTML5는 맞춤 요소를 엄격하게 사용하도록하는 첫 번째 HTML 사양입니다. <!DOCTYPE html>문서에서 HTML5 doctype을 사용해야 합니다.

맞춤 태그 이름 자체에서 ...

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

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

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

^{분명히 아무도 그것을 언급하지 않았으므로 그렇게 할 것입니다.}

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

인터넷이 처음으로 주류가되기 시작한 1990 년대에 브라우저 시장에서 경쟁이 치열 해졌습니다. 경쟁력을 유지하고 사용자를 끌어 들이기 위해 일부 브라우저 (주로 Internet Explorer)는 페이지 디자이너 가 무엇을 의미 하는지 파악하여 잘못된 마크 업을 허용함으로써 (예 :<b><i>foobar</b></i> 굵게 표시됨) 이탤릭체).

한 브라우저가 구문 오류에 대해 계속 불평하고 다른 브라우저가 사용자가 던진 것을 먹었고 (더 많거나 적은) 올바른 결과를 내뱉 으면 사람들이 자연스럽게 후자에 몰려 들기 때문에 어느 정도 의미가 있습니다.

많은 사람들이 브라우저 전쟁이 끝났다고 생각했지만 Chrome이 출시 된 후 지난 몇 년 동안 브라우저 공급 업체 간의 새로운 전쟁이 재개되었으며 Apple은 다시 성장하기 시작하여 Safari를 밀고 IE의 지배력을 잃었습니다. (당신으로 인해 인식 협력과 브라우저 벤더 표준 지원으로는 "냉전"을 호출 할 수 있습니다.) 따라서, 심지어 현대의 브라우저에있는 놀라운 아닌 가정으로 웹 표준을 엄격하게 준수 실제로 "영리"으로 시도하고는 이전과 같은 이점을 얻으려면 이와 같은 표준 동작을 허용하십시오.

불행하게도, 대규모되었다이 허용 행위 ( 일부 잘못 마크 업 웹 페이지의 성장에 힘 심지어 암을 말한다). IE가 가장 관대하고 인기있는 브라우저였으며 Microsoft의 지속적인 표준 유출로 인해 IE는 나쁜 디자인을 장려하고 홍보하며 깨진 페이지를 전파하고 영속시키는 것으로 악명이 높아졌습니다.

현재 일부 브라우저에서 이와 같은 단점과 악용을 피할 수는 있지만 가끔 퍼즐이나 게임 이외의 웹 페이지와 사이트를 만들 때 항상 웹 표준을 고수하여 올바르게 표시되고 브라우저 업데이트로 깨지지 않도록하십시오 (완전히 무시 될 수 있음).

브라우저는 일반적으로 CSS가 유효한지 여부에 관계없이 CSS를 HTML 태그와 관련 시키지만, 절대로 그렇게하지 않아야합니다.

CSS 관점에서 볼 때 기술적으로 아무런 문제가 없습니다. 그러나 구성 태그를 사용하는 것은 HTML에서 절대로 수행해서는 안되는 일입니다.

HTML은 마크 업 언어입니다. 즉, 각 태그는 특정 유형의 정보에 해당합니다.

구성한 태그는 어떤 유형의 정보와도 일치하지 않습니다. 이렇게하면 Google과 같은 웹 크롤러에서 문제가 발생합니다.

올바른 마크 업 의 중요성 에 대한 자세한 정보를 읽으십시오 .

편집하다

div는 여러 관련 요소의 그룹을 나타내며 블록 형태로 표시되며 그와 같이 조작 할 수 있습니다.

스패 인은 현재있는 컨텍스트와 다르게 스타일을 지정할 요소를 나타내며 블록이 아니라 인라인으로 표시되어야합니다. 한 문장에서 몇 단어가 모두 대문자 여야하는 경우를 예로들 수 있습니다.

사용자 정의 태그는 표준과 관련이 없으므로 span / div를 대신 class / ID 속성과 함께 사용해야합니다.

Angular JS 와 같이 매우 구체적인 예외 가 있습니다.

CSS에는 "태그 선택기"라는 것이 있지만 실제로는 태그가 무엇인지 모릅니다. 그것은 문서의 언어가 정의 할 수 있도록 남겨둔 것입니다. CSS는 HTML뿐만 아니라 XML에서도 사용되도록 설계되었습니다 (DTD 나 다른 유효성 검사 체계를 사용하지 않는다고 가정 할 경우). "태그"및 "속성"과 같은 것들이 정확히 무엇에 해당하는지에 대한 고유 한 의미론을 생각해 내야하지만 다른 언어와 함께 사용할 수도 있습니다.

브라우저는 일반적으로 HTML에서 알 수없는 태그에 CSS를 적용합니다. 이는 완전히 깨뜨리는 것보다 낫다고 생각하기 때문입니다. 최소한 무언가를 표시 할 수 있습니다. 그러나 "가짜"태그를 일부러 사용 하는 것은 매우 나쁜 습관입니다. 그 이유 중 하나는 새 태그가 수시로 정의되기 때문에 가짜 태그처럼 보이지만 같은 방식으로 작동하지 않는 경우 새 브라우저에서 사이트에 문제가 발생할 수 있기 때문입니다.

CSS가 가짜 요소와 작동하는 이유는 무엇입니까? 어쨌든 사용해서는 안되기 때문에 다른 사람을 해치지 않기 때문입니다.

교수님이 왜 내가 만든 요소를 ​​사용하기를 원하지 않습니까? 해당 요소가 나중에 사양에 의해 정의되면 요소는 예측할 수없는 동작을 갖습니다.

또한 왜 구성 요소가 존재하고 CSS와 함께 작동하는지 알지 못했습니다. 드문 일입니까? 그는 대부분의 다른 웹 개발자와 마찬가지로 미래에 임의로 중단 될 수있는 것을 사용해서는 안된다는 것을 이해합니다.