code

HTML: 유효한 ID 속성 값입니까?

starcafe 2023. 4. 8. 09:06

HTML: 유효한 ID 속성 값입니까?

「」를 idHTML 요 html 、 에 html 、 html html 、 html html html html?

HTML 4 의 경우는, 기술적으로 다음과 같습니다.

ID 및 NAME 토큰은 문자([A-Za-z])로 시작해야 하며 문자, 숫자([0-9]), 하이픈("-), 밑줄("_), 콜론(":") 및 마침표("")로 시작할 수 있습니다.

HTML 5는 보다 관대하며, ID는 적어도1개의 문자를 포함해야 하며 공백 문자를 포함할 수 없습니다.

XHTML 에서는 id Atribut은 대소문자를 구분합니다.

단순히 실용적인 문제이기 때문에 특정 문자를 피하는 것이 좋습니다.마침표, 콜론 및 '#'은 CSS 셀렉터에서 특별한 의미를 가지므로 CSS의 백슬래시 또는 jQuery에 전달되는 셀렉터 문자열의 더블 백슬래시를 사용하여 이러한 문자를 이스케이프해야 합니다.ID의 마침표와 콜론에 열광하기 전에 스타일시트나 코드의 문자를 얼마나 자주 피해야 하는지 생각해 보세요.

들어 HTML "HTML" 입니다.<div id="first.name"></div>이 는 CSS에서 CSS로 할 수 .#first\.namejQuery라고 .$('#first\\.name')., '백슬래시$('#first.name')를 가진 first도 있습니다.name이것은 간과하기 쉬운 버그입니다.에는 아이디를 게 더 도 있어요.first-name대신 마침표가 아닌 하이픈을 사용합니다.

명명 규칙을 엄격하게 준수하여 개발 태스크를 단순화할 수 있습니다.예를 들어 완전히 소문자로 제한하고 항상 하이픈 또는 밑줄로 단어를 구분하는 경우(둘 다 제외하고 둘 중 하나를 선택하고 다른 하나를 사용하지 않음), 기억하기 쉬운 패턴을 얻을 수 있습니다. 과연 '그랬나'라는 생각이 않을 이다.firstName ★★★★★★★★★★★★★★★★★」FirstName라고 하면, 타이핑해야 을 알 수 입니다." 라고 하다.first_name카멜 케이스를 선호하십니까?그런 다음 하이픈이나 밑줄을 사용하지 않도록 제한하고 항상 첫 번째 문자에 대문자 또는 소문자 중 하나를 일관되게 사용합니다.

