단순 선택자 - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • 단순 선택자
    learn
    Practice
    learn
    10 선택자(Selector)
    단순 선택자

    선택자(Selector)는 크게 아래와 같이 분류할 수 있습니다.

    • 단순 선택자
    • 복합 선택자
    • 가상 클래스 선택자

    이번 강의에서는 단순 선택자를 집중적으로 살펴보겠습니다. 단순 선택자로 사용할 수 있는 것은 다음과 같습니다.

    • 타입 선택자(Type Selector)
    • 아이디 선택자(Id Selector)
    • 클래스 선택자(Class Selector)
    • 전체 선택자(Universal Selector)
    • 속성 선택자(Attribute Selector)


    타입 선택자(Type Selector)


    타입 선택자(Type Selector)는 해당 태그를 가지는 모든 요소에 스타일을 적용합니다. 기본 사용법은 다음과 같습니다. 선택자 자리에 태그를 넣으면 태그에 해당하는 모든 요소에 스타일이 적용됩니다.

    위 코드를 CSS 파일에, 아래 코드를 HTML 파일에 작성하여 실행하면 p 태그에 해당하는 글자만 색이 바뀌는 것을 확인할 수 있습니다. 타입 선택자에서 p를 h1이나 h3로 바꿔 타입 선택자를 실습해보세요.

    이처럼 타입 선택자는 해당 태그를 가지는 모든 요소(Element)에 스타일을 적용합니다.


    아이디 선택자(ID Selector)


    아이디 선택자(ID Selector)는 아이디 이름으로 스타일을 적용합니다. 아이디 선택자 설명에 앞서 HTML의 속성(attribute)인 아이디에 대해 알아봅시다.

    아이디(Id)는 우리가 통상적으로 알고 있는 그 아이디가 맞습니다. Identification의 약자이며 '신분증'이란 뜻을 가지고 있죠.  이 지구상에 '나'와 같은 특징을 가진 사람은 많지만, 그 모든 특징의 교집합은 단 하나입니다. 즉, '나'는 단 하나 밖에 존재할 수 없음을 뜻하죠. 그것을 증명하기 위해 사용하는 우리는 '신분증'을 사용합니다.

    이처럼 HTML에서 아이디 속성 또한 동일한 의미를 지닙니다. HTML 문서 내에서 중복된 아이디는 존재할 수 없으며, 이는 서로 다른 요소들을 구별하기 위한 장치로 사용합니다. (여러 요소들에 같은 id를 쓰는 것은 권장되지 않습니다.)

    아까의 예시에서 두번째 <p>태그에 idgoorm을 추가하였습니다. 이렇게 아이디 속성을 이용하여 원하는 이름을 부여할 수 있습니다. 현재 HTML 코드를 아래와 같이 바꿔봅시다.

    다시 아이디 선택자로 돌아옵시다. 아이디 선택자는 HTML의 아이디 속성을 선택자로 사용하여 스타일을 적용합니다. 아이디 선택자는 다음과 같은 형태를 가집니다. #과 지정할 id를 함께 사용하여 해당 id를 선택합니다.

    아까 CSS코드를 아래와 같이 바꿔 봅시다.

    <p>태그 중에서 해당하는 아이디를 가진 요소만 배경이 파란색으로 바뀔 겁니다.


    클래스 선택자(Class Selector)


    아이디 선택자와 유사한 형태로 클래스 선택자(Class Selector)를 사용할 수 있습니다. 선택자에 대해 알아보기 앞서 클래스에 대해 살펴봅시다.

    클래스(Class)는 Id와 마찬가지인 HTML 속성입니다. 클래스는 비슷한 특징을 갖는 요소를 지정하여 묶어 그룹으로 만들 수 있습니다. 마치 학교에서의 하나의 반, 하나의 클래스처럼 말이죠.

    이 반의 학생들은 현재 모두 같은 수업을 듣고 있다는 특징을 가지고 있습니다.

    이와 마찬가지로 클래스 속성은 비슷한 특징을 가지는 요소들에게 지정할 수 있습니다. 물론 특징은 사용자 기준에 의해 정해집니다. 아래와 같이 마피아와 시민을 class로 그룹화했습니다. HTML 파일의 코드를 바꿔봅시다.

    그렇다면 클래스 선택자는 무엇일까요? 클래스 선택자는 HTML의 클래스 속성을 선택자로 사용하여 스타일을 적용합니다. 클래스 선택자는 다음과 같은 형태를 가집니다. .과 지정할 class를 함께 사용하여 해당 class를 선택합니다.

    위에서 설명한 마피아와 시민의 예시를 통해 직접 확인해봅시다. 마피아와 시민의 배경색을 달리하여 구분하고자 합니다. 아래와 같이 CSS 코드를 사용하여 구분해봅시다.

    class는 이렇게 비슷한 스타일을 묶어 스타일을 적용시키고 싶을 때 많이 사용합니다.


    전체 선택자(Universal Selector)


    전체 선택자(Universal Selector)는 모든 요소에 스타일을 적용합니다. 모든 요소에 적용시키기 때문에 속도가 저하될 수 있어 쓰지 않기를 권장하지만 살펴볼 필요는 있습니다. 전체 선택자를 사용하고 싶다면 선택자 자리에 *를 입력하면 됩니다.

    이제까지 적용한 스타일을 모두 지우고, 전체 선택자로 모든 요소들을 노란 글씨로 만들어봅시다.


    속성 선택자(Attribute Selector)


    마지막으로 속성 선택자(Attribute Selctor)는 특정 HTML 속성을 가지고 있는 모든 요소에 스타일을 적용합니다. 속성 선택자를 사용하고 싶다면 선택자 오른쪽에 [](대괄호)로 속성과 속성 값을 넣어 작성하면 됩니다.

    직접 사용해볼까요? 우선 이 예시를 설명하기 위해 앞서 배운 링크 태그를 다시 사용해보겠습니다.

    같은 페이지의 링크들이지만 새 창에서 여는 링크 태그만 글자색을 빨강으로 바꿔주려 합니다. 아래와 같이 작성하여 실행해봅시다.

    추가로 여기서 <a> 태그 이외의 방법으로 링크를 걸어보겠습니다. 다음은 class를 이용하여 링크를 건 코드입니다.

    위 코드들을 직접 작성한 뒤 실행하여 올바르게 동작하는지 살펴봅시다. [](대괄호) 앞에 들어가는 것은 태그가 아닌 선택자임을 꼭 숙지하셔야 합니다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)