공대남의 정보수용소

안녕하세요! 공대남입니다. CSS글을 보신다는 것은 HTML에 대해 어느정도 이해도가 있으시다고 생각이되네요.

일단 선택자가 무엇이냐면, 용어 그대로 HTML 요소를 선택하는 부분입니다. 

선택자가 왜 필요하냐면, 우리가 원하는 요소를 선택해야 하기 때문입니다.

일반적으로 모든 요소에 똑같은 스타일을 적용하지 않습니다. 그렇기에 특정한 요소를 선택한 후에

원하는 스타일을 적용하게 되는데, 그때 요소를 설정하도록 하는게 선택자 입니다.

예를 들어,

선택자를 이용하여 p요소를 선택하고 color 속성을 blue로 변경하는 코드는

p { color : blue; } 부분에서

p는 선택자가 되고 color는 속성, blue는 원하는 값이 됩니다.

css코드는 이런식으로 작성이됩니다.

그러면 선택자의 종류는 크게 다음과 같습니다.

그럼 차근차근 하나 씩 살펴 보도록 하겠습니다.

1. 타입선택자

타입선택자는 가장 기본적인 것으로써 HTML 요소 이름을 사용하는 것입니다.

예를 들어 <h1> 요소를 선택하여 color의 속성을 초록색의 값으로 하게하는 것은 이와 같습니다.

h1 { color : green; } 의 구조로써 아까 위에서 설명한 것이 타입 선택자였습니다.

이렇게 h1이라는 요소를 선택하고 적용하려는 속성을 선택하고 값을 선택하시면

이와 같이 브라우저에 출력됩니다.

<p>요소는 선택되지 않았기 때문에 <h1>요소만 스타일이 적용되어 출력됩니다.

2.전체 선택자

전체 선택자는 *기호로 표시되며 페이지 안 모든 요소를 선택할 때 사용하게 됩니다.

주로 모든 요소를 공통적인 속성으로 지정하려할 때 유용하게 사용하실 수 있습니다.

간단한 코딩을 보시겠습니다.

이와같이 *기호를 사용하여

* { color : blue; } 로 나타내게되면 페이지 내에 있는 모든 속성 즉 h1과 p 요소에 모두 적용됩니다.

그러면 브라우저에 이처럼 출력되게 됩니다.

보통 페이지내 모든 요소에 같은 스타일을 적용하는 경우가 드물기 때문에

잘 사용되지는 않습니다.

3.아이디 선택자

아이디 선택자를 사용하게되면 특정한 요소를 쉽게 선택하여, 어떤 특정요소에만 스타일을 적용할 수 있습니다.

먼저 어떤 HTML요소에 id를 부여하여야 합니다. 예를들어 어떤 단락에 아이디를 부여하면,

<p  id="special"> ~~~~ </p>

이렇게 나타나게 됩니다. 아이디 선택자는 id앞에 #을 붙여서

#special { color : blue; } 이처럼 나타나게 됩니다. 예시를 보시겠습니다.

이렇게 특정 <p>요소에 아이디를 부여하게되고 아이디선택자를 써서 스타일을 적용하면,

모든p요소가 아닌 특정 id가 부여된 요소만 스타일이 적용됩니다.

그 다음 이와같이 브라우저에 출력됩니다.

이렇게 id가 special 이라는 요소만 스타일이 적용되어 출력되게 됩니다.

4.클래스 선택자

클래스 선택자는 .을 이용하여 정의된다. 아이디 선택자와 같이 요소를 정의할 때

클래스 이름을 부여할 수 있습니다.

<p  class="type1"> ~~~~ </p>

이와 같이 나타내게 되며, 클래스 선택자는

.target { color : red ; }

이렇게 쓰는데, 아이디선택자와 같다고 생각될 텐데 두 선택자에는 차이가 있습니다.

클래스 선택자는 몇개의 요소를 하나의 클래스로 묶어서 스타일을 지정하려고 할 때 사용되고

id선택자는 하나의 요소만을 선택할 수 있지만, 클래스 선택자는 여러개의 요소를 한꺼번에 선택 가능 합니다.

예를 들어 이와 같이 코딩해보겠습니다.

<h1> 요소와 <p> 요소 둘 다 type1 이라는 클래스를 설정하였습니다.

그러면 브라우저에는 이처럼 출력됩니다.

참고로 text-align 이란 텍스트 정렬 상태를 표시하는 속성입니다.

이처럼 두 요소다 스타일이 적용됩니다.

그리고 속성.type1 이런 식으로 나타내면, 예를들어 p.type1 이렇게 나타내면

p요소 중 클래스가 type1인 요소에게만 적용됩니다. 예시를 보시겠습니다.

이렇게 코딩을하면 브라우저에는 이렇게 표시됩니다.

이와같이 h1 요소는 적용되지 않고 p요소중 클래스가 type1인 것 만 스타일이 적용되어 출력되었습니다.

오늘 선택자 강의는 여기까지 입니다.

다음번에는

CSS를 삽입하는 방법에 대하여 알아보도록하겠습니다. 감사합니다 !