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

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="...">

and still have a class

---

A CLASS should be used for multiple elements that you want the same styling for. An ID should be for a unique element. See this tutorial.

You should refer to the W3C standards if you want to be a strict conformist, or if you want your pages to be validated to the standards.

---

IDs are unique. Classes aren't. Elements can also have multiple classes. Also classes can be dynamically added and removed to an element.

Anywhere you can use an ID you could use a class instead. The reverse is not true.

The convention seems to be to use IDs for page elements that are on every page (like "navbar" or "menu") and classes for everything else but this is only convention and you'll find wide variance in usage.

One other difference is that for form input elements, the <label> element references a field by ID so you need to use IDs if you're going to use <label>. is an accessibility thing and you really should use it.

In years gone by IDs were also preferred because they're easily accessible in Javascript (getElementById). With the advent of jQuery and other Javascript frameworks this is pretty much a non-issue now.

---

Classes are like categories. Many HTML elements can belong to a class, and an HTML element can have more than one class. Classes are used to apply general styles or styles that can be applied across multiple HTML elements.

IDs are identifiers. They're unique; no one else is allowed to have that same ID. IDs are used to apply unique styles to an HTML element.

I use IDs and classes in this fashion:

<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>

In this example, the header and content sections can be styled via #header and #content. Each section of the content can be applied a common style through #content .section. Just for kicks, I added a "special" class for the middle section. Suppose you wanted a particular section to have a special styling. This can be achieved with the .special class, yet the section still inherits the common styles from #content .section.

When I do JavaScript or CSS development, I typically use IDs to access/manipulate a very specific HTML element, and I use classes to access/apply styles to a broad range of elements.

---

CSS is object oriented. ID says instance, class says class.

---

CSS selector space actually allows for conditional id style:

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

will render as expected. Why would you do this? Sometimes IDs are generated dynamically, etc. A further use has been to render titles differently based on a high-level ID assignment:

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

Personally, I prefer longer classname selectors:

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

as I find using nested IDs to differentiate treatment to be a bit perverse. Just know that as developers in the Sass/SCSS world get their hands on this stuff, nested IDs are becoming the norm.

Finally, when it comes to selector performance and precedence, ID tends to win out. This is a whole other subject.

---

When applying CSS, apply it to a class and try to avoid as much as you can to an id. The ID should only be used in JavaScript to fetch the element or for any event binding.

Classes should be used to apply CSS.

Sometimes you do have to use classes for event binding. In such cases, try to avoid classes which are being used for applying CSS and rather add new classes which doesn't have corresponding CSS. This will come to help when you need to change the CSS for any class or change the CSS class name all together for any element.

---

Any element can have a class or an id.

A class is used to reference a certain type of display, for example you may have a css class for a div that represents the answer to this question. As there will be many answers, multiple divs would need the same styling and you would use a class.

An id refers to only a single element, for example the related section at the right may have styling specific to it not reused elsewhere, it would use an id.

Technically you can use classes for all of it, or split them up logically. You can not, however, reuse id's for multiple elements.

---

Class is for applying your style to a group of elements. ID styles apply to just the element with that ID (there should only be one). Usually you use classes, but if there's a one-off you can use IDs (or just stick the style straight into the element).

---

In advanced development ids we can basically use JavaScript.

For repeatable purposes, classes come handy contrary to ids which supposed to be unique.

Below is an example illustrating the expressions above:

<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>

Now you can see in here box and box1 are two (2) different <div> elements, but we can apply the box and bg-color-red classes to both of them.

The concept is inheritance in an OOP language.

---

1) div id is not reusable and should only be applied to one element of HTML while div class can be added to multiple elements.

2) An id has greater importance if both are applied to the same element and have conflicting styles, the styles of the id will be applied.

3) Style element always refer a div class by putting a . (dot) in front of their names while div id class is referred by putting a # (hash) in front of their names.

4) Example :-

class in <style> declaration - .red-background { background-color: red; }

id in <style> declaration - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Here background will be in blue color

참고URL : https://stackoverflow.com/questions/544010/whats-the-difference-between-an-id-and-a-class