ID와 클래스의 차이점은 무엇입니까? 괜찮 <div 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 요소에 액세스 / 조작하고 스타일을 다양한 요소에 액세스 / 적용하기 위해 클래스를 사용합니다.