요소/속성 선택자

mandoo·2022년 10월 27일
0

HTML/CSS

목록 보기
8/12

비전공자를 위한 HTML/CSS 강의 공부 기록입니다.

1. 요소 선택자

선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 한다.

h1 { color: yellow; }

요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어가며 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

h1, h2, div, span { color: yellow; font-size: 20px; }

선택자는 쉼표를 이용해서 그룹화를 할 수 있으며 선언들도 그룹화가 가능하다.

* { color: yellow; font-size: 20px; }

*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있지만 성능에 좋지 않으므로 되도록 사용을 지양해야 한다.

2. class 선택자

요소마다 다른 스타일 규칙을 적용하고 싶을 때 사용한다.
class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 한다.
선택자를 쓸 때는 .(마침표) 클래스 속성을 쓴다.

<style>
  .html { color: purple; }
  .css { text-decoration: underline; }
</style>
<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

위와 같은 코드로 "HTML"이라는 문자에는 보라색 글자를 지정하고, "CSS"라는 문자에는 밑줄을 선언할 수 있다.

※ 다중 class

하나의 요소가 여러 개의 class 속성을 가질 수도 있다.

<style>
  .java { color: purple; }
  .script { text-decoration: underline; }
</style>
<dl>
    <dt class="java script">JavaScript</dt>
    <dd><span class="java script">JavaScript</span>객체 기반의 스크립트 프로그래밍 언어입니다..</dd>

다중 class는 공백으로 구분한다.
위와 같은 코드로 "JavaScript"라는 문자에는 보라색 글자와 밑줄이라는 스타일 규칙이 모두 선언된다.

3. id 선택자

class 선택자와 비슷하다.
선택자를 쓸 때는 .(마침표) 대신 #(해시)를 쓰고 id 속성 값을 쓴다.

sky { background-color: powderblue; }

※ class 선택자와의 차이점

  • .(마침표)기호가 아닌 #(해시)기호 사용
  • 태그의 class 속성이 아닌 id 속성을 참조
  • 문서 내에 유일한 요소에 사용
  • 구체성

가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 것이다.
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있으며 그것이 클래스 선택자의 장점이기도 하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 힌다.
id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐이다.

4. 선택자의 조합

선택자는 종류에 상관없이 여러 가지 선택자들을 조합하여 사용할 수 있다. 다중 class도 선택자의 조합 중 하나라고 할 수 있다.
선택자가 모두 존재하는 태그에 스타일 규칙이 적용된다.

dt.html { background-color: powderblue; }

요소와 class의 조합
태그가 <dt>이면서 class에 html이 있어야 적용된다.

.html.css { background-color: powderblue; }

다중 class
class 속성에 html과 css가 모두 있어야 적용된다.

#sky.html { background-color: powderblue; }

id와 class의 조합
id가 sky이면서 class에 html이 있어야 적용된다.

5. 속성 선택자

1) 단순 속성으로 선택

속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어간다.
요소에 해당 이름의 속성이 있다면 해당 사항이 적용된다.

p[class] { color: red; }
p[class][id] { text-decoration: underline; }
<p class="hello">Hello</p>
<p class="css">CSS</p>
<p class="html" id="title">HTML</p>

Hello
CSS
Hello

속성 선택자에 속성의 값 없이 속성 이름만 있는 경우 속성의 값과 상관 없이 속성이 존재하면 스타일 규칙이 적용된다.
따라서 마지막 <p>태그에는 두 스타일 규칙이 모두 적용된다.

2) 정확한 속성 값으로 선택

선택자로 대괄호 안에 속성 이름과 속성 값을 모두 적으면 속성의 값으로 스타일 규칙이 적용될 요소를 지정할 수 있다.

p[class="css"] { color: red; }
p[id="title"] { text-decoration: underline; }
<p class="hello">Hello</p>
<p class="css">CSS</p>
<p class="html" id="title">HTML</p>

Hello
CSS
Hello

p[class="css"]는 2번째 p태그에만 p[id="title"] 3번째 p태그에만 적용된다.

3) 부분 속성 값으로 선택

[class~="color"] : class 속성의 값이 공백으로 구분한 "color" 단어가 포함되는 요소 선택
[class^="color"] : class 속성의 값이 "color"로 시작하는 요소 선택
[class$="color"] : class 속성의 값이 "color"로 끝나는 요소 선택
[class*="color"] : class 속성의 값이 "color" 문자가 포함되는 요소 선택

예시
p[class~="color"] { color: red; }
p[class^="color"] { font-size: 30px; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { background-color: powderblue; }

<p class="color hot">big red</p>
<p class="cool color">small red</p>
<p class="colorful nature">reddish big</p>

  • red: 1, 2. 4번 선택자 적용
  • small red: 1, 3, 4번 선택자 적용
  • reddish big: 2, 3, 4번 선택자 적용
profile
매일 조금씩이라도 꾸준히

0개의 댓글