현재 매우 불명확한 문제는 적어도 하나의 브라우저 Netscape 6이 ID 속성 값을 대소문자를 구분하는 것으로 잘못 취급했다는 것입니다.그 말은 만약 당신이 타이핑을 했다면id="firstName" 및 HTML('f'')로 지정합니다.#FirstName { color: red }CSS(대문자 'F')에서 버그가 있는 브라우저는 요소의 색상을 빨간색으로 설정하지 못했습니다.4월에 6을하도록 요청받지.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

HTML 4 의 사양으로부터:

ID 및 NAME 토큰은 문자([A-Za-z])로 시작해야 하며 문자, 숫자([0-9]), 하이픈("-), 밑줄("_), 콜론(":") 및 마침표("")로 시작할 수 있습니다.

일반적인 실수는 숫자로 시작하는 ID를 사용하는 것입니다.

id/name 속성에는 기술적으로 콜론과 마침표를 사용할 수 있지만 둘 다 피하는 것이 좋습니다.

CSS(및 jQuery와 같은 여러 JavaScript 라이브러리)에서는 마침표와 콜론이 모두 특별한 의미를 가지므로 주의하지 않으면 문제가 발생합니다.마침표는 클래스 셀렉터이고 콜론은 의사 셀렉터입니다(마우스가 요소 위에 있을 때 요소의 ":hover" 등).

요소에 "my.cool:thing"이라는 ID를 지정하면 CSS 셀렉터는 다음과 같이 표시됩니다.

#my.cool:thing { ... /* some rules */ ... }

즉, CSS-speak에서 "my"라는 ID, "cool"이라는 클래스, "thing" 의사 선택기를 가진 요소"라는 의미입니다.

숫자, 밑줄 및 하이픈 등 모든 대소문자의 A-Z를 사용합니다.그리고 위에서 설명한 바와 같이 ID가 고유한지 확인합니다.

그것이 당신의 첫 번째 관심사입니다.

HTML5: ID 및 클래스 속성에 허용되는 값

HTML5 에서는, ID 의 값에 관한 제한은 다음과 같습니다.

문서에서 고유해야 합니다.
공백 문자를 포함할 수 없습니다.
하나 이상의 문자를 포함해야 합니다.

클래스에도 같은 규칙이 적용됩니다(물론 고유성은 제외).

따라서 값은 모두 숫자, 한 자리 숫자, 구두점 문자, 특수 문자 등을 포함할 수 있습니다.공백은 없습니다.HTML4와는 많이 다릅니다.

HTML 4에서 ID 값은 문자로 시작해야 하며, 문자, 숫자, 하이픈, 밑줄, 콜론 및 마침표만 사용할 수 있습니다.

HTML5 에서는, 다음의 항목이 유효합니다.

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

ID 값에 숫자, 구두점 또는 특수 문자를 사용하면 다른 컨텍스트(CSS, JavaScript, regex 등)에서 문제가 발생할 수 있습니다.

예를 들어 다음 ID는 HTML5에서 유효합니다.

<div id="9lions"> ... </div>

단, CSS에서는 무효입니다.

CSS2.1 사양부터:

4.1.3 문자와 대소문자

CSS 에서는, 식별자(실렉터의 요소명, 클래스, 및 ID 를 포함한다)에는, 문자(a-zA-Z0-9)와 ISO 10646 문자 U+00A0 이후, 하이픈(-)과 언더 스코어(_)만을 포함할 수 있습니다.이것들은 숫자, 2개의 하이픈, 또는 그 후에 하이픈을 사용할 수 없습니다.

대부분의 경우 제한사항이나 특별한 의미가 있는 문자는 이스케이프할 수 있습니다.

W3C 레퍼런스

HTML5

3.2.5.1.id

id Identifier( 고유 를 합니다.attribute는, 「Id(ID)」입니다.

값은 요소의 홈 하위 트리에 있는 모든 ID에서 고유해야 하며 하나 이상의 문자를 포함해야 합니다.값은 공백 문자를 포함할 수 없습니다.

주의: ID의 형식에 대한 다른 제한은 없습니다.특히 ID는 숫자, 숫자, 밑줄, 구두점 등으로 구성됩니다.

.2.5.7항class

Atribute(지정되어 있는 경우)에는 요소가 속한 다양한 클래스를 나타내는 공백으로 구분된 토큰 집합인 값이 있어야 합니다.

HTML 요소가 할당한 클래스는 클래스 속성 값이 공백으로 분할될 때 반환되는 모든 클래스로 구성됩니다(중복은 무시됩니다).

클래스 속성에서 작성자가 사용할 수 있는 토큰에 대한 추가 제한은 없지만 작성자는 콘텐츠의 원하는 표시를 설명하는 값 대신 콘텐츠의 특성을 설명하는 값을 사용할 것을 권장합니다.

jQuery는 유효한 ID 이름을 처리합니다.메타 문자(점, 세미콜론, 대괄호 등)를 이스케이프하면 됩니다.JavaScript는 당신이 쓸 수 없기 때문에 따옴표에 문제가 있다고 말하는 것과 같다.

var name = 'O'Hara';

jQuery API의 셀렉터(하단 참고 참조)

엄밀하게 일치해야 합니다.

[A-Za-z][-A-Za-z0-9_:.]*

그러나 jQuery는 콜론에 문제가 있는 것 같기 때문에 피하는 것이 좋을지도 모릅니다.

HTML5:

id 속성에 대한 추가 제한이 없어집니다(여기를 참조).다음 요건만 남아 있습니다(이 문서의 고유성 제외).

값에는 하나 이상의 문자가 포함되어야 합니다(공백일 수 없음).
공백 문자를 사용할 수 없습니다.

HTML5 이전:

ID는 일치해야 합니다.

[A-Za-z][-A-Za-z0-9_:.]*

A-Z 또는 a-z 문자로 시작해야 합니다.
" " " 를 포함할 수 .- (진행),_ (밑줄),: 및 (기호) ».)(마침표)

피해야 .: ★★★★★★★★★★★★★★★★★」.★★★★

예를 들어 ID는 "a.b:c"로 라벨링되고 스타일시트에서 #a.b:c로 참조될 수 있지만 요소의 ID일 뿐만 아니라 ID "a", 클래스 "b", 의사 선택기 "c"를 의미할 수도 있습니다. 것이 .. ★★★★★★★★★★★★★★★★★」:다같이.

하이픈, 밑줄, 마침표, 콜론, 숫자 및 문자는 모두 CSS 및 jQuery에서 사용할 수 있습니다.다음은 작동해야 하지만 페이지 전체에서 고유해야 하며 [A-Za-z]로 시작해야 합니다.

콜론 및 마침표를 사용하는 작업에는 좀 더 많은 작업이 필요하지만 다음 예시와 같이 작업을 수행할 수 있습니다.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

많은 에서는 「」를 사용하고 있습니다.id, 즉 하지 않은입니다.

HTML 5 드래프트 사양에서는, 다음의 룰을 느슨하게 하고 있습니다.id ★★★★★★★★★★★★★★★★★」name속성: 이제 공백이 포함되지 않는 불투명한 문자열일 뿐입니다.

HTML5

ID는 고유해야 합니다. 즉, 동일한 ID 값을 가진 여러 요소가 문서에 있으면 안 됩니다.

HTML5의 ID 콘텐츠에 관한 규칙은 다음과 같습니다(단일하다는 점과는 별개로).

이 속성의 값은 공백이 없어야 합니다.[...] HTML 5에서는 이 제한이 해제되었지만 호환성을 위해 ID는 문자로 시작해야 합니다.

ID에 관한 W3 사양은 다음과 같습니다(MDN).

다음과 같은 제한이 있는 임의의 문자열:

최소 한 글자 길이여야 합니다.

공백 문자를 포함할 수 없습니다.

이전 버전의 HTML에서는 ID 값의 내용에 더 큰 제한이 있었습니다(예를 들어 숫자로 시작하는 ID 값은 허용하지 않았습니다).

상세 정보:

W3 - 글로벌아트리뷰트(id)
MDN 어트리뷰트(id)

마침표가 있는 ID를 참조하려면 백슬래시를 사용해야 합니다.하이픈인지 밑줄인지 모르겠어요.

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

HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

HTML 4 사양에서...

ID 및 NAME 토큰은 문자([A-Za-z])로 시작해야 하며 문자, 숫자([0-9]), 하이픈("-), 밑줄("_), 콜론(":") 및 마침표("")로 시작할 수 있습니다.

또한, 아이디는 고유하다는 것을 절대 잊지 마세요.ID 값은 한 번 사용하면 문서 어디에도 다시 나타나지 않을 수 있습니다.

여러 개의 ID가 있을 수 있지만 모두 고유한 값을 가져야 합니다.

반면, 클래스 엘리먼트가 있습니다.ID와 마찬가지로 여러 번 나타날 수 있지만 값을 반복해서 사용할 수 있습니다.

요소의 고유 식별자입니다.

문서에 동일한 ID 값을 가진 요소가 여러 개 있으면 안 됩니다.

다음과 같은 제한이 있는 임의의 문자열:

최소 한 글자 길이여야 합니다.
에는 공백 문자를 사용할 수 없습니다.
- U+0020 공간
- U+0009 문자표 (탭)
- U+000A 라인 피드(LF)
- U+000C 폼 피드(FF)
- U+000D 캐리지 리턴(CR)

음음음음 using using using using using using using using using using 이외의 문자를 사용ASCII letters and digits, '_', '-' and '.'은 호환성 문제가 할 수 .이러한 되지 않았기 입니다.HTML 4 HTML 5아이디

HTML 사양에서는 콜론(:)과 마침표(.)는 유효하지만 CSS에서는 ID 실렉터로는 무효이기 때문에 그 목적으로 사용하는 경우는 피하는 것이 좋습니다.

HTML5의 경우:

값은 요소의 홈 하위 트리에 있는 모든 ID에서 고유해야 하며 하나 이상의 문자를 포함해야 합니다.값은 공백 문자를 포함할 수 없습니다.

공백 없이 하나 이상의 문자를 입력하세요.

이를 통해 악센트가 있는 문자를 사용하는 등 유효한 사용 사례에 대한 문을 열 수 있습니다.또한 매우 주의하지 않으면 CSS와 JavaScript 모두에서 문제를 일으킬 수 있는 ID 값을 사용할 수 있기 때문에, 이 기능을 사용하면 우리 스스로 총알을 발사할 수 있는 탄약도 많이 얻을 수 있습니다.

영숫자 값"-" 및 "_"는 모두 유효합니다.단, ID 이름은 A-Z 또는 a-z 사이의 임의의 문자로 시작해야 합니다.

ID는 레이아웃의 부품 이름을 지정하는 데 가장 적합하므로 ID와 클래스에 동일한 이름을 지정해서는 안 됩니다.
ID 에서는 영숫자와 특수문자를 사용할 수 있습니다.
이 말은 피하세요.# : . * ! 표시
공백은 사용할 수 없습니다.
숫자 또는 하이픈 뒤에 숫자가 이어지는 것은 아니다
대소문자를 구별하다
ID 선택기를 사용하는 것이 클래스 선택기를 사용하는 것보다 빠릅니다.
긴 CSS 클래스 또는 ID 규칙 이름에 하이픈 "-"(밑줄 "_"도 사용할 수 있지만 SEO에는 적합하지 않음)을 사용합니다.
규칙에 ID 선택기가 키 선택기로 있는 경우 태그 이름을 규칙에 추가하지 마십시오.ID는 고유하기 때문에 태그 이름을 추가하면 일치 프로세스가 불필요하게 느려집니다.
을 임의의 할 수 4.에서는, id 속성을 HTML5 id id id id id 에는 할 수 없습니다.HTML 4.01 id id id id 에는 사용할 수 없습니다.<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

ES2015 이후 문서 문자 집합이 UTF-8로 설정되어 있으면 거의 모든 유니코드 문자를 ID로 사용할 수 있습니다.

테스트 장소는 https://mothereff.in/js-variables 입니다.

ES2015에서 유효한 JavaScript 변수 이름 확인

ES2015에서 식별자는 $, _ 또는 Unicode 파생 코어 속성 ID_Start가 있는 기호로 시작해야 합니다.

나머지 식별자에는 $, _, U+200C 제로 폭 비조이너, U+200D 제로 폭 조이너 또는 Unicode 파생 코어 속성 ID_Continue를 가진 기호를 포함할 수 있습니다.

const target = document.querySelector("div").id

console.log("Div id:", target )

document.getElementById(target).style.background = "chartreuse"

div {
  border: 5px blue solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜"></div>

쓸까요?좋은 생각이 아닌 것 같아!

JavaScript: "함수 본문 뒤에 구문 오류 누락" 확인.

공백이 없으며 a ~ z 및 0 ~ 9의 문자로 시작해야 합니다.

HTML에서

ID는 {A-Z} 또는 {a-z}(으)로 시작해야 합니다.숫자, 마침표, 하이픈, 밑줄 및 콜론을 추가할 수 있습니다.

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

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

, 콜론마침표로 ID를 수 ,.). CSS는 이러한 ID를 실렉터로 사용하기 어렵습니다.주로 의사 요소를 사용하는 경우(:before ★★★★★★★★★★★★★★★★★」:after를 참조해 주세요.

JavaScript에서도 이러한 ID를 선택하기 어렵습니다.따라서 많은 개발자들이 선호하는 방법으로 처음 4개의 ID를 사용해야 하며, 필요하다면 마지막 2개의 ID도 사용할 수 있습니다.

월은 [a-z], [A-Z], [0-9], [* _ : -]를 사용할 수 있습니다.

HTML5에 사용됩니다.

id는 임의의 태그로 추가할 수 있습니다.

도와줘요, 자바스크립트가 고장났어요!

ID는 중복될 수 없다고 다들 말합니다.

FireFox를 제외한 모든 브라우저에서 사용 가능

<div id="ONE"></div>
<div id="ONE"></div>
<div id="ONE"></div>
<script>
  document.body.append( document.querySelectorAll("#ONE").length , ' DIVs!')
  document.body.append( ' in a ', typeof ONE )
  console.log( ONE ); // a global var !!
</script>

설명.

세기가 바뀌면서 마이크로소프트는 브라우저 시장의 90%를 점유하게 되었습니다.

표준화가 이루어지지 않은 브라우저 동작을 구현했습니다.

1. 모든 ID에 대한 글로벌 변수 생성

2. 중복 ID용 어레이 작성

이후 브라우저 벤더는 모두 이 동작을 복사했습니다.그렇지 않으면 브라우저는 이전 사이트를 지원하지 않습니다.

2015년경 Mozilla는 FireFox에서 2.를 제거했으며 1.는 여전히 작동합니다.

다른 모든 브라우저는 여전히 1.과 2.를 수행합니다.

타이핑 때문에 매일 쓰고 있어요.ONEdocument.querySelector("#ONE")프로토타입을 더 빠르게 만들 수 있습니다.

HTML ID

id 속성은 요소의 고유 식별자(ID)를 지정합니다.

ID의 형식에 대한 다른 제한은 없습니다.특히 ID는 숫자, 숫자, 밑줄, 구두점 등으로 구성됩니다.

요소의 고유 식별자는 다양한 목적으로 사용될 수 있으며, 특히 프래그먼트를 사용하여 문서의 특정 부분에 링크하는 방법, 스크립트 작성 시 요소를 대상으로 하는 방법 및 CSS에서 특정 요소를 스타일링하는 방법으로 사용됩니다.

대문자와 소문자의 알파벳이 기능합니다.
'_'와 '-'도 동작합니다.
숫자는 기능한다
콜론(,)과 마침표(.)가 기능하는 것 같다.
흥미롭게도 이모티콘은

알파벳 → 대문자 & 스몰

숫자 → 0 ~9

특수 문자 → ':', '-', '_', '.'

형식은 '.' 또는 알파벳으로 시작하고 그 뒤에 더 많은 알파벳 또는 숫자의 특수 문자 중 하나를 사용해야 합니다.id 필드의 값은 '_'로 끝날 수 없습니다.

또한 공백은 사용할 수 없습니다.공백은 다른 값으로 취급됩니다.ID Atribute의 경우는 유효하지 않습니다.

언급URL : https://stackoverflow.com/questions/70579/html-valid-id-attribute-values

'code' 카테고리의 다른 글

SQL Server Express의 제한 사항 (0)	2023.04.13
PowerShell: 텍스트 파일 내용 전체를 변수에 저장 (0)	2023.04.08
SQL Server 트랜잭션 로그를 지우려면 어떻게 해야 합니까? (0)	2023.04.08
빌드 후 이벤트 실행 PowerShell (0)	2023.04.08
다른 div 내부의 div를 수직으로 중심 맞춤 (0)	2023.04.08

현재글HTML: 유효한 ID 속성 값입니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

ajax, angularJS, MariaDB, sql-server, ReactJS, json, C, asp.net, Oracle, jQuery, Excel, Git, PYTHON, wordpress, bash, PowerShell, mysql, SWIFT, mongodb, spring-boot,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

starcafe

HTML: 유효한 ID 속성 값입니까?

HTML: 유효한 ID 속성 값입니까?

HTML5: ID 및 클래스 속성에 허용되는 값

HTML5:

HTML5 이전:

HTML5

상세 정보:

HTML

설명.

'code' 카테고리의 다른 글

'code'의 다른글

티스토리툴바

HTML: 유효한 ID 속성 값입니까?

HTML: 유효한 ID 속성 값입니까?

HTML5: ID 및 클래스 속성에 허용되는 값

HTML5:

HTML5 이전:

HTML5

상세 정보:

HTML

설명.

'code' 카테고리의 다른 글

'code'의 다른글

관련글

티스토리툴바