[HTML] id와 class

Bam·2022년 2월 11일

HTML

목록 보기

22/23

id와 class속성은 모든 태그에 대해서 적용가능한 속성입니다. 이 속성은 태그에 별개의 이름을 적용하는 속성인데, 이 속성이 무슨 일을 하고 어떤 차이가 있는지에 대해서 알아보겠습니다.

id속성은 태그에 식별자를 부여하는 속성입니다. 학교에서 한 반에 학생들은 각자 학번 등의 번호가 있습니다. 학번을 보면 학생 개개인을 구분할 수가 있죠. 이처럼 id속성은 태그를 각각 구분할 수 있도록 식별자를 붙이는 속성입니다.

<태그 id='id명'></태그>

id의 id명을 지을 때는 탭, 공백을 포함해서는 안됩니다. id속성은 유일무이한 속성이기 때문에 공백마저 id로 인식해서 혼란을 초래할 수 있기 때문입니다. 가급적이면 ., -, _의 특수문자만 사용하는 것을 권장합니다.

class속성은 태그들을 하나로 묶는 별칭을 부여하는 속성입니다. 우리가 학교에서 여러 학생(=요소)를 모아서 n학년 n반이라는 class로 지정을 하죠? 이처럼 여러 요소를 묶어서 하나의 클래스로 만들고 싶을 때 사용하는 속성입니다.

<태그 class='class명'></태그>

class속성도 id와 마찬가지로 ., -, _의 특수문자만 사용하는 것을 권장합니다.

id와 class의 차이점은 무엇일까요?

첫 번째 차이점은 id는 id명을 문서에서 단 한 번만 사용할 수 있습니다. class는 같은 class명을 여러 태그에 사용할 수 있다는 점이 가장 큰 차이점입니다.

학교로 예를 들자면 김세모와 박네모는 1학년 2반이라는 공통된 class를 가집니다. 하지만 출석 번호가 1, 2로 다르죠. 한 반이나 학과에서 동일한 학번, 출석 번호가 같은 학생을 나올 수 없습니다. 이름이 같더라도요!

이처럼 class는 요소들을 묶을 때, id는 요소 개개인을 식별하기 위해서 사용합니다.

두 번째 차이점은 요소는 id는 한 개만 가질 수 밖에 없는 것에 비해, class는 여러개를 가질 수 있습니다.

다시 학교로 돌아와서 김세모 학생은 학번(=id)을 하나만 가집니다. 여러개 가질수가 없어요. 하지만 class는 XX고등학교라는 클래스와 n학년 n반이라는 클래스는 동시에 가질 수가 있습니다.

<태그 id='id' class='class'></태그> => 가능!!!
<태그 class='class1 class2'></태그> => 가능!!!
<태그 id='id1 id2'></태그> => 불가능!!!