CSS 04 CSS3 선택자

CSS 04 CSS3 선택자

CSS3의 선택자 개요

1. CSS 선택자(Selector)란?

CSS3의 선택자 개요

HTML5 웹 문서에 스타일을 입힌다는 것은 결국 원하는 HTML 엘리먼트를 선택해서 그림 그리듯 예쁘게 꾸미는 것을 의미합니다. 그리고 HTML 엘리먼트를 꾸미는 것이 바로 CSS 입니다. 모든 CSS는 선택자의 조합으로 구성 되었는데, CSS 선택자는 속성이 어디에 있는지를 표시 해줍니다.

CSS를 활용하기 위해서는 우선 선택자에 대해 이해해야 합니다. 선택자라는 이름은 속성이 어디에 적용되는지 표시한다고 해서 이름 붙여졌으며 앞서 말했듯이 모든 CSS는 선택자의 조합으로 구성이 되어있으며 그 종류가 매우 다양합니다. 그럼 선택자의 작성시 유의사항 대해 알아보겠습니다. 먼저 선택자의 이름을 지정하는데, 선택자의 이름은 HTML 태그 중에 하나가 될 수도 있고, 직접 이름을 지어서 입력할 수도 있습니다. 다음 중괄호를 사용하여 선언 구간을 만들고, 선언 구간 안에 속성 이름, :, 속성 값. ; 순으로 작성합니다. 이때, 콜론은 속성이름과 속성 값을 구분하기 위한 것이며, 세미콜론은 마침표의 역할을 수행합니다. 다른 속성을 추가하고자 할 때에는 세미콜론 뒤에 다시 속성 이름을 추가하고 동일한 방식으로 계속 작성하면 됩니다.

Rule Set은 HTML 페이지 안의 특정 요소들을 어떻게 Rendering할 것인지를 브라우저에게 알려주는 CSS문장입니다. 스타일 규칙이라고도 불리는 이 문장은 스타일에 관한 규칙들을 집합처럼 나타냅니다. Rule Set, 즉 CSS문장을 선택자 사용 예시를 통해 알아보겠습니다. 예시에서 선택자를 div로 설정 하였고, 중괄호로 시작선언을 했습니다. 속성으로 width를 사용하였고, :을 통해 속성과 속성 값을 구 분한 후 width의 속성 값으로 960px을 입력하였습니다. 그리고 ;으로 속성값을 마쳤으며 중괄호로 종료선언을 하였습니다. 예시처럼 CSS 문장을 작성하면 넓이가 960px인 div 박스가 생성됩니다. 이러한 문장들을 모아서 작성하면 스타일 시트를 이루게 되며, 많은 수의 스타일 규칙들을 관리하기가 쉬워집니다.

2. HTML, CSS, Javascript

웹 기술 세 가지 핵심 요소는 HTML, CSS, Javascript 이며, 이 요소들은 언어의 구성요소와 비슷한 관계를 이루고 있는데, 각 언어들의 설명이 일치하도록 블록을 아래로 드래그하여 완성해보세요.

명사는 언어를 이루기 위한 기본적인 단어로, 웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어인 HTML 과 비슷하며, 형용사와 부사는 명사와 동사를 꾸며주는 말로, 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트인 CSS와 비슷합니다. 그리고 동사는 움직임을 나타내는 언어로, 동적인 화면을 웹 페이지에 구현하기 위해 사용하는 스크립트 언어인 Javascript와 비슷하다고 볼 수 있습니다.

3. CSS 규칙의 종류

CSS는 많은 장점들이 있습니다. 그 중에서 가장 큰 장점은 설정하기가 매우 쉽다는 것인데, 이것은 CSS가 플러그 인이나 소프트웨어가 필요 없는 단순한 규칙으로 이루어진 텍스트 파일이기 때문입니다. 그리고 이러한 CSS의 규칙은 크게 HTML 선택자, 클래스선택자, 아이디 선택자 세 가지의 종류가 있습니다. 첫 번째 규칙은 HTML 선택자로 CSS규칙에서 태그가 보이는 방식을 재정의합니다. 다음과 같이 선택자 h1을 속성 color와 속성 값 blue로 정의하면 <h1> 태그로 묶인 텍스트 영역에 파란색 스타일이 적용됩니다. 따라서 h1은 <h1> 태그에 대한 선택자라고 할 수 있습니다.

두 번째 규칙은 클래스 선택자로 원하는 HTML 태그에 모두 적용할 수 있습니다. 클래스 선택자는 맨 앞에 .를 찍어서 표시하며 클래스 이름에는 원하는 이름을 거의 모두 사용할 수 있습니다. 다음과 같이 .maintext이라는 클래스 이름을 color 속성에 red 값을 주고, 정렬방식을 지정하는 align 속성에 center 값을 주어 두 가지 속성을 정의하고 <p> 태그에서 클래스 선택자를 통해 정의했던 클래스명을 써주면 <P> 태그로 묶인 부분의 영역에 빨강색과 가운데 정렬이 적용됩니다. 클래스 선택자는 여러 HTML 태그에 적용할 수 있으므로 가장 다용도로 사용할 수 있는 선택자입니다.

