Kim Youngjae

Publisher and Developer

안녕하세요. Kim.YJ 입니다.

이번 포스팅은 이전 포스팅에서 설명드린 선택자중에서
ID와 CLASS 선택자를 조금 더 자세히 알아보는 포스팅을 하겠습니다.

이전 포스팅의 과정을 먼저 보시고,
천천히 이해하며 진행해 주시면 감사하겠습니다.

[ CSS Selector #id ]

1. id 선택자의 특징

id 선택자는 유일한 지정 태그가 필요할 경우 주로 사용되는 선택자 입니다.
즉,유일한 조건의 하나의 태그를 지정 하는 방법중 제일 쉽고 편한 방법 입니다.

2. 사용 방법

<!-- idSelector은 아이디 선택자로 여러곳에 사용 불가 -->
<!-- 동일 아이디값이 아닌 다른 아이디값을 부여하여야 지정 가능 -->
<p id="idSelector">나는 아이디 선택자</p>
<p id="idSelector2">나는 다른 아이디 선택자</p>

<!-- 선택자를 불러오는 방식 -->
<style>
  #idSelector {
    color: #000;
  }
  #idSelector2 {
    color: #fff;
  }
</style>

3. 주의사항

id는 한페이지당 1번만 적용될수 있으므로,
반드시 중복되지 않도록 Unique 하게 명명해야 합니다.

[ CSS Selector .class ]

1. class 선택자의 특징

class 선택자는 공통된 태그를 지정 할때 주로 사용되는 선택자 입니다.
즉,동시에 여러개의 태그를 지정하거나 재사용이 필요한 조건을 줄때
이용하기 쉽고 편한 방법 입니다.

2. 사용 방법

<!-- classSelector는 클래스 선택자로 여러곳에 사용 가능 -->
<!-- 하나의 클래스로 여러 태그 지정 가능 -->
<p class="classSelector">나는 클래스 선택자</p>
<p class="classSelector">나는 동일 클래스 선택자</p>

<!-- 선택자를 불러오는 방식 -->
<style>
  .classSelector {
    color: #000;
  }
</style>

3. 주의사항

class명은 중복이 가능하므로 같은 class명이 적용된 모든 부분에
CSS 효과가 동시에 적용됩니다.
각각의 태그에 다른 css 가 적용 되게 하려면, 별도의 class명을 지정 해주면 됩니다.

<!-- 각각의 태그로 별도의 CSS 효과를 적용하고 싶으면 별도의 클래스 선택자 지정후 적용 -->
<p class="classSelector">나는 클래스 선택자</p>
<p class="classSelector classSelector2">나는 동일 클래스 선택자</p>

<!-- 선택자를 불러오는 방식 -->
<style>
  .classSelector {
    color: #000;
  }
  .classSelector2 {
    font-size: 2rem;
  }
</style>



지금까지 CSS의 선택자 id & class의 좀더 자세한 포스팅을 하였습니다.

도움이 되는 포스팅이었길 바랍니다.

다음 포스팅은 더 유익한 정보로 찾아뵙겠습니다.
감사합니다!

참고