코딩/HTML

[HTML] 초보도 따라하는 HTML - 4 (class와 id & 둘의 차이)

코딩눕 2024. 4. 17. 22:37

class와 id 속성

 

HTML 문서를 작성하기 위해서는 필연적으로 같은 태그를 여러 번 사용해야 합니다.

 

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

 

예를 들어, 위의 HTML 코드에서는 총 네 개의 <p> 태그가 쓰였고, 1, 2번 <p> 태그의 글자색을 파란색으로, 3, 4번 <p> 태그의 글자색은 붉은색으로 정하고 싶다면, 위와 같은 방법이 있습니다.

(자바스크립트를 사용하지 않는다는 기준으로)

 

  • HTML 태그의 style 속성을 사용
  • css의 가상 클래스인 nth-child를 사용

하지만, 극단적으로 글자색이 파란 <p> 태그는 200개, 빨간 거는 500개가 되어야 한다면(태그 순서대로...), 앞으로의 코딩 인생이 힘들어질 것입니다. 그렇기 때문에 같은 이름의 태그라도 서로를 구분해 줄 무언가가 필요합니다.

 

이 때 class와 id 속성을 사용하면 모든 문제가 해결됩니다.

   class 속성
<!-- 케밥 케이스를사용한 클래스 표기법  -->
<p class="color-red">반갑습니다.</p>
<p class="color-red">저는 반달레이 실바입니다.</p>
<p class="color-red">안녕히 계세요.</p>

<!-- 스네이크 케이스를 사용한 클래스 표기법 -->
<p class="color_blue">안녕하세요.</p>
<p class="color_blue">저는 윤루카스입니다.</p>
<p class="color_blue">저는 차갑습니다.</p>

 

태그에 클래스 속성을 사용하는 방법은 태그 시작 부분에 class="정하고 싶은 클래스 이름"을 적으면 됩니다. 다만 클래스명을 작성하는 일반적인 관례가 있는데, 보통은 "스네이크 케이스" 또는 "케밥 케이스"를 많이 사용합니다.

 

 

id 속성
<!-- 카멜 케이스를 사용해 작성한 id 속성 -->
<p id="colorBlue">지렁이도</p>
<p id="colorRed">밟으면</p>
<p id="colorgreen">아프다.</p>

 

id 속성도 클래스와 마찬가지로 태그 시작 부분에 작성하시면 됩니다. 다만 작성 방식은 "카멜 케이스를 사용합니다.

 

 

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

 

class와 id 속성을 사용하여 css 스타일을 적용한 예시입니다. class의 경우 ".클래스명", id의 경우 "#아이디명"을 통해 명시해 줍니다.

 

지금은 글자 색을 정하는 속성인 "color"만 사용했기 때문에 style 태그와 별 차이가 없다 생각할 수도 있지만, 여러 속성을 이용해 스타일을 지정하는 것이 매우 흔하기 때문에 매우 효과적입니다.  

 

<button id="submitBtn" class="btn" type="button">접수하기</button>
<button id="clearBtn" class="btn" type="button">접수하기</button>

 

필요에 따라서는 하나의 태그에 id와 class 모두 지정할 수 있습니다.

class와 id의 차이점

 

class와 id 속성 모두 여러 태그에 같은 스타일을 적용시킨다거나, 자바스크립트 코드를 이용해 요소를 제어하기 위하는 등의 방법으로 사용됩니다. 하지만 둘의 차이점이 있습니다.

id는 고유값(unique)이다.

 

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

 

위의 예제의 자바스크립트 코드(JS)는 HTML 문서에 있는 "color-red"라는 클래스 속성값을 가지는 태그들과, "colorPurple"이라는 id 속성값을 가지는 태그를 찾고, 작업을 반복하는 반복문을 돌려 글자색인 'color' 스타일 속성의 값을 바꿔주는 코드입니다.

 

결과를 보시면 "color-red" 속성을 가지는 두 개의 <p> 태그의 글자색은 모두 주황색으로 바꿔었지만, "colorPurple"이라는 id 속성값을 가지는 태그는 분명 두 개가 있는데 맨 처음 해당 id 값을 가지는 태그만 글자 색상이 바뀌었다는 점입니다.

 

이 부분이 class 속성과 id 속성의 차이입니다. 자바스크립트의 getElementBy~ 함수를 사용해 id 속성을 가진 HTML 태그를 제어할 때, 여러 태그가 같은 id 값을 가지고 있다면 해당 id 값이 가장 먼저 사용된 태그만 조작된다는 점 입니다.

 

이 외에도 id값을 중복으로 사용하게 되면 다양한 문제가 발생할 수 있기 때문에 id는 각 태그마다 고유한 값을 사용해야 합니다.  

 

저작자표시 변경금지 (새창열림)