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

StackOverflow https://stackoverflow.com/questions/544010

  •  23-08-2019
  •  | 
  •  

문제

차이점은 무엇 입니까? <div class=""> 그리고 <div id=""> CSS에 관해서는?사용해도 괜찮나요 <div id="">?

나는 다른 개발자들이 이 두 가지 방법으로 이 작업을 수행하는 것을 보았으며 독학했기 때문에 실제로 그것을 이해한 적이 없습니다.

도움이 되었습니까?

해결책

ids 어디에서나 독특해야합니다 class 많은 것들에 적용 할 수 있습니다. CSS에서 idS처럼 #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와 클래스를 사용하는 위치

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

ID는 엄청나게 강력한 도구입니다. ID가있는 요소는 요소 또는 그 내용을 어떤 방식으로 조작하는 JavaScript의 대상이 될 수 있습니다. ID 속성은 앵커 태그를 이름 속성으로 바꾸는 내부 링크의 대상으로 사용할 수 있습니다. 마지막으로, ID를 명확하고 논리적으로 만들면 문서 내에서 일종의 "자체 문서화"역할을 할 수 있습니다. 예를 들어, 블록의 오프닝 태그에 "메인", "헤더", "바닥 글"의 ID가있는 경우 코드 블록에 기본 내용이 포함된다는 블록에 주석을 추가 할 필요는 없습니다. ", 등.

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

수업은 많은 요소에 적용될 수 있습니다.

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

한 페이지에는 보통 바닥 글 하나, 헤더 하나가 있습니다 ...

그런 다음 바닥 글은 ID와 함께 div에있을 수 있습니다.

u003Cdiv id="footer" class="...">

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

ㅏ 수업 동일한 스타일을 원하는 여러 요소에 사용해야합니다. an ID 고유 한 요소를위한 것이어야합니다. 이것 좀 봐 지도 시간.

당신은 참조해야합니다 W3C 표준 당신이 엄격한 순응자가되고 싶거나, 당신의 페이지가되기를 원한다면 검증되었습니다 표준에.

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

대신 클래스를 사용할 수있는 신분증을 사용할 수있는 곳마다. 반대는 사실이 아닙니다.

이 컨벤션은 모든 페이지 ( "Navbar"또는 "Menu"와 같은 페이지 요소에 ID를 사용하고 다른 모든 것에 대한 클래스를 사용하는 것 같습니다. 그러나 이것은 단지 컨벤션이므로 사용이 큰 차이를 찾을 수 있습니다.

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

몇 년 동안 ID는 JavaScript (GetElementById)로 쉽게 액세스 할 수 있기 때문에 선호되었습니다. jQuery 및 기타 JavaScript 프레임 워크의 출현으로 이것은 현재 문제가되지 않습니다.

클래스는 카테고리와 같습니다.많은 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 선택기 공간은 실제로 조건부 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를 사용하여 처리를 약간 왜곡시킵니다. 개발자로서 알고 있습니다 사스/SCSS 세상은이 물건에 손을 대고 중첩 된 ID가 표준이되고 있습니다.

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

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

클래스는 CSS를 적용하는 데 사용해야합니다.

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

모든 요소는 클래스 또는 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 그리고 box1 두 가지 (2) 다릅니다 <div> 요소이지만 우리는 적용 할 수 있습니다 box 그리고 bg-color-red 둘 다 수업.

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

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

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

3) 스타일 요소는 항상 div 클래스를 참조하여 a. (DOT) 이름 앞에서 Div ID 클래스는 이름 앞에 # (HASH)를 넣어 참조됩니다.

4) 예 :-

수업 <style> 선언 - .red-background { background-color: red; }

이드에 <style> 선언 - #blue-background {background-color: blue;}

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top