선택자(Selector)에 대하여 - 바로 실행해보면서 배우는 HTML5/CSS3
선택자(Selector)에 대하여
learn
Practice
learn
09 CSS 기초
선택자(Selector)에 대하여

앞서 설명한 CSS의 구성 요소 중 선택자(Selector)에 대해 좀 더 살펴보려 합니다. 선택자는 스타일 명세서에서 이 글의와 같은 역할을 수행하죠.

코드로 나타내면 다음과 같습니다.선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할을 수행합니다.

<h1>, <p>, <div>와 같은 일반적인 태그 이름을 선택자로 사용할 수 있습니다. 아래 CSS코드를 오른쪽 실습창에 직접 작성하여 실행해봅시다. 두 문장 모두 빨간 글씨로 변경될 겁니다.

위의 예시에서 <p> 태그와 <h1> 태그의 color 속성 값은 모두 red입니다. 심지어 color라는 속성 하나만 사용하기에 선택자를 제외한 두 코드는 동일합니다.
이렇게 중복으로 코드를 작성하는 것은 굉장히 낭비이니, 코드 효율을 높이기 위해 중복을 제거하겠습니다. CSS에서는 ,(콤마)로 선택자 여러 개의 스타일을 한꺼번에 지정할 수 있습니다. 먼저 작성했던 CSS 코드를 아래와 같이 수정하고 실행해봅시다.

이와 더불어 각 HTML 구조에 다른 속성을 추가하고 싶다면 설정하고자 하는 속성을 따로 다시 정의해주면 됩니다.

결론적으로 위 코드와 아래 코드는 동일한 코드입니다. CSS에서 이와 같이 선택자를 활용하여 공통되는 스타일을 묶어서 한 번에 적용할 수 있습니다.  지금은 코드 자체도 짧고, 공통되는 스타일이 적어 '굳이 이렇게까지 해야 할까?' 생각될 수 있지만 공통되는 스타일이 많을수록, 코드 길이가 더욱 길어질수록 중복을 제거하여 코드 효율을 높일 수 있어야 합니다. 이 점 유의하여 앞으로 스타일을 깔끔하게 지정해 봅시다.

선택자에 대한 설명은 여기서 끝이 아닙니다. 더 다양한 선택자가 있으니 이어지는 강의에서 순서대로 배워 봅시다.

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)