CSS3 - CSS 선택자 - 타입 선택자, 전체 선택자, 아이디 선택자 (2)

CSS3 - CSS 선택자 

타입 선택자, 전체 선택자, 아이디 선택자 (2)

오늘은 CSS3의 두번째 내용으로 CSS의 선택자에

 대해서 가볍게 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)

먼저 CSS 선택자란?

 

먼저 css의 선택자란 css에서 가장 중요한 부분입니다.

이 선택자란 말 그대로 HTML 태그를 선택하는 부분인데 이러한

 CSS 선택자를 사용하는 이유중 예를 꼽자면

일반적으로 모든 태그에 동일한 스타일을 적용하는 일이 드문데  

특정 태그를 선택한 후에 여기다가 내가 원하는 스타일을 적용하기 위해 사용이 되며

이런 선택자들 아래와 같이 태그명을 선택하는 방법 말고도 

여러 가지가 있으며 아래 선택자 확인 후 하나 씩 어떻게 

적용 하는지 알아 보도록 하겠습니다.

- 선택자 종류 -

1. 타입 선택자

2. 전체 선택자

3. 아이디 선택자

4. 클래스 선택자

5. 속성 선택자

6. 의사 선택자

1. 타입 선택자

먼저 타입 선택자 입니다.

타입 선택자는 가장 기본적인 선택자로 HTML 태그를 사용하는 것인데요

예를 들어 이 전 포스팅에서 선택자를 처음으로 사용한 것 처럼

p태그를 선택하기 p를 적어준 것과 같은 선택자를 

"타입 선택자" 라고 합니다. ^^

<타입 선택자 사용예>

위 내용은 html 문서의 p태그를 선택하고 백그라운드 배경색을 

적색으로 지정한 모습 입니다.

(실행 화면은 이전 포스팅과 동일하므로 생략)

2. 전체 선택자

이번 선택자는 전체 선택자 입니다.

전체 선택자는  " * " 이라는 기호로 표시가 되는데 이러한 표시는 

html 문서안에 있는 모든 태그를 선택한다는 뜻이며

주로 모든 태그에 공통적으로 스타일을 입힐떄 사용 됩니다.

    

<전체 선택자 사용예>

위 내용은 html 문서의 body, p, span, div 태그에 글자를 넣고

위 스타일 부분에서 전체 선택자를 이용해 글자색을 적색을 변경시킨 모습 입니다.

3. 아이디 선택자

이번 선택자는 아이디 선택자 입니다.

아이디 선택자는 앞서 태그를 다룰때 id라는 속성을 본적이 있을 것입니다.

이러한 id 속성을 이용해 똑같은 태그중 특정한 위치에 있는 태그를 

선택할 수 있는데 이 포스팅에서 배운 선택자들 중 클래스 선택자와 더불어

가장 많아 사용하게 되는 선택자가 될 것입니다.

   

<아이디 선택자 사용예>

위 아이디 선택자를 사용하기 위해서는 먼저 html 태그를 작성할때

해당 선택자를 사용할 곳에 id 속성을 부여 해야 하는데

 위 이미지 부분에 p태그를 4개 작성한 다음

3번째 p태그에 id 속성 임의 이름인 blue라는 값을 지정 하였습니다.

그 다음 스타일 부분에 p태그를 작성후 p태그 들만 공통으로 

글자색을 적섹으로 지정 한 다음 그 아래 id속성을 별도로 선택해 

id 속성이 적용된 p태그의 글자색만 파란색으로 지정 하였습니다.

여기서 중요한건 css에서는 태그의 id 속성을 선택할 때 앞에 " # " 을 붙이고

id 속성의 값(임의 이름)을 적어주면 선택이 됩니다. 

여기까지 CSS3 - CSS 선택자 - 타입 선택자, 전체 선택자, 아이디 선택자 (2)에 

관련된 내용에 대해서 기록해 보았습니다.

(쓰다 보니 내용이 길어져 나마저 선택자는 

이 다음 포스팅에 이어 설명 하도록 하겠습니다.)

이상 CSS3 - CSS 선택자 - 타입 선택자, 전체 선택자, 아이디 선택자 (2)에 

관련된 포스팅을 마치도록 하겠습니다.