Class

▼아래처럼 입력해서

 

 

▼아래와 같이 출력했다.

 

여기서 나는 짝수번째 <span>의 색을 다른 색으로 하고 싶을때는 어떻게 해야할까?

 

앞선 다른 포스팅에서 사용한 고유한 값인 id를 사용해보자

 

▼ 아래처럼 두번째, 네번째, 여섯번째 <span>에 각각 다른 id를 부여하고, 또 각각의 id에 style값을 지정하면 된다.

 

또는 ▼ 아래처럼 모아서 입력할 수도 있을 것이다. 

 

▼ 그러면 아래처럼 출력될 것이다.

 

 

하지만 만약 이런 코드가 1억개가 있다고 생각한다면 코드가 너무 지저분해지고 클린하지 못할 것이다.

 

따라서 이럴때는 요소를 가리킬 수 있으면서도 겹쳐도 되는 방법이 있으면 훨씬 좋을 것이다.

 

이럴 때 사용하면 좋은 것이 바로 'class'이다!

 

class는 유일할 필요가 없고 여려 요소에서 사용할 수 있고 많은 곳에서 원하는 만큼 사용해도 된다는 장점이 있다.

 

 

▼ 그러면 class로 같은 출력값을 나타내는 코드를 작성해본다면 아래와 같다.

 

id 값을 선택할때는 '#id' 의 형태였다면, class는 '.class'의 형태를 가진다는 것을 볼 수 있다.

 

<style> tag안에서 훨씬 간결해진 것을 볼 수 있다.

 

어떤 것이 훨씬 더 좋다고는 단정할 수 없지만,  상황에 따라 id 또는 class를 사용하면 클린코드를 작성하는데 도움이 될 것이다.