HTML
클래스 및 ID

소개

통사론

• class = "class1 class2 class3"
• id = "uniqueid"

매개 변수

비고

요소에 클래스 제공

클래스는 할당 된 요소의 식별자입니다. 클래스에 요소를 할당하려면 class 특성을 사용하십시오.

<div class="example-class"></div>

요소에 여러 클래스를 지정하려면 클래스 이름을 공백으로 구분하십시오.

<div class="class1 class2"></div>

CSS에서 클래스 사용하기

클래스는 특정 엘레멘트의 모든 요소를 ​​변경하지 않고도 그 엘레멘트의 스타일을 지정할 수있다. 예를 들어,이 두 span 요소는 완전히 다른 스타일을 가질 수 있습니다.

<span></span>
<span class="special"></span>

동일한 이름의 클래스는 페이지의 요소 수에 지정할 수 있으며 모든 클래스는 해당 클래스와 연관된 스타일을받습니다. CSS 내에서 요소를 지정하지 않으면 항상 유효합니다.

예를 들어 두 가지 요소가 있는데 둘 다 클래스 highlight .

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

CSS가 아래와 같으면 두 요소의 텍스트에 녹색이 적용됩니다.

.highlight { color: green; }

그러나 클래스 highlight 가있는 div 만 타겟팅하려는 경우 아래와 같이 특수성을 추가 할 수 있습니다.

div.highlight { color: green; }

그럼에도 불구하고 CSS로 스타일을 .highlight 때 일반적으로 클래스가있는 요소 (예 : div.highlight )보다는 클래스 (예 : .highlight ) 만 사용하는 것이 좋습니다.

다른 선택기와 마찬가지로 클래스도 중첩 될 수 있습니다.

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

클래스 선택기를 연결하여 여러 클래스가 조합 된 요소 만 선택할 수도 있습니다. 예를 들어 이것이 우리의 HTML 인 경우 :

<div class="special left menu">This text will be pink</div>

그리고이 특정 텍스트 분홍색을 채색하고 싶습니다. CSS에서 다음을 할 수 있습니다.

.special.left.menu { color: pink; } 

요소에 ID 부여

요소의 ID 속성은 전체 문서에서 고유해야하는 식별자입니다. 그 목적은 앵커 (anchor) 사용, 스크립팅 또는 스타일 지정 (CSS 사용)을 연결할 때 요소를 고유하게 식별하는 것입니다.

<div id="example-id"></div>

두 개의 다른 종류의 요소에 속성이 첨부되어 있어도 같은 문서에 동일한 ID를 가진 두 개의 요소가 없어야합니다. 예를 들어 다음 코드는 올바르지 않습니다.

<div id="example-id"></div>
<span id="example-id"></span>

브라우저는이 코드를 렌더링하기 위해 최선을 다하지만 CSS로 스타일을 지정하거나 JavaScript로 기능을 추가 할 때 예기치 않은 동작이 발생할 수 있습니다.

CSS에서 ID로 요소를 참조하려면 ID 앞에 # 붙입니다.

#example-id { color: green; }

특정 페이지에서 ID가있는 요소로 이동하려면 URL에 요소 이름과 함께 # 을 추가하십시오.

http://example.com/about#example-id

이 기능은 대부분의 브라우저에서 지원되며 추가 JavaScript 또는 CSS가 필요하지 않습니다.

중복 된 ID와 관련된 문제

동일한 ID를 가진 요소가 두 개 이상 있으면 문제를 해결하는 것이 어렵습니다. HTML 구문 분석기는 대개 어떤 경우에도 페이지 렌더링을 시도합니다. 일반적으로 오류가 발생하지 않습니다. 그러나 페이스는 잘못 행동하는 웹 페이지로 끝날 수 있습니다.

이 예에서 :

<div id="aDiv">a</div>
<div id="aDiv">b</div>

CSS 선택기가 여전히 작동 함

#aDiv {
    color: red;
}

그러나 JavaScript는 두 가지 요소를 모두 처리하지 못합니다.

var html = document.getElementById("aDiv").innerHTML;

이 경우 html 변수는 첫 번째 div 콘텐츠 ("a") 합니다.

허용되는 값

신분증

<div id="container"> ... </div>
<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>

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

<div id="results"> ... </div>
<div id="results"> ... </div>

<div id="container"> ... </div>

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

클래스의 경우

클래스에 대한 규칙은 본질적으로 id 와 동일합니다. 차이점은 class 값 이 문서에서 고유 할 필요 는 없다는 것 입니다.

위의 예를 참조하면 동일한 문서에서 유효하지 않지만 다음과 같습니다.

<div id="results"> ... </div>
<div id="results"> ... </div>

이것은 완벽하게 괜찮습니다.

<div class="results"> ... </div>
<div class="results"> ... </div>

중요 정보 : ID 및 클래스 값이 HTML 외부에서 처리되는 방법

위의 규칙과 예는 HTML 컨텍스트 내에서 적용됩니다.

id 나 class 의 값에 숫자, 구두점 또는 특수 문자를 사용하면 CSS, JavaScript 및 정규식과 같은 다른 상황에서 문제가 발생할 수 있습니다.

예를 들어 다음 id 는 HTML5에서 유효하지만

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

... CSS에서 유효하지 않습니다.

4.1.3 문자와 케이스

CSS에서 식별자 (선택자의 요소 이름, 클래스 및 ID 포함)에는 문자 [a-zA-Z0-9] 및 ISO 10646 문자 U + 00A0 이상, 하이픈 (-) 및 밑줄 _); 두 자리 하이픈 또는 한 자리 뒤에 하이픈으로 시작할 수 없습니다 . _{(강조가 추가됨)}

대부분의 경우 제한이나 특별한 의미가있는 상황에서 문자를 이스케이프 할 수 있습니다.

W3C 참고 문헌

• 3.2.5.1 id 속성
• 3.2.5.7 class 속성
• 6.2 SGML 기본 유형