it-swarm-ko.tech

div 클래스 대 id

Div를 사용할 때 class와 id를 사용하는 것이 가장 좋은 방법은 무엇입니까?

HTML의 글꼴 변형이나 요소에 클래스를 사용하는 것이 가장 좋습니까? 그런 다음 구조/컨테이너에 id를 사용 하시겠습니까?

이것은 내가 항상 조금 불확실했던 것입니다. 어떤 도움이라도 좋을 것입니다.

49
Paul

id를 사용하여 페이지에 단일 인스턴스 만있는 요소를 식별하십시오. 예를 들어, 특정 위치에 하나의 탐색 모음이 있으면 id="navigation".

class를 사용하여 특정 방식으로 동작하는 요소를 그룹화하십시오. 예를 들어 회사 이름을 굵게 표시하려면 <span class='company'>.

83
Jim

이해해야 할 가장 중요한 것은 ID는 고유해야한다는 것입니다. 주어진 ID를 가진 하나의 요소 만 페이지 내에 존재해야합니다. 따라서 특정 페이지 요소를 참조하려는 경우 사용하는 것이 가장 좋습니다.

어떤 방식으로 유사한 여러 요소가있는 경우 요소 클래스를 사용하여 식별해야합니다.

매우 유용하고 놀랍게도 알려진 사실 중 하나는 클래스 이름 사이에 공백을 두어 단일 요소에 여러 클래스를 실제로 적용 할 수 있다는 것입니다. 따라서 현재 로그인 한 사용자가 작성한 질문을 게시 한 경우 <div class = "question currentAuthor">로 질문을 식별 할 수 있습니다.

51
Sean McMains

대학을 생각하십시오.

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

학생 ID 카드가 다릅니다. 캠퍼스에서 두 명의 학생이 같은 학생을 갖지 못합니다 ID 그러나 많은 학생들이 적어도 하나의 Class을 서로 공유 할 수 있으며 공유 할 것입니다.

여러 학생을 하나의 Class title, Biology 101 아래에 두는 것은 괜찮습니다. 그러나 여러 학생을 한 학생 아래에 두는 것은 결코 허용되지 않습니다. ID .

학교 인터콤 시스템을 통해 규칙을 줄 때 규칙클래스에 줄 수 있습니다.

"생물학 수업은 내일 빨간 셔츠를 입을 수 있을까요?"

.BiologyClass {
  shirt-color:red;
}

또는 고유 한 ID 을 호출하여 특정 학생에게 규칙을 제공 할 수 있습니다.

"내일 조나단 샘슨이 녹색 셔츠를 입어 주시겠습니까?"

#JonathanSampson {
  shirt-color:green;
}
33
Sampson

ID는 고유해야하지만 CSS에서는 두 가지 상충되는 지침 중 어떤 지침을 따라야하는지 파악할 때 우선 순위를 갖습니다.

<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}

텍스트는 흰색입니다.

24
Oli

ID를 사용하면 추가적인 이점은 앵커 태그에서 ID를 타겟팅 할 수 있다는 것입니다.

<h2 id="CurrentSale">Product I'm selling</h2>

다른 장소에서 페이지의 해당 지점으로 직접 링크 할 수 있습니다.

<a href="#CurrentSale">the Current Sale</a>

이를 위해 일반적으로 블로그의 각 헤드 라인에 날짜 표시 ID (예 : id = "date20080408")를 지정하면 블로그 페이지의 해당 섹션을 구체적으로 타겟팅 할 수 있습니다.

또한 ID에 대해 더 제한적인 이름 지정 규칙이 있으며 주로 숫자로 시작할 수 없다는 점을 기억해야합니다. 비슷한 SO question : html의 id 속성에 유효한 값은 무엇입니까)

6
Dave Rutledge

클래스는 여러 다른 div 또는 요소에 유사한 스타일을 적용하려는 경우 유용합니다. id는 자바 스크립트로 형식을 지정하거나 업데이트하기 위해 특정 요소를 처리하려고 할 때 유용합니다.

6
Mike Farmer

