[CSS] id, class 선택자 태그

id, class 태그는 비교가 명확하지 않아 먼저 정리를 한다.

 

굳이 구분을 짓는다면

id 는 스타일 지정할때 한페이지에 한 가지만 지정 가능한 것이고,

class는 스타일 지정할때 여러개 지정가능하다고 보면 된다.

 

혹시 css를 어떻게 쓰는지 모른다면 아래포스팅을 참조하면 된다.

https://seong6496.tistory.com/8

CSS란?

---

일단 id 와 class 의 차이를 찾아보자.

 

- id

id 같은 경우, 다음과 같이 하면

 

 

이렇게 적용이 된다. id를 써놓는 것마다 적용이 된다.

---

-class

클래스를 할때는 css 파일에 저장할때에 .style 형식으로 해주어야 한다.

id를 쓸거면 #style 형식으로 해야한다.

위 그림과 같이 class 태그에 쓸 생각이면 .a11 으로 설정을 해서 저장을 하면 된다. 가운데정렬을 적용해서 id와 섞어서 적용해보자.

3개를 적용해볼건데, 보면 알겠지만 가운데만 class를 넣어봤다.

그러면 이렇게 적용이 된다.

사실상, id 나 class 는 쓰는 방식에는 별 차이가 없다.

차이보다는 우선순위가 다르다.

 

 

비교를 위해 #a1은 파란바탕화면, .a111 은 노란바탕화면으로 설정해서 적용해보자.

 

위와 같은 결과가 나오는데 , 첫번째 명령은 클래스가 가운데정렬이라 id 와 겹치는게 없어서 둘다 적용이 되었고, 

두번째는 둘다 바탕화면을 설정했더니 클래스에 해당하는 노랑색 바탕화면이 아닌 id 로 설정된 파란바탕화면이 나왔다.

이걸 보면 id 가 먼저 나온다는 것을 알 수 있다. 즉, 우선순위는 id>class 이다. 하지만, 설정이 겹치지 않으면 둘다 쓸 수 있다.

 

 

사실, 둘 다 방식에는 큰 구분이 안되지만 자바스크립트나 마크업라인에서 id 출력값을 많이 써서 나타내는데  id 는 큰 골격(상단헤더, 하단헤더, 메뉴 등등)에 쓰는게 좋고, class 는 한페이지에 여러개 사용이 가능하니 다른 프로그램에 넣을때 id 가 겹치는 것을 방지하는 방법으로 class를 쓰는 게 적합해보인다.