[CSS] selector의 3가지 종류!!

Words
140
Reading
1 min
Listen
Play
9y

안녕하세요!! wonnieyoon@wonnieyoon입니다.
지난번 포스팅에서 CSS의 selector와 declaration에 대해서 포스팅을 했었는데요.
오늘은 selector의 종류에 대해 포스팅을 해보겠습니다.


CSS selector의 3가지

  • 태그 선택자

    태그 선택자는 보시는 그림처럼 선언한 모든 선택자에게 스타일이 적용되시는것을 볼수 있습니다.
    물론 이렇게 사용하면 편하긴 하겠지만 사실상 디자인을 예쁘게 하기에는 한계가 있다는 단점이 있습니다.

  • id 선택자

    우리의 주민등록번호는 다른 사람과 같을수 있나요? 학번 또한 같을수가 있나요? 주민등록번호,학번 처럼 고유한 값들은 중복이 될수 없습니다.
    id 선택자란 보시는 것처럼 태그 안에 id="" 형식으로 적어주시면 태그는 id값을 가지게 됩니다. 태그에 각각 다른값을 주고 싶을 경우 id 태그를 사용해서 스타일을 적용합니다.
    사용법은 #id값을 적어주면 됩니다.

  • 클래스 선택자

    사실상 클래스 선택자는 .클래스이름을 적어주면 되는데 사실상 id 선택자와 큰 차이가 없습니다. 하지만 클래스는 클래스 이름만 같다면 어떤 태그든지 스타일 값이 적용됩니다. 물론 id 선택자의 경우도 id를 같게 해준다면 같은 id를 가진 모든 태그는 적용이 됩니다. 하지만 id는 중복값은 가지지 않아야 하기 때문에 사용하지 않습니다.

[CSS] selector의 3가지 종류!! | Ecency