선택자 id와 class 태그는 HTML, CSS 그리고 Javascript까지 사용됩니다. HTML에서는 적어둔 텍스트의 속성을 정해주거나 CSS와 Javascript에서는 태그 별로 특징을 정해줄 때 사용하니 정말 광범위하게 쓰이죠. id와 class의 특징, css에서 사용하는 방법, 그리고 우선순위를 함께 살펴볼까요.
id 속성은 페이지에 있는 해당 요소를 유일하게 식별할 때 씁니다. 주의 사항으로는 같은 페이지 안에 id는 단 한 개만 존재해야 합니다. 또 id 이름은 알파벳 또는 '_'으로 시작해야 합니다. id를 이용해 css와 javascript에서 활용할 수 있으니 중요한 속성 중 하나입니다. 개인 프로젝트일 경우는 상관없지만 여러 사람들과 같이 하는 프로젝트에서는 id이름을 최대한 직관적이고 간단명료하게 지어주는 것도 중요하답니다.
<head>
<meta charset="utf-8">
<title>id</title>
<style type ="text/css">
#blue { color : blue;}
</style>
</head>
<body>
<p>이 문단은 평범한 p태그를 사용하였습니다.</p>
<p id = "blue">이 문단은 blue id를 부여하였습니다.</p>
</body>
class 속성은 또한 id 속성과 마찬가지로 해당 요소를 식별할 때 사용합니다. 그러나 id 속성은 한 페이지에 하나만 존재해야 하는 반면 class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있습니다. class 속성도 id 속성과 마찬가지로 css와 javascript에서 활용할 수 있으니 아주 중요한 속성 중 하나입니다. class도 id와 마찬가지로 이름을 지을 때 직관적이고 간단명료하게 적어주는 것이 중요합니다.
<head>
<meta charset="utf-8">
<title>id</title>
<style type ="text/css">
.blue { color : blue; }
.bic { font-size : 20px; }
.upper { text-transform : uppercase; }
</style>
</head>
<body>
<p>이 문단은 평범한 p태그를 사용하였습니다.</p>
<p class="blue">이 문단은 blue class를 부여하였습니다.</p>
<p class="blue bic">이 문단은 blue, bic class를 부여하였습니다.</p>
<p class="blue upper">이 문단은 blue, bic class를 부여하였습니다. </p>
</body>
위에 간략한 코드에서도 유추가 가능하지만 조금 더 세분화하여 살펴보도록 하겠습니다.