ID 값은 단 하나
<p id="heading">1</p>
<p id="heading">2</p>
- id의 값 같은 경우는 문서에 고유, 유니크하게 단 하나만 존재하는 것이 개발자들끼리의 약속이다.
- 설령 적용된 id값의 요소가 중복으로 존재하더라도 브라우저상에서는 아무런 에러없이 렌더링 될 것이다.
- 하지만 개발자들끼리 id값은 고유한 값으로 사용하자는 약속이고, 관습이다.
var x = document.getElementById("heading"); // 어짜피 id를 선택하는 것이기 때문에, 단 하나만 선택된다.
var xx = document.getElementsByClassName("title"); // class는 여러번 중복되도 되기 때문에, 여러개의 태그가 할당된다.
- 웹 프로그래밍에서 html, css, javascript까지 세 개는 떼놓지 못할정도로 많은 연관을 가지고 있다.
- 그래서 javascript의 함수들중에서 html의 id를 가지고 선택하는 함수를 봤을 때는
- id의 고유 값을 가지고 있는 태그는 단 하나다! 라고 기정사실화 해서 사용하는 함수들이 굉장히 많다.
그래서 html과 css만 놓고 봤을 때, id를 여러번 사용하는 것은 웹페이지가 정상적으로 동작하는 것처럼 보일 수 있으나, 나중에 javascript가 도입되었을 때는 문제가 발생되게 될 것이다. 그래서 id 같은 경우는 값을 유니크하게 한 번만 사용하도록 해야한다.
class는 중복과 재사용 가능
<head>
<style>
.title-color {
color: red;
}
.title-size {
font-size: 24px;
}
.title-weight {
font-weight: 800;
}
</style
</head>
<p class="title title-color title-size title-weight">1</p>
<p class="title">2</p>
- class 값에 띄어쓰기(스페이스 바)를 통해 값을 정의해 다양한 css를 적용시킬 수 있다.
- id값은 고유한 것이 원칙이기 때문에, 값이 다르다 하더라도 여러 개의 중복된 id를 코딩하진 않는게 개념이다.
Coding Tip (vsCode)
// p.title + (Tab 버튼)
<p class="title"></p>
// div#wrap + (Tab 버튼)
<div id="wrap"></div>
// p*3 + (Tab 버튼)
<p></p>
<p></p>
<p></p>
// p.title*3 + (Tab 버튼)
<p class="title"></p>
<p class="title"></p>
<p class="title"></p>
// ul>li*3 + (Tab 버튼)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
댓글