CODEDRAGON ㆍDevelopment/Web, WWW
id 속성과 class 속성
· 모든 태그에는 id 속성과 class 속성을 지정할 수 있습니다.
· 이 속성을 사용하면 CSS나 JavaScript등에서 태그를 좀더 쉽게 다룰 수 있습니다.
id vs class
|
구분 |
id |
class |
|
원칙 |
원칙상 하나의 id당 하나의 태그에만 적용 |
하나의 class당 여러 태그에 적용 |
|
호출 |
id="아이디명" |
class="클래스명" |
|
선언 |
#아이디명 |
.클래스명 |
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id,class 선택자에 따라 스타일 적용</title>
<style>
#idName {
width: 200px;
height: 100px;
border: 2px solid magenta;
}
.className {
width: 100px;
height: 50px;
background-color: #0099ff;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="idName">idName</div>
<div class="className">className1</div>
<div class="className">className2</div>
</body>
</html>
|
'Development > Web, WWW' 카테고리의 다른 글
| 문서 내 지정형(Embedding style) (0) | 2017.11.03 |
|---|---|
| 태그 내부 삽입형(ln-line style) (0) | 2017.11.03 |
| ID 선택자 - id를 선택자로 사용 (0) | 2017.11.02 |
| 클래스 선택자 - 클래스를 선택자로 사용 (0) | 2017.11.02 |
| HTML 선택자(태그 선택자) - HTML 태그요소를 선택자로 사용 (0) | 2017.11.02 |