클래스(class)와 아이디(id)

HTML 요소에게 '이름'을 주는 방법은 두 가지가 있습니다:

 

클래스 (class)

아이디 (id)

클래스 (class)

HTMLCSS

<p class="big-blue-text">First</p>

<p>Second</p>

<p class="big-blue-text">Third</p>

결과 확인

위의 코드에서 첫 번째 p 요소와 세 번째 p 요소는 "big-blue-text"라는 클래스 이름을 갖고 있습니다. 그러면 css에서 .big-blue-text에 스타일을 입혀주면 됩니다. 클래스 이름이라는 걸 나타내는 '.(마침표)'를 잊지 맙시다!

 

아이디 (id)

HTMLCSS

<p id="favorite-text">First</p>

<p>Second</p>

<p>Third</p>

결과 확인

위의 코드에서 첫 번째 p 요소는 "favorite-text"라는 아이디를 갖고 있습니다. 그러면 css에서 #favorite-text에 스타일을 입혀주면 됩니다. 클래스 이름을 나타내기 위해 '.(마침표)'를 붙인 것처럼 아이디를 나타내기 위해서는 '#(샾 표시)'를 써줘야 합니다.

 

클래스 vs 아이디

클래스와 아이디. 얼핏 보기에는 똑같아 보이는데요. 핵심적인 차이점 몇 가지가 있습니다:

 

같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없습니다.

한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있습니다!)