ID와 클래스의 차이점은 무엇입니까?

무슨 사이의 차이점 <div class="">과 <div id="">때 그것은 CSS에 관해서? 사용하는 것이 괜찮 <div id="">습니까?

다른 개발자가 두 가지 방법 으로이 작업을 수행하는 것을 보았으며 자체 교육을 받았으므로 실제로 이해하지 못했습니다.

idsclass많은 것들에 적용될 수있는 곳에서 고유해야합니다 . CSS에서 id모양 #elementID과 class요소 모양.someClass

일반적으로 id특정 요소를 참조하려고 할 때마다 그리고 class여러 가지가 비슷할 때 사용하십시오. 예를 들어, 일반적인 id요소는 같은 것들이다 header, footer, sidebar. 공통 class요소는 highlight또는 과 같은 것 external-link입니다.

캐스케이드를 읽고 다양한 선택기에 지정된 우선 순위를 이해하는 것이 좋습니다. http://www.w3.org/TR/CSS2/cascade.html

그러나 가장 기본적인 우선 순위는 id선택자가 선택자보다 우선 한다는 것 class입니다. 당신이 이것을 가지고 있다면 :

<p id="intro" class="foo">Hello!</p>

과:

#intro { color: red }
.foo { color: blue }

id선택기가 선택기보다 우선 하기 때문에 텍스트는 빨간색 class입니다.

아마도 비유가 차이를 이해하는 데 도움이 될 것입니다.

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

학생 의 ID 카드는 구별된다. 캠퍼스의 두 학생은 같은 학생을 갖지 않습니다 ID 카드를 . 그러나 많은 학생들이 하나 이상의 수업 을 서로 공유 할 수 있으며 공유 할 것 입니다.

여러 명의 학생을 한 곳에 두는 것은 괜찮습니다. 생물학과 같이 수업 제목 . 그러나 여러 학생을 하나의 학생 ID로 사용 하는 것은 절대 허용되지 않습니다 .

제공 할 때 규칙을 학교 인터콤 시스템을 통해, 당신이 줄 수있는 규칙을 A와 클래스 :

"내일, 모든 학생들은 생물학 수업에 빨간 셔츠를 입어야합니다."

.Biology {
  color: red;
}

또는 특정 학생에게 고유 한 전화를 걸어 규칙을 줄 수 있습니다 ID .

"Jonathan Sampson은 내일 녹색 셔츠를 입을 것입니다."

#JonathanSampson {
  color: green;
}

이 경우 Jonathan Sampson은 두 가지 명령을받습니다. 하나는 생물학 수업의 학생이고 다른 하나는 직접적인 요구 사항입니다. Jonathan은 id 속성을 통해 녹색 셔츠를 입으라는 지시를 직접 받았으므로 이전에 빨간 셔츠를 입으라는 요청은 무시합니다.

더 구체적인 선택자가 이깁니다.

ID와 클래스를 사용하는 곳

이 둘의 간단한 차이점은 페이지에서 클래스를 반복적으로 사용할 수 있지만 ID는 페이지 당 한 번만 사용해야한다는 것입니다. 따라서 하나의 기본 컨텐츠 섹션 만 있으므로 페이지의 기본 컨텐츠를 표시하는 div 요소에 ID를 사용하는 것이 좋습니다. 반대로, 정의에 따라 두 번 이상 사용되므로 클래스를 사용하여 테이블에 대체 행 색을 설정해야합니다.

ID는 매우 강력한 도구입니다. ID가있는 요소는 요소 또는 그 내용을 어떤 방식으로 조작하는 JavaScript 조각의 대상이 될 수 있습니다. ID 속성은 앵커 태그를 이름 속성으로 대체하여 내부 링크의 대상으로 사용할 수 있습니다. 마지막으로, ID를 명확하고 논리적으로 만들면 문서 내에서 일종의 "자체 문서"역할을 할 수 있습니다. 예를 들어, 블록의 여는 태그에 "main", "header", "footer와 같은 ID가있는 경우 코드 블록에 주요 내용이 포함된다고 명시하기 전에 반드시 주석을 추가 할 필요는 없습니다. "등

ID는 전체 페이지에서 고유해야합니다.

클래스는 많은 요소에 적용될 수 있습니다.

때로는 ID를 사용하는 것이 좋습니다.