세 번째 규칙은 아이디 선택자입니다. 클래스 선택자와 비슷하게 아이디 선택자 규칙도 모든 HTML 태그에 적용할 수 있습니다. 다만, 아이디 선택자는 JavaScript 함수에서 객체를 사용할 수 있도록 페이지상에서 특정 HTML 태그에 한 번만 적용해야 합니다. 아이디 선택자는 다음과 같이 앞쪽에 #을 붙여서 나타내며 아이디 이름에는 원하는 이름을 거의 다 사용할 수 있습니다. 위치를 지정하는 속성인 positon 에 5px 속성 값을 주어 ‘myhome’이라는 아이디 이름을 정의하였고, <h1> 태그에서 아이디 선택자를 통해서 정의했던 ID명을 써주면 <h1> 태그에 묶인 영역에 위에서 5px 만큼 내려오는 효과가 적용됩니다.

CSS3의 선택자 종류

1. CSS3 선택자의 종류

CSS3의 선택자 종류

CSS3의 선택자에는 태그 선택자, 클래스 선택자, 아이디 선택자, 하위 선택자, 전체 선택자, 이렇게 다섯 가지가 있습니다. 태그 선택자는 특정 태그에 스타일을 적용할 때 사용됩니다. CSS를 작성할 때 가장 기본적으로 사용하는 방식으로 HTML 태그에 직접 스타일을 지정하며, 태그 선택자로 지정한 스타일은 페이지 안에 있는 해당 태그 모두에 영향을 주어 스타일이 적용됩니다. 예제를 통해서 자세히 살펴보겠습니다. h1은 태그 선택자로 h1의 스타일을 빨간색과 가운데정렬로 정의하였습니다. 다음과 같이 소스를 입력하고 결과화면을 보면 <h1> 태그로 묶인 부분은 h1 태그 선택자로 정의했던 빨간색 가운데정렬 스타일이 적용된 것을 확인할 수 있습니다.

클래스 선택자는 특정 부분에 스타일을 적용할 때 사용합니다. 스타일을 사용 하고자 하는 엘리먼트에 클래스 이름을 지정하면 되는데, 여러 엘리먼트에 지정하면 정의한 스타일을 여러 엘리먼트에 적용하여 사용할 수 있습니다. 클래스 선택자는 맨 앞에 .를 붙여 나타내고 반드시 영문으로 시작하는 클래스 이름을 작성해야 합니다. 그럼 예제를 통해 자세히 살펴보겠습니다. .cont 라는 클래스 이름을 작성한 후 파란색과 가운데 정렬로 정의하였습니다. 그리고 다음과 같이 <h1> 태그와 <h2> 태그에 cont라는 클래스 이름을 지정하였습니다. 결과 창을 보면 <h1> 태그와 <h2> 태그 모두에 파란색과 가운데 정렬이 적용된 것을 확인할 수 있습니다.  

아이디 선택자도 클래스 선택자와 마찬가지로 특정 부분에 스타일을 적용할 때 사용합니다. 그러나 클래스 선택자와는 달리 페이지 안에서 단 하나의고유한 엘리먼트를 나타내기 위해 사용하며 HTML 엘리먼트에도 고유한 이름을 지어서 사용합니다. 맨 앞에 #기호를 붙여 나타내고 반드시 영문으로 시작하는 아이디 이름을 작성해야 합니다. 그럼 예제를 통해 자세히 살펴보겠습니다. #pos라는 아이디 이름을 작성한 후 텍스트 정렬을 가운데정렬로 정의하였습니다. 그리고 <h1> 태그에 “pos”를 지정하였습니다. 결과 화면을 보면 <h1> 태그에 #pos 에서 정의한 가운데 정렬 스타일이 적용된 것을 확인할 수 있습니다.

하위 선택자는 모든 하위 요소에 스타일을 적용할 때 사용합니다. 선택자들 간의 관계를 동시에 고려한 선택자로써 선택자의 영향력 안에 들어 있는 특정 선택자를 가리킨다고 할 수 있습니다. 부모 요소에 포함된 모든 하위 요소에 스타일적용 되는데, 아이디나 클래스 선택자를 통해 직접 특정 태그 하나만 스타일을 주지 않고, 기준 태그를 정한 뒤 자동으로 그 안에 있는 태그에 적용시키고자 할 때 많이 사용합니다. 그럼 예제를 통해 자세히 살펴보겠습니다. 다음과 같이 p 태그 선택자는 빨간색의 스타일을 주었고, #pos 아이디 선택자는 가운데 정렬 스타일을 주었습니다. 그리고 세 개의 텍스트를 입력하였는데, 첫 번째 텍스트는 p태그 선택자를 사용하였고, 두 번째 텍스트는 아이디 선택자를 사용하였습니다. 그래서 결과화면을 보면 첫 번째 텍스트에는 빨간색 스타일이, 두 번째 텍스트에는 가운데 정렬 스타일이 적용된 것을 확인할 수 있습니다. 그럼 세 번째 텍스트는 과연 어떤 선택자의 영향을 받을까요?  한 번씩 생각해 보신 후 결과화면을 클릭하여 답을 확인해 보시기 바랍니다. 세 번째 텍스트는 p태그 선택자의 영향을 받는다는 것을 확인할 수 있습니다.

전체 선택자는 모든 요소에 스타일을 적용할 때 사용합니다. 페이지에 있는 모든 요소를 대상으로 스타일을 적용하며, *를 선택자 이름으로 대신하여 사용합니다. 그럼 예제를 통해 자세히 살펴보겠습니다. 다음과 같이 선택자를 *로 하고 초록색과 가운데 정렬 스타일로 정의하였습니다. <h1> 태그와 <h2>태그, 그리고 <p> 태그를 이용하여 텍스트를 입력하고 결과 화면을 보면 모든 태그 안에 초록색과 가운데 정렬 스타일이 적용된 것을 확인할 수 있습니다.