div, id

html 문서에는 엄청 많은 태그가 있다.

곧 뭐가 뭔지 헷갈리고 혼란스러워질 것이다.

여기 보이는 것처럼

특히 div가 엄청 많으면 헷갈리게 된다.

그래서 각 div가 무엇을

뜻하는지 알려줄 필요가 있다.

​

예를 들면 섹션 그리고 헤더를 만들어보자.

그 헤더 안에 h1을 만들어보자.

하단에 div를 만들어보자.

그 안에 헤더를 또 만들고

자 이제 이 2개의 헤더를 구분할 수 있는 방법이 없다.

​

2개의 헤더 모두 같은 명칭 header를 갖고 있으니

새로운 이름을 지어줘야 한다.

이건 굉장히 중요하다.

​

왜냐하면 나중에 css를 할 때

이 헤더를 빨간색이고

이건 파란색이고

분리해서 명령을 내려야 하기 때문이다.

그래서 이름을 짓는 것은 엄청 중요하다.

​

이걸 하는 방법은 2가지가 있다.

첫 번째는 id이고,

두 번째는 class라고 한다.

​

​

id와 class는 이렇게 생겼다.

​

각 element(요소)마다

id는 한 개만 가질 수 있다.

왜냐하면 id는 고유값이기 때문이다.

이건 마치 나의 여권번호, 주민등록번호

같은 것이다.

​

반면에 class는 내 이름처럼 반복될 수 있다.

실제로 많은 사람들의 이름은

나의 이름 와 같은 경우가 많다.

​

다시 반복하면

id는 고유하고

class는 여러 개가 존재할 수 있다.

​

그래서 예를 들면,

이 헤더는 고유한 id를 갖고 있다.

그리고 동일한 속성의 class를 갖고 있을 수 있다.

​

헤더의 배경색을 class 속성 값으로

파란색이라고 하자.

그러면 2개의 헤더가 같은 클래스를

사용하기 때문에

둘 다 파란색으로 나올 것이다.

​

그러나 모두 같은 푸른 배경색을

가지고 있지만

하나는 사이즈가 크고

나머지 하나는 작다고 말할 수 있다.

​

즉 2개의 헤더 모두 같은 class를 갖고 있지만

각기 다른 id를 갖고 있다.

​

class는 반복해서 여러 번 사용할 수 있다.

동일한 속성이 있을 때마다 계속!

​

나는 주로 class를 많이 사용한다.

왜냐하면 웹사이트 상에는

아예 고유한 element는 많이 없다.

​

예를 들면 채팅창은 계속 반복된다.

메뉴바는 아이콘이 많고 계속 반복되기 때문에

id는 고유하기 때문에 아마도

헤더 그리고 내비게이션에 사용할 것이다.

​

하지만 채팅 메시지들은 class 들이다.

계속 반복되니까!

​

정리하자면

고유한 element를 사용할 때

id를 적용하고

​

반면에 고유하지 않은

계속 반복되는 element의 경우엔 class를 적용한다.

 

 

 

 

출처 :

blog.naver.com/cksdn4214/222004286700

​