명심해야 할 다른 것들 :

  • ASP.Net을 사용할 때는 요소의 ID를 완전히 제어 할 수 없으므로 클래스를 사용해야합니다 (이것은 예전보다 덜 사실입니다).
  • 도움이 될 때 none를 사용하는 것이 가장 좋습니다. 대신 요소 유형을 지정하고 부모 유형입니다. 예를 들어, navarea 클래스와 함께 div에 포함 된 순서가없는 목록은 다음과 같이 표시 될 수 있습니다.

    div.NavArea ul { /* styles go here */ }
    

이제 하나의 클래스 응용 프로그램으로 전체 나바 리아의 대부분에 대해 논리 구분의 스타일을 지정할 수 있습니다.

3
Joel Coehoorn

HTML 표준 자체가 귀하의 질문에 답변합니다.

두 객체가 동일한 ID를 가질 수는 없지만 임의로 많은 수의 객체가 동일한 클래스를 가질 수 있습니다.

따라서 특정 CSS 스타일 속성을 단일 DIV에만 적용하려면 ID가됩니다. 특정 스타일 속성이 여러 DIV에 적용되도록하려면 클래스 여야합니다.

두 가지를 혼합 할 수 있습니다. 두 개의 DIV를 동일한 클래스에 속 시키지만 서로 다른 ID를 부여 할 수 있습니다. 그런 다음 클래스에 공통적 인 스타일을 적용하고 ID에 고유 한 것을 적용 할 수 있습니다. 브라우저는 먼저 클래스 스타일을 적용한 다음 ID 스타일을 적용하므로 ID 스타일은 클래스가 이전에 설정 한 내용을 덮어 쓸 수 있습니다.

3
Mecki

ID는 고유해야합니다. 수업을 공유해야합니다. 따라서 여러 DIV에 적용 할 CSS 형식이있는 경우 클래스를 사용하십시오. 요구 사항이 아닌 하나만 필요한 경우 ID를 사용하십시오.

2
James Curran

나는 우리 모두 클래스가 무엇인지 알고 있다고 생각하지만, ID를 스타일 도구가 아닌 식별자로 생각하면 크게 잘못되지는 않습니다. 대상을 지정할 때 식별자가 필요하며 동일한 ID를 가진 항목이 두 개 이상인 경우 더 이상 식별 할 수 없습니다.

ID와 클래스에 대한 CSS를 작성하는 경우 가능한 한 최소한의 CSS 클래스를 사용하고 할 때까지 ID가 너무 무겁지 않도록 노력하는 것이 좋습니다. 그렇지 않으면 더 강력한 선언을 작성하는 것이 목표입니다. 곧 CSS 파일이 중요합니다!.

1
Steve Perks

ID와 클래스를 사용하는 곳

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

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

1

.Net 웹 컨트롤을 사용하는 경우 .Net이 런타임시 웹 제어 div id를 변경하기 때문에 클래스를 사용하는 것이 훨씬 쉽습니다 (runat = "server"를 사용하는 경우).