페이지에는 보통 하나의 바닥 글과 하나의 머리글이 있습니다.

그런 다음 바닥 글은 ID가있는 div에있을 수 있습니다

<div id = "footer"class = "...">

그리고 여전히 수업이 있습니다

클래스는 당신이 같은 스타일을 원하는 여러 요소에 사용되어야한다. ID는 고유 한 요소해야합니다. 이 튜토리얼을 참조하십시오 .

엄격한 준수자가되고 싶거나 페이지를 표준에 맞게 검증 하려면 W3C 표준을 참조해야합니다 .

ID는 고유합니다. 수업은 없습니다. 요소는 여러 클래스를 가질 수도 있습니다. 또한 요소에 클래스를 동적으로 추가하고 제거 할 수 있습니다.

어디서나 ID를 사용할 수 있다면 대신 클래스를 사용할 수 있습니다. 그 반대입니다.

이 규칙은 모든 페이지에있는 페이지 요소 (예 : "navbar"또는 "menu")에 ID를 사용하고 다른 모든 것에 대해서는 클래스를 사용하는 것으로 보이지만 이는 단지 규칙 일 뿐이며 사용법이 크게 다릅니다.

또 다른 차이점은 양식 입력 요소의 경우 <label>요소가 ID로 필드를 참조하므로을 사용하려는 경우 ID를 사용해야한다는 것 <label>입니다. 접근성 문제이므로 실제로 사용해야합니다.

지난 몇 년간 ID는 자바 스크립트 (getElementById)에서 쉽게 액세스 할 수 있기 때문에 선호되었습니다. jQuery와 다른 자바 스크립트 프레임 워크의 출현으로 이것은 현재 거의 문제가되지 않습니다.

수업은 카테고리와 같습니다. 많은 HTML 요소가 클래스에 속할 수 있으며 HTML 요소는 둘 이상의 클래스를 가질 수 있습니다. 클래스는 여러 HTML 요소에 적용 할 수있는 일반 스타일을 적용하는 데 사용됩니다.

ID는 식별자입니다. 그들은 독특합니다. 다른 사람은 동일한 ID를 가질 수 없습니다. ID는 HTML 요소에 고유 한 스타일을 적용하는 데 사용됩니다.

이 방식으로 ID와 클래스를 사용합니다.

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

이 예에서 헤더 및 컨텐츠 섹션은 #header 및 #content를 통해 스타일을 지정할 수 있습니다. 콘텐츠의 각 섹션은 #content .section을 통해 공통 스타일을 적용 할 수 있습니다. 킥을 위해서 중간 부분에 "특별한"클래스를 추가했습니다. 특정 섹션에 특별한 스타일이 적용되기를 원한다고 가정합니다. 이것은 .special 클래스를 사용하여 달성 할 수 있지만이 섹션은 여전히 ​​#content .section의 공통 스타일을 상속합니다.

JavaScript 또는 CSS 개발을 수행 할 때 일반적으로 ID를 사용하여 매우 특정한 HTML 요소에 액세스 / 조작하고 스타일을 다양한 요소에 액세스 / 적용하기 위해 클래스를 사용합니다.

CSS는 객체 지향적입니다. ID는 인스턴스, 클래스는 클래스를 말합니다.

CSS를 적용 할 때 CSS를 클래스에 적용하고 가능한 한 ID를 피하십시오. ID는 요소를 가져 오거나 이벤트 바인딩을 위해 JavaScript에서만 사용해야합니다.

CSS를 적용하려면 클래스를 사용해야합니다.

때때로 이벤트 바인딩을 위해 클래스를 사용해야합니다. 이러한 경우 CSS를 적용하는 데 사용되는 클래스를 피하고 해당 CSS가없는 새 클래스를 추가하십시오. 이것은 클래스의 CSS를 변경하거나 모든 요소의 CSS 클래스 이름을 모두 변경해야 할 때 도움이 될 것입니다.

CSS 선택기 공간은 실제로 조건부 ID 스타일을 허용합니다.

h1#my-id {color:red}
p#my-id {color:blue}

예상대로 렌더링됩니다. 왜 이렇게 하시겠습니까? 때로는 ID가 동적으로 생성되는 경우 등이 있습니다. 상위 수준의 ID 할당에 따라 타이틀을 다르게 렌더링하는 데 추가로 사용되었습니다.

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

