집 > 기사 > 웹 프론트엔드 > HTML 요소에 라벨을 붙일 때 클래스와 ID의 차이점은 무엇입니까?

HTML 요소에 라벨을 붙일 때 클래스와 ID의 차이점은 무엇입니까?

php中世界最好的语言원래의: 2018-01-23 10:54:002113검색

이번에는 HTML 요소에 주석을 달 때 클래스와 id의 차이점이 무엇인지, HTML 요소에 주석을 달 때 주의사항

은 무엇인지 함께 살펴보겠습니다.

웹 페이지에는 매우 복잡한 HTML 구조가 있습니다. CSS를 사용하여 관련 스타일을 정의하는 경우 이러한 구조에 해당하는 플래그를 지정한 다음 해당 CSS 선택기를 작성하여 할당된 스타일을 얻어야 합니다. 가장 일반적으로 사용되는 두 가지 주석 속성은 id와 class입니다. 예:

<div class=”header” id=”header” ></div>

이제 Attribute selector
등과 같은 더 많은 선택 방법이 있습니다. 다만, 속성 선택자를 이용하여 id와 class를 생략할 수는 있으나 추후 유지관리가 불편하고, 초기 브라우저와의 호환성이 좋지 않으며, 브라우저의 렌더링 효율에 영향을 미치는 등의 문제가 있다. 따라서 더 많은 옵션이 있지만 여전히 ID, 클래스 및 요소 이름을 사용하여 CSS 선택기를 구성하는 것이 좋습니다.

id와 class 모두 HTML 구조를 표시할 수 있으므로 무엇을 먼저 선택해야 하나요? 이 기사에서는 이에 대해 논의할 것입니다.

아이디와 클래스의 차이

경험이 있는 친구들은 이 부분을 건너뛰셔도 됩니다.

1. 고유성과 반복성

id는 웹 페이지 구조에서만 고유할 수 있습니다. 요소의 ID를 aa로 지정하면 aa라는 ID를 가진 HTML 요소가 웹 페이지에 나타날 수 없습니다. 강력한 브라우저는 여러 중복 ID를 지원하고 해당 스타일을 할당하지만 이는 표준에서 허용되지 않습니다.

반대로 웹 페이지 구조에서는 클래스를 재사용할 수 있습니다. 한 요소의 클래스를 bb로 지정하고, 다음 요소의 클래스를 bb로 지정할 수 있습니다. 이 두 요소에는 bb 스타일이 적용될 수 있습니다. 동시에. 또한 요소에 대해 여러 클래스 속성 값을 지정할 수도 있으므로 여러 속성의 스타일을 동시에 얻을 수 있습니다.

2. CSS에서는 우선순위

가 다릅니다

CSS 선택기에서는 ID와 클래스에 스타일을 적용하는 우선순위가 다릅니다. ID의 스타일 우선순위는 클래스의 스타일 우선순위보다 높습니다. ID가 aa이고 클래스가 bb인 div에 대해 다음 스타일을 지정하면

#aa{background:red;}   
.bb{background:blue;}

그러면 브라우저에 빨간색 배경이 표시됩니다.

3. 점프 기능

id 속성을 사용하여 앵커 태그 점프 기능을 추가합니다. 페이지의 div에 대해 id를 aa로 지정하면 현재 URL 뒤에 #aa가 추가됩니다. ID가 aa인 div의 위치로 이동합니다. 예: Baidu Encyclopedia 장 점프. 클래스에는 이 기능이 없습니다.

ID 대신 클래스를 사용하는 이유

클래스를 사용하면 어떤 이점이 있나요?

1. 이름 줄이기

복잡한 구조에 이름을 붙이는 것은 정말 귀찮은 일입니다. 웹 페이지에는 동일한 스타일과 효과(예: 통합 버튼 스타일)를 가진 많은 구조가 있으므로 공통 클래스 스타일을 작성한 다음 이 클래스를 동일한 스타일이 필요한 모든 구조에 할당합니다.

2. 재사용성이 높음

클래스는 다른 구조에서도 재사용이 가능하며 특정 요소에 여러 클래스를 적용할 수 있으므로 특정 클래스 스타일의 재사용성이 높습니다. 보다 극단적인 실용적인 응용 프로그램은 원자 클래스입니다. 예를 들어:

.fl{float:left;display:inline;}   
.fr{float:rightright;display:inline;}

일부 클래스를 가능한 한 작고 간결하게 작성한 다음 이 스타일이 필요한 요소에 대한 클래스를 직접 작성합니다(예: 위의 float)(예: class = "fl").

일반 애플리케이션의 경우 동일한 스타일이 필요한 일부 구조의 경우 하나의 스타일만 작성한 다음 이러한 구조에 동일한 클래스를 할당하면 높은 수준의 스타일 코드 재사용이 가능하며 더 편리합니다. 수정하다.

3. 낮은 우선순위

클래스의 우선순위는 요소 이름보다 높고 id보다 낮습니다. 낮은 우선순위 기능을 사용하면 디버깅 및 스타일 적용이 용이해집니다.

이전에 id를 사용하여 요소를 표시했고 이 요소의 스타일을 수정하려는 경우 해당 CSS 스타일 코드만 수정하거나 특정 스타일에 대해 !important 강조 구문을 사용하여 원래 스타일을 재정의할 수 있습니다.

요소가 클래스로 표시된 경우 요소에 직접 ID를 추가한 다음 요소 ID의 CSS 선택기를 구성하여 수정하고 덮어씁니다.

이러한 특성 때문에 나중에 유지 관리를 용이하게 하기 위해 클래스를 사용하여 요소를 표시해야 합니다.

4.id도 필수입니다.

class는 전능하지 않습니다. 동시에 id를 사용하여 표시해야 하는 곳도 많습니다.

5. 앵커 태그 점프

앵커 태그를 사용하여 페이지에서 점프하려면 특정 점프 대상의 ID만 지정하면 됩니다. 클래스는 여러 번 재사용될 수 있으므로 점프 기능이 없습니다. .

6. 입력에 사용됩니다 🎜

입력을 사용할 때 일반적으로 라벨 태그를 사용하여 이 입력의 기능을 설명합니다. 레이블을 입력과 연결하는 방법에는 두 가지가 있습니다. 하나는 레이블의 for 속성을 사용하는 것입니다. 다른 하나는 해당 입력을 레이블로 래핑하는 것입니다. 분명히 첫 번째 방법이 더 유연하고 우수하지만 해당 입력에 대해 id 속성을 지정해야 합니다.

또한 일부 특별한 요구 사항은 ID를 사용해야 하는데 여기에는 요약되어 있지 않습니다.

최고의 활용 조합

이전에도 클래스에 대한 비판이 많았고, 일부에서는 W3C가 클래스 태그를 폐지해야 한다는 주장도 있었습니다. Stalker m도 id 속성을 열성적으로 사용했지만 연습 과정에서 더 많은 것을 발견했습니다. 클래스의 더 많은 장점을 활용하고 대신 클래스를 사용하세요.

더 나은 조합은 클래스를 사용하여 대부분의 요소와 구조를 지정하고 특정 기능이 필요한 극소수의 요소에 ID 주석을 사용하는 것입니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!