[HTML&CSS] CSS - class(클래스) 선택자 개념 및 예제(1차 메뉴 수정)

[CSS] class : HTML의 엘리먼트 태그(div, section) 에 별명을 부가하는 역할.

cf. id : class와 동일하게 별명을 부가하는 역할

---

★ class(클래스) vs id ★

- class : 동일한 별명을 다른 태그에 설정 가능 (중복가능), 별명을 두개 이상 줄 수 있음. (무제한)

    * 클래스 선택자 : ' . ' (CSS에서는 띄어쓰기 안됨(띄어쓰기는 후손 선택자!) )

       ex) div.a { ~~~ OR  .a.black { ~~~

- id : 동일한 별명을 가진 태그는 존재할 수 없음. (중복불가능), 별명을 한 개만!! 줄 수 있음.

    * 아이디 선택자 : ' # ' (CSS에서는 띄어쓰기 안됨(띄어쓰기는 후손 선택자!) )

       ex) #a { ~~~

---

개념 설명

 

See the Pen class선택자 (+ id 선택자) by hoyeol0513 (@hoyeol0513) on CodePen.

 

 

예제 (1차메뉴 만들기 예제 엘리먼트를 모두 div로 교체)

=> class는 최소로 쓰는 게 좋음. (div 태그 하나만 사용한다고 해서 좋은게 아님.)  ★★★                개선필요!

 

See the Pen 1차메뉴만들기 (클래스선택자 이용) by hoyeol0513 (@hoyeol0513) on CodePen.

 

 

1차메뉴 만들기 예제 2 (최상위메뉴 제외하고 모두 div로 교체)

=> 클래스가 덕지덕지 붙어있지 않아서 지저분하지 않지만, 모두 div여서 문제임!! ★★★                개선필요!

 

See the Pen 1차메뉴만들기 (최상위메뉴 빼고 클래스 지우기) by hoyeol0513 (@hoyeol0513) on CodePen.