클래스를 사용하면 글꼴, 간격, 테두리 등에 대한 별도의 클래스로 스타일을 쉽게 만들 수 있습니다. 일반적으로 여러 파일을 사용하여 개별 형식 정보를 저장합니다 (예 : 간단한 사이트 전체 형식의 경우 basic_styles.css, 브라우저 별 스타일 (이 경우 IE6)의 경우 6_styles.css 등, 레이아웃 정보의 경우 template_1.css.

어느 방법을 선택하든 유지 보수를 돕기 위해 일관성을 유지하려고합니다.

0
Toby Mills

또한 특정 ID를 제공하는 요소는 JavaScript 및 DOM 명령 (예 : GetElementById)을 통해 조작 할 수 있습니다.

일반적으로 모든 주요 구조 div에 id를 제공하는 것이 유용하다는 것을 알았습니다. 처음에는 적용 할 특정 CSS 규칙이 없더라도 앞으로 그 기능이 있습니다. 반면에 이미지와 캡션이 포함 된 div와 같이 여러 번 사용할 수있는 요소에 클래스를 사용합니다. 각각 스타일 값이 약간 다른 여러 클래스가있을 수 있습니다.

그러나 모든 것이 동일하고 id 사양의 스타일 규칙이 클래스 사양의 규칙보다 우선합니다.

0
Ken Ray

개별 항목에 스타일을 설정하기에 좋은 id와 클래스는 비슷한 항목 집합을 구사하는 것 외에도 기억해야 할 또 하나의주의 사항이 있습니다. 또한 언어에 어느 정도 의존합니다. ASP.Net에서는 Div를 던져 ID를 가질 수 있습니다. 그러나 Div 대신 Panel을 사용하면 ID가 손실됩니다.

0
CodeRot

페이지의 여러 위치에서 사용하려는 스타일 인 경우 클래스를 사용하십시오. 페이지 측면의 탐색 모음과 같이 단일 객체에 대해 많은 사용자 정의를 원한다면 다른 곳 어디에서나 스타일 조합을 필요로하지 않기 때문에 id가 가장 좋습니다.

0
HitScan

id는 페이지에서 요소 고유 식별자로 간주되어 조작하는 데 도움이됩니다. 둘 이상의 요소에 사용되어야하는 외부 CSS 정의 스타일은 클래스 속성으로 이동해야합니다.

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
0
Vinko Vrsalovic

매우 구체적인 작업을 수행하려는 페이지의 고유 한 요소에 ID를 사용하고 페이지의 다른 부분에서 재사용 할 수있는 클래스를 사용하십시오.

0
Sam Meldrum

id 속성은 요소가 문서 내에서 요소를 고유하게 식별하는 데 사용되는 반면 class 속성은 동일한 문서의 여러 요소가 공유하는 동일한 값을 가질 수 있습니다.

따라서 실제로 문서마다 스타일을 사용하려는 요소 (예 : #title)가 하나만있는 경우 id로 이동하십시오. 여러 요소가 스타일을 사용할 수 있으면 class로 이동하십시오.

0
Mark Cidade

스타일 요소가 페이지에서 반복 될 것이라고 생각할 때마다 클래스를 사용하는 것이 가장 좋습니다. HeaderImage, FooterBar 등과 같은 항목은 한 번만 사용하므로 ID가 잘 어울리 며 중복 된 ID가 있으면 일부 편집기에서 경고를 표시하기 때문에 실수로 복제하지 않도록 도와줍니다.

Div 요소를 동적으로 생성하고 형식화를 위해 특정 항목을 대상으로하려는 경우에도 도움이됩니다. 요소를 검색 한 다음 클래스를 업데이트하는 대신 생성시 적절한 ID를 부여 할 수 있습니다.

0
Dillie-O

For me : CSS에서 무언가를하거나 요소에 이름을 추가 할 때 클래스를 사용하면 페이지의 모든 요소에서 사용할 수 있습니다.

고유 한 요소에 사용하는 ID

예 :

<div id="post-289" class="box clear black bold radius">

CSS :

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}
0
l2aelba

클래스는 페이지에서 여러 번 사용할 수있는 스타일을위한 것이며 ID는 요소의 특수한 경우를 정의하는 고유 식별자입니다. 표준에 따르면 ID는 한 페이지에서 한 번만 사용해야합니다. 따라서 페이지에서 둘 이상의 요소에 스타일을 사용하려는 경우 클래스를 사용하고 한 번만 사용하려는 경우 ID를 사용해야합니다.

또 다른 점은 클래스의 경우 ID와 함께 여러 클래스를 사용할 수 있다는 것입니다 (각 클래스 사이에 공백을 넣음으로써 "class = 'blagh blah22 blah'). 요소 당 ID에만 사용할 수 있습니다.

ID에 대해 정의 된 스타일은 클래스에 대해 정의 된 스타일을 재정의하므로 #uniquething의 스타일 설정은 두 스타일이 충돌하더라도 .style을 재정의합니다.

따라서 페이지 당 한 번만 표시되는 헤더, '사이드 바'또는 기타 항목에 ID를 사용해야합니다.

0
thesmallprint

CSS 스타일이 동일한 방식으로 여러 div에 적용될 때 클래스 식별을 사용하는 것이 좋습니다. 구조 또는 컨테이너가 실제로 한 번만 적용되거나 기본값에서 스타일을 상속받을 수 있다면 클래스 식별을 사용할 이유가 없습니다.

따라서 div가 여러 가지 중 하나인지 여부에 따라 다릅니다. 예를 들어, stackoverflow 웹 사이트의 답변에 대한 질문을 나타내는 div입니다. 여기서는 "답변"클래스의 스타일을 정의하고이를 각 "답변"div에 적용하려고합니다.

0
James Winans