문제
차이점은 무엇 입니까? <div class="">
그리고 <div id="">
CSS에 관해서는?사용해도 괜찮나요 <div id="">
?
나는 다른 개발자들이 이 두 가지 방법으로 이 작업을 수행하는 것을 보았으며 독학했기 때문에 실제로 그것을 이해한 적이 없습니다.
해결책
ids
어디에서나 독특해야합니다 class
많은 것들에 적용 할 수 있습니다. CSS에서 id
S처럼 #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="...">
그리고 여전히 수업이 있습니다
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>
여기에 배경은 파란색입니다