어떤가요? 결과를 보면 글자 색은 바뀌지 않았고 앞에서 적용한 노란색 배경마저 사라졌습니다. id 속성의 속성값을 두 개 입력했기 때문에 잘못된 코드가 입력되어 이전에 적용한 디자인까지 사라진 것입니다. 정리하면 id는 이름처럼 속성값을 한 개만 사용할 수 있는데 반해, class는 별명처럼 속성값을 여러 개 사용할 수 있습니다.

그럼 어떤 상황에서 id 속성을 사용하고 어떤 상황에서 class 속성을 사용하는 걸까요? 집으로 비유하면 id 속성은 안방, 거실, 주방 등과 같이 큰 공간의 개념입니다. 이러한 큰 공간은 일반적으로 한 집에 한 개만 있습니다. 마찬가지로 한 개의 HTML 문서에서는 id 속성을 큰 공간을 만들 때 사용합니다. 이때 이름이 같은 id 속성값을 여러 번 사용하면 곤란합니다. 즉, <header id="intro">, <footer id="intro">와 같이 "intro"라는 속성값을 중복해서 사용하면 곤란합니다. 보통 안방이 한 집에 한 개만 있는 것처럼 "intro" 속성값은 한 개만 존재해야 합니다.

class 속성은 큰 공간 안에 있는 작은 구역을 만들 때 사용합니다. 예를 들어 안방에는 의자, 책상, 침대 등 작은 가구를 놓을 공간이 있습니다. 하지만 의자, 책상, 침대는 안방이 아닌 공간에도 있을 수 있습니다. 이처럼 class 속성은 id 속성 안에서 작은 구역을 만들 때 사용하고, 이름이 같은 class 속성값을 여러 번 사용할 수 있습니다.