CSS 선택자에대해 알아보자.

CSS의 선택자란?

• CSS를 개발자가 원하는 태그에 적용하기 위해선 CSS를 적용시킬 위치를 지정해주어야한다. 그럴때 사용하는것이 선택자 이다. 선택자는 여러종류가 있지만 이번시간에는 대표적인 전체,태그,class,id 선택자에대해 알아보고자 한다. 

 

 

 

CSS 선택자 사용 방법

• CSS 적용 방식중 inline 방식을 제외한 내부,외부 스타일시트 방식은 CSS가 적용될 태그를 지정해주어야한다.CSS를 적용시키고 싶은 태그를 지정하는 방법은 아래와 같다.

선택자{
	/* CSS 코드 */
}

/* 에시 */

div{
	width:100px;
	height:100px;
 }

 

CSS를 작성할땐 ;(세미콜론)을 사용해주어야한다. 이점 유의하도록 하자.

 

 

 

 

 

 

전체 선택자란?

• 전체 선택자란 * 를 사용하여 페이지안에 있는 모든 태그를 선택하 선택자이다. 이 선택자를 사용하면 페이지에서 사용되는 모든 태그들에 CSS가 적용된다. 사용 예시는 아래와 같다.

* {
	color:red;
}

----------------------------------

<p>p 태그</p>
<div>div 태그</div>
<span>span 태그</span>

결과

위 결과를 보면 별도의 태그 지정없이 모든 태그들에게 color:red;(글씨색을 빨간색으로 지정) 이 적용된것을 볼 수 있다.

 

 

 

 

 

 

태그 선택자란?

• 태그 선택자는 태그이름을 작성하여 선택한 태그에만 CSS 적용시키는 선택자이다. 사용방법은 아래와 같다. 

/* 사용 양식 */
태그{
   css 코드
}

/* 사용예시는 아래와 같다 */

p,div{
    color: red;
}

-------------------------------

<p>p 태그</p>
<div>div 태그</div>
<span>span 태그</span>

 

 

결과

 

태그 선택자는 ,(쉼표) 를 사용하여 여러개의 태그를 동시에 지정할 수도 있고 하나의 태그만 지정할 수도 있다. 위 코드에선 ,(쉼표)를 사용하여 p 태그와 div 태그를 동시에 지정해주었기 때문에 글자 색이 빨간색으로 변경된 모습을 볼 수 있다. 반면에 지정이 안된 span 태그는 default 값인 검은 글씨가 출력되는 걸 볼 수 있다.

 

 

 

 

 

 

id 선택자란?

• id 선택자는 # 을 이용하여 태그안에 id 값을 지정하여 해당 id 값을 가지고 있는 태그만 CSS를 적용시키는 선택자이다. 사용방법은 아래와 같다.

/* 사용 양식 */

#id {
   css코드
}


/* 사용 예시 */

#selected{
    color: red;
}

------------------------

<p id="selected">p 태그</p>
<div>div 태그</div>
<span>span 태그</span>

결과

id 선택자는 같은 id가 부여된 태그들한테 css를 적용시키는 태그이다. 태그에 id를 지정하는 방식은 시작태그 안에 id="임의의값" 을 입력하여 지정할 수 있고 CSS에서 이를 #(지정한 id) 를 입력함으로써 id 선택자를 사용할 수 있다. 위 코드에선 p 태그에 "selected" 라는 이름의 id를 부여하였고 #selected 선택자를 이용하여 글씨를 빨간색으로 변경해 주었다. id 값이 지정이 안되어있거나 다른 id 값이 부여된 태그한테는 css가 적용되지 않는다.

 

 

 

 

 

id 선택자의 중복사용

• id 선택자와 class 선택자의 차이점 중 하나는 중복사용의 가능 여부이다. 즉, id 선택자는 하나의 id값만 가지고 중복사용이 불가능하다. 하지만 아래의 예제를 봐보자. 

#idSelector{
  color:red;
}

--------------------------

<div id="idSelector"> id 선택자1 </div>
<div id="idSelectro"> id 선택자2 </div>

결과

 

결과를 보면 분명 id 선택자는 중복사용이 불가능하다 했는데 두 div 태그 모두 글씨가 빨간색으로 출력되고 있다. id의 중복사용으로 발생하는 문제점은 css가 아닌 자바스크립트에서 발생한다. 즉, id 선택자를 중복사용해도 괜찮은것처럼 보일지몰라도 나중에 자바스크립트를 반영하여 웹페이지를 만들고자 할때 큰결함으로 다가올 수 있다. 다시한번 강조하면 HTML 규정상 id 선택자의 중복사용은 불가능하다. 대신 중복사용이 가능한 class 선택자가 있으니 안심하자.

 

 

 

 

 

 

 

 

 class 선택자란?

• class 선택자는 .(점) 을 활용하여 선택한 class 값을 가지고 있는 태그들한테 css 를 적용시키는 선택자이다. 사용방식은 id 선택자와 비슷하고 예시는 아래와 같다.

/* 사용 방법 */
.id {
  css 코드
}

/* 사용 예시 */
.selected{
  color:red;
}


-----------------------

<p class="selected">p 태그</p>
<div class="selected">div 태그</div>
<span>span 태그</span>

 

결과

class 선택자는 기본적으로 id 선택자와 사용법이 동일하다. 다른점은 # 대신 . 을 사용하고 중복 사용이 가능하다는 것이다. 위 코드에선 selected 라는 이름의 class 를 p 태그와 div 태그에 지정하였고 해당 태그들의 글씨가 빨간색으로 출력된것을 볼 수 있다. 추가적으로 이 선택자는 class 태그는 중복사용이 가능하므로 다수의 태그에게 css 적용이 가능하다.

 

 

 

 

 

 

 

id,class 선택자에 대한 추가 설명

• id, class 선택자의 사용방법이 비슷하기 때문에 이 둘의 차별점에대해 헷갈릴것이다. 결론부터 말하면 id 선택자는 class 선택자보다 우선 적용되기 때문에 보통 class 선택자로 큰틀을 만든 다음 id 선택자로 세부사항을 적용한다. 이론보단 예시와 결과로 알아보자.

#idSelector1{
  color:blue;
}

#idSelector2{
  color:blue;
}

.classSelector{
  color:red;
}


---------------------------------------


<div id="idSelector1"> id 선택자 </div>
<div class="classSelector"> class 선택자 </div>
<div id="idSelector2" class="classSelector"> id, class 선택자 </div>

결과

 

위 코드에선 3개의 div 태그를 만들었고 각각 id,class 그리고 두값을 모두 가지는 방식으로 차별점을 두었다. 그리고 css를 활용하여 id 선택자는 글씨색을 파란색으로, class 선택자는 글씨색을 빨간색으로 출력되도록 지정했다. 그 결과 첫번째,두번째 div는 본인이 가지고 있는 선택자에 따라 파란색,빨간색 글씨가 출력되었다. 반면에 id,class 선택자를 모두 가지고 있는 3번째 div 에서는 빨간색이 아닌 파란색이 출력되었다. 이를 통해 우리는 class 선택자보다 id 선택자가 우선 적용된다는 사실을 알 수 있다.