id와 class의 차이점과 사용방법

 

 

앞서 html 태그는 아래와 같은 구조로 구성되어 있다고 언급한 적 있다. 

 

<tag attribute="">content</tag>

 

 

 

오픈 태그 안에는 속성(attribute)을 추가할 수 있다.

 

속성이란 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값이다.

이번 포스팅에서는 속성 종류 중 하나인 id와 class를 설명한다.

 

만약 속성의 종류에 뭐가 있는지 궁금하고, 어떻게 사용하는지 궁금하면 아래 사이트에 자세히 나와있다.

HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN

 

 

 

태그마다 사용할 수 있는 속성(attribute) 종류는 모두 다르다. 

 

어떤 태그에서 사용할 수 있는 속성은 다른 태그에서 사용이 불가할 수 있다.

 

하지만 id와 class는 모든 html 태그에 사용될 수 있다.

 

따라서 전역 속성(Global attributes)으로 불린다.

 

id와 class는 태그에 이름을 붙여 css에서 해당 태그를 호출하는 용도로 주로 쓰인다.

 

용도는 비슷하나 둘은 미묘한 차이점이 있다.

 

 

 

id와 class의 차이

 

id와 class는 고유성에서 차이가 있다.

 

Id는 고유한 값으로, 한 태그에 여러 id를 입력할 수 없고, id를 여러 태그에 사용할 수 없다.

<p id="a" id="b">content1</p> <!--틀린 예1)하나의 태그에 id가 두개 들어갔다.-->

<p id="a">content2</p> <!--틀린 예2)id "a"가 두번 사용되었다.-->

 

 

class는 여러 태그에서 사용가능하며 한 태그가 다양한 종류의 클라스를 가질 수 있다.

<p class="a b">content1</p> <!--가능하다-->

<p class="a">content2</p> <!--가능하다-->

 

 

 

id와 class 사용법

[선언 방법]

<p id="a">content1</p> <!--id 선언-->

<p class="b">content2</p> <!--class 선언-->

 

 

[css 호출 방법]

id 앞에는 #을 붙이고, class 앞에는. 을 붙인다.

#a{
	color = red;
}

.b{
	color = blue;
}

 

 

 

페이지가 복잡해질수록 CSS를 작성할 때 id였는지 class였는지 헷갈릴 때가 많다. 

 

따라서 웬만하면 class를 사용하고 꼭 필요한 경우에 id를 사용하는 것이 좋다.