class 와 id 속성
class 속성(Attribute)
class 속성은 한 요소를 특정하는 데에 쓰인다. HTML 요소들은 같은 class를 공유할 수 있다. 또한 CSS에서 .car{}로 선택해서 꾸미게 되면 class="car"를 가지고 있는 모든 태그들이 변하게 되는 굉장한 경험을 할 수 있다. 하나만 변경했을 뿐인데 모든 것이 변한다!
<div class="car">
<select class="type">
<option value="">선택하세요</option>
<option value="sedan">승용</option>
<option value="suv">SUV</option>
<option value="truck">트럭</option>
</select>
<select class="type2">
<option>쏘나타</option>
<option>더 뉴 아반테</option>
<option>디 올 뉴 그랜저</option>
<option>디 올 뉴 그랜저 hybrid</option>
</select>
</div><p class="car">저는 차에요<p><p> 역시 같은 class이다.
id 속성
id 속성은 HTML의 요소에 유니크한 id를 부여한다. 한 요소는 한가지의 id만 가질 수 있으면 중복된 id는 허용되지 않는다. CSS에서는 선택자 #을 사용해서 해당 id를 찾을 수 있다. #id, #pwd와 같은 식으로 말이다.
<body>
<form class="login">
<label for="id">아이디</label>
<input name="id"
id="id"
placeholder="아이디를 입력하세요">
<label for="pwd">비밀번호</label>
<input name="pwd"
id="pwd"
type="password">
<span><input type="checkbox" checked>
아이디 저장
</span>
<button id="loginbutton">로그인</button>
</form>
</body>class 속성과 id 속성의 차이
위에서 예시로 알겠지만, class 속성은 여러개의 요소에 쓰일 수 있고, id 속성은 하나의 요소에 딱 한번만 쓰일 수 있다. class 속성은 어떤 요소들이 같은 그룹이라고 생각하면 편하다.
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>