개인적으로 더 긴 클래스 이름 선택기를 선호합니다.

body#list-page .title-block > h1 {font-size:56px}

치료를 약간 혼란스럽게 구별하기 위해 중첩 된 ID를 사용하는 것으로 나타났습니다. Sass / SCSS의 개발자로서 세계 가이 물건에 손을 중첩 된 ID가 표준이되고 있습니다.

마지막으로, 선택기 성능 및 우선 순위와 관련하여 ID가 ​​우세한 경향이 있습니다. 이것은 완전히 다른 주제입니다.

모든 요소는 클래스 또는 ID를 가질 수 있습니다.

클래스는 특정 유형의 디스플레이를 참조하는 데 사용됩니다. 예를 들어이 질문에 대한 답변을 나타내는 div에 대한 CSS 클래스가있을 수 있습니다. 많은 답변이 있기 때문에 여러 div에는 동일한 스타일이 필요하며 클래스를 사용합니다.

id는 단일 요소만을 나타냅니다. 예를 들어 오른쪽의 관련 섹션은 다른 곳에서 재사용하지 않는 특정 스타일을 가질 수 있으며 id를 사용합니다.

기술적으로 모든 클래스를 사용하거나 논리적으로 나눌 수 있습니다. 그러나 여러 요소에 대해 id를 재사용 할 수 없습니다.

클래스는 스타일을 요소 그룹에 적용하기위한 것입니다. ID 스타일은 해당 ID를 가진 요소에만 적용됩니다 (하나만 있어야 함). 일반적으로 클래스를 사용하지만 일회용이있는 경우 ID를 사용할 수 있습니다 (또는 스타일을 요소에 똑바로 붙이십시오).

고급 개발 ID 에서는 기본적으로 JavaScript를 사용할 수 있습니다.

반복 가능한 목적으로 클래스 es는 고유 해야하는 id와 반대로 편리 합니다.

아래는 위의 표현식을 보여주는 예입니다.

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

지금 당신은 여기에서 볼 수 box와 box12 개의 다른 <div>요소는, 그러나 우리는을 적용 할 수 있습니다box 와 bg-color-red그들 모두에 클래스를.

개념은 OOP 언어의 상속입니다 .

1) div id는 재사용 할 수 없으며 HTML의 한 요소에만 적용되어야하며 div 클래스는 여러 요소에 추가 할 수 있습니다.

2) 동일한 요소에 적용되고 충돌하는 스타일이있는 경우 id가 더 중요합니다. id의 스타일이 적용됩니다.

3) 스타일 요소는 항상을 넣어 div 클래스를 참조합니다. 이름 앞에 (도트), div id 클래스는 이름 앞에 # (해시)를 붙여서 참조합니다.

4) 예 :-

<style>선언 클래스 -.red-background { background-color: red; }

<style>선언의 id-#blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> 여기서 배경은 파란색입니다.

id그리고 class이되는 글로벌 / 표준 HTML 속성 (아래의 전역 속성은 모든 HTML 요소를 사용할 수 있습니다.)

class 요소에 하나 이상의 클래스 이름을 지정합니다 (스타일 시트의 클래스 참조).

id 요소의 고유 ID를 지정합니다

id 속성은 클래스 속성이 유사한 요소를 분류하는 방법을 제공하는 문서 전체의 고유 식별자를 요소에 제공합니다.

id 속성 값은 HTML 속성에서 고유해야하며, 동일한 속성을 적용하려는 모든 위치에서 클래스 속성을 재사용 할 수 있습니다.

클래스는 공통 속성을 갖는 여러 요소에 사용됩니다. 예를 들어 p와 body 태그 모두에 동일한 색상과 글꼴을 원할 경우 class 속성이나 부서 자체를 사용하십시오.

반면에 Id는 단일 요소 속성을 강조 표시하는 데 사용되며 특정 요소에만 독점적으로 사용됩니다. 예를 들어 일부 속성이있는 h1 태그가 있으면 페이지 전체의 다른 요소에서 반복하지 않을 것입니다.

요소에서 class와 id를 둘 다 사용하면 * id는 클래스 속성을 확인합니다. * id는 단일 요소에 대해서만 독점적이므로

아래 예를 참조하십시오

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

우리는 출력을 생성

산출