CSS에서 id와 class의 차이점은 무엇이며, 언제 사용해야 합니까?
#main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div id="main">
Welcome
</div>
여기서 나는 말했습니다.id에▁div요소와 관련 CSS를 적용하고 있습니다.
OR
.main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div class="main">
Welcome
</div>
이제 여기서 나는class에▁div그리고 그것은 또한 저에게 같은 일을 해줍니다.
그럼 Id와 class의 정확한 차이는 무엇이며 언제 사용해야 하며 언제 사용해야 합니까?저는 CSS와 웹디자인을 처음 접하는 사람인데 이것을 다루면서 조금 혼란스럽습니다.
페이지/사이트 전체에서 여러 요소의 스타일을 일관되게 지정하려면 클래스를 사용합니다.클래스는 동일한 스타일을 공유하는 요소가 둘 이상 있거나 앞으로 있을 경우 유용합니다.예를 들어 "comment"의 div 또는 관련 링크에 사용할 특정 목록 스타일을 들 수 있습니다.
또한 지정된 요소에는 둘 이상의 클래스가 연결될 수 있지만 요소에는 하나의 ID만 연결될 수 있습니다.예를 들어, 스타일이 모두 적용되는 두 개의 클래스를 div에 지정할 수 있습니다.
또한 클래스는 종종 시각적 스타일 외에도 행동 스타일을 정의하는 데 사용됩니다.예를 들어, jQuery 폼 validator 플러그인은 클래스를 많이 사용하여 요소의 유효성 검사 동작을 정의합니다(예: 필수 또는 비필수 또는 입력 형식의 유형 정의).
클래스 이름의 예는 태그, 주석, 도구 모음 단추, 경고 메시지 또는 전자 메일입니다.
페이지에 스타일을 사용할 단일 요소가 있는 경우 ID를 사용합니다.ID는 고유해야 합니다.페이지에는 "주" 디브가 하나만 있을 것이기 때문에 이 옵션이 올바른 옵션일 수 있습니다.
ID의 예로는 주 내용, 머리글, 바닥글 또는 왼쪽 사이드바가 있습니다.
클래스는 항목의 유형이고 id는 페이지에 있는 항목의 고유 이름입니다.
id한 것입니다.
- 의 각요는하가수있다습니질나만소▁only▁one▁have를 가질 수 있습니다.
id - 각 페이지에는 해당 요소가 하나만 포함될 수 있습니다.
id
class하지 않습니다.
- 동일하게 사용할 수 있습니다.
class다요소에 대하여 - 여러 개를 사용할 수 있습니다.
class.es에 .
자바스크립트 관심사
자바스크립트 사용자들은 이미 다음과 같은 차이에 더 잘 적응하고 있을 것입니다.class와 스앤에id JavaScript를 요소가 달라집니다.id그렇지 않으면 일반적으로 사용되는getElementById함수를 신뢰할 수 없습니다.
예
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
(CSS는 ID에는 #, 클래스에는 . 접두사를 사용합니다.)
color 4 4.01 입니다.<font> 속성은 에서 더 되지 않습니다. 에는 "가 은 "font-color"입니다. CSS에서 "font-color"는 없습니다. 스타일은color위의 내용은 다음과 같습니다.
예
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
텍스트는 흰색입니다.
ID는 고유해야 합니다. HTML 문서에 동일한 ID를 가진 요소를 둘 이상 가질 수 없습니다.클래스는 여러 요소에 사용할 수 있습니다.이 경우 ID가 (아마도) 고유하기 때문에 "main"에 ID를 사용할 수 있습니다. ID는 다른 컨텐츠의 컨테이너 역할을 하는 "main" div이고 ID는 하나뿐입니다.
스타일을 반복할 메뉴 단추 또는 기타 요소가 여러 개 있는 경우 모든 단추를 동일한 클래스에 할당한 다음 해당 클래스에 스타일을 지정합니다.
거의 모든 사람들이 일회성 요소에는 ID를 사용하고 다중 사용 요소에는 클래스를 사용한다고 말한 것과 거의 같습니다.
다음은 HTML 및 HEAD 태그를 읽는 것과 같이 너무 단순화된 빠른 예입니다.
<body>
<div id="leftCol">
You will only have one left column
</div>
<div id="mainContent">
Only one main content container, but.....
<p class="prettyPara">You might want more than one pretty paragraph</p>
<p>This one is boring and unstyled</p>
<p class="prettyPara">See I told you, you might need another!</p>
</div>
<div id="footer">
Not very HTML5 but you'll likely only have one of these too.
</div>
</body>
또한 다른 답변에서 언급했듯이 ID는 Javascript에 잘 노출되어 있지만 클래스는 그렇지 않습니다.그러나 jQuery와 같은 현대의 자바스크립트 프레임워크는 자바스크립트를 위한 클래스도 활용합니다.
ID에는 웹 페이지 내의 특정 섹션에 대한 링크로 작동하는 기능이 있습니다.# 태그 뒤에 있는 키워드는 웹 페이지의 특정 섹션으로 이동합니다.예: 주소 표시줄의 "http://exampleurl.com#chapter5 "은 페이지의 5장 섹션에 "섹션 5" ID가 있을 때 사용자를 안내합니다.
그class속성은 여러 HTML 요소/태그와 함께 사용할 수 있으며 모두 적용됩니다.에 면에반은.id는 단일 요소/태그를 의미하며 고유한 것으로 간주됩니다.
무보다도엇.id보다 높은 특수성 값을 가집니다.class.
ID:
전체 페이지의 고유한 요소를 식별합니다.다른 요소는 동일한 ID로 선언할 수 없습니다.ID 선택기는 고유한 단일 요소의 스타일을 지정하는 데 사용됩니다.id 선택기는 HTML 요소의 id 속성을 사용하며 "#"로 정의됩니다.
클래스:
클래스 선택기는 요소 그룹의 스타일을 지정하는 데 사용됩니다.ID 선택기와 달리 클래스 선택기는 여러 요소에서 가장 자주 사용됩니다.
이렇게 하면 클래스가 동일한 여러 HTML 요소에 대한 특정 스타일을 설정할 수 있습니다.
클래스 선택기는 HTML 클래스 속성을 사용하며 "."로 정의됩니다.
이전의 좋은 답변에 추가할 것이 있다면, 그것은 왜 그런지 설명하는 것입니다.ids는 페이지당 고유해야 합니다. 것을 하기 때문에 합니다.id가 발생하지 "" "" " " " " " " " " " " " 와 .class.
관점에서 볼 때, 따서라 HTML/CSS의의 ,id페이지 당 의미가 없습니다.그러나 자바스크립트의 관점에서, 하나를 갖는 것은 중요합니다.id이름에서 알 수 있듯이 요소를 식별하기 때문에 페이지당 요소당ids의
따라서 당신이 순수한 HTML/CSS 개발자일지라도, 당신은 그것의 독특한 측면을 존중해야 합니다.id이유로 당s: " 가 지 좋 로 지 당 이 s:
- 명확성: ID를 볼 때마다 동일한 페이지 내의 다른 곳에 존재하지 않는 것이 확실합니다.
- 확장성:HTML/CSS에서만 개발하는 경우에도 자바스크립트에서 웹사이트의 기능을 유지하고 추가하기 위해 사용자 또는 다른 개발자가 이동하는 날짜를 고려해야 합니다.
할당할 수 .class여러 가지 요소로둘 이상을 할당할 수도 있습니다.class요소로, 예를 들어.
<button class="btn span4" ..>
부트스트랩에서.할할수다니있을 할 수 .id과 같은 많은 , 여러분은 항목을 선택합니다.class JavaScript를 사용할 수 .id.
클래스는 여러 번 사용할 수 있지만 ID는 한 번만 사용할 수 있으므로 많이 사용할 항목에 대한 클래스를 사용해야 합니다.예를 들어 웹 페이지의 모든 문단에 동일한 스타일을 지정하려면 클래스를 사용해야 합니다.
표준은 지정된 ID 이름을 페이지 또는 문서 내에서 한 번만 참조할 수 있도록 지정합니다.페이지당 한 번만 발생할 경우 ID를 사용합니다.페이지당 하나 이상의 발생이 있을 때 클래스를 사용합니다.
이것은 매우 이해하기 쉽습니다:-
id는 CSS 속성을 하나의 속성에만 적용해야 할 때 사용됩니다.
클래스는 동일한 페이지 내 또는 다른 여러 위치에서 CSS 속성을 사용해야 할 때 사용됩니다.
General :- 응시 div 및 버튼 레이아웃과 같은 고유한 구조를 위해 id를 사용합니다.
우리가 사용하는 페이지나 프로젝트 전체에서 동일한 CSS에 대해 클래스를 사용합니다.
id는 가볍고 수업은 조금 무겁습니다.
간단한 방법은 ID가 하나의 요소에만 고유하다는 것입니다.
클래스는 고유하지 않으며 여러 요소에 적용됩니다.
예:
<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>
내용은 클래스입니다. 내용은 다른 태그뿐만 아니라 "매우 중요"이 한 번만 사용되고 다시는 사용되지 않기 때문입니다.
과는 달리id셀렉터, 더class선택기는 여러 요소에서 가장 자주 사용됩니다.
이렇게 하면 클래스가 동일한 여러 HTML 요소에 대한 특정 스타일을 설정할 수 있습니다.
그class속성을 하며, . . . . . . ."로 정의됩니다.
간단한 방법은 ID가 하나의 요소에만 고유하다는 것입니다.class원하는 대로 실행할 수 있으므로 사용하는 것이 좋습니다.
ID 선택기를 더 많은 요소에 사용할 수 있습니다.예는 다음과 같습니다.
CSS:
#t_color{
color: red;
}
#f_style{
font-family: arial;
font-size: 20px;
}
html:
<p id="t_color"> test only </p>
<div id="t_color">the box text</div>
Internet Explorer(버전 11.0)와 Chrome(버전 47.0)에서 테스트했습니다.두 사람 모두에게 효과가 있습니다.
"고유"는 클래스 선택기와 같이 하나의 요소가 둘 이상의 ID 속성을 가질 수 없음을 의미합니다.둘 다 아니다.
<p id="t_color f_style">...</p>
도 아니다
<p id="t_color" id="f_style">...</p>
언급URL : https://stackoverflow.com/questions/12889362/what-is-the-difference-between-id-and-class-in-css-and-when-should-i-use-them
'programing' 카테고리의 다른 글
| 탭 레이아웃 탭 선택 (0) | 2023.08.16 |
|---|---|
| 도커의 ASPNETCORE_ENERVICE (0) | 2023.08.16 |
| 다운로드한 글꼴을 디코딩하지 못했습니다. OTS 구문 분석 오류: 잘못된 버전 태그 + 레일 4 (0) | 2023.08.16 |
| SQL Server 2016, 잘못된 개체 이름 'STRING_SPLIT' (0) | 2023.08.16 |
| Swift에서 배열 [String] 슬라이싱 반환 유형이 [String]이 아닌 것 같습니다. (0) | 2023.08.16 |