[웹 개발] 선택자 (1)

요소 선택자

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

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어갑니다.

문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다.

 

그룹화

선택자는 쉼표를 이용해서 그룹화를 할 수 있습니다.

h1, h2, h3, h4, h5, h6 { color: yellow; }

위 코드는 요소 선택자의 예제 코드와 같은 코드입니다.

그리고 전체 선택자 라고 불리는 간단한 선택자도 있습니다.

* { color: yellow; }

*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있습니다.

이렇게 선언하면, 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용됩니다.

전체 선택자는 매우 편리하지만, 성능에 좋지 않으므로 될 수 있으면 사용을 지양합니다.

선택자뿐만 아니라 선언들도 그룹화가 가능합니다.

h1 { color: yellow; font-size: 2em; background-color: gray; }

선택자와 선언이 동시에 그룹화도 가능합니다.

h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

 

class 선택자

요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것입니다.

class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 합니다.

class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있습니다.

class 속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수 있습니다.

.foo { font-size: 30px; }

<p class="foo"> ... </p>

위 코드처럼 <p>의 class 속성의 값으로 "foo"라는 값을 넣었다면, CSS에서

그 값("foo")을 선택자로 지정하면 됩니다.

클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어주셔야 합니다.

이렇게 되면 어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 됩니다.

 

다중 class

class 속성은 꼭 하나의 값만 가질 수 있는 것은 아닙니다.

공백으로 구분하여 여러 개의 class 값을 넣을 수 있습니다.

.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

위의 <p>에 class 속성에 "foo" 와 "bar" 2개의 값을 넣었습니다.

그리고 foo class 선택자에는 폰트의 크기를 30px로, bar class 선택자에는 글자를 파란색으로 적용하는 스타일 규칙이 선언되어있습니다.

그렇게 되면 이 <p>에는 2개의 규칙이 모두 적용이 됩니다.

 

id 선택자

id 선택자는 class 선택자와 비슷합니다.

선택자를 쓸 때는, .(마침표) 기호 대신 #(해시) 기호를 써주시면 되고,

요소에는 class 속성 대신 id 속성만 써주면 됩니다.

#bar { background-color: yellow; }

<p id="bar"> ... </p>

이 <p>는 id 선택자의 스타일 규칙이 적용됩니다.

 

class 선택자와의 차이점

1. .기호가 아닌 #기호 사용
2. 태그의 class 속성이 아닌 id 속성을 참조
3. 문서 내에 유일한 요소에 사용
4. 구체성 

가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점입니다.

클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었습니다.

그리고 그것이 클래스 선택자의 장점이기도 합니다.

하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 합니다.

결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐입니다.

그리고 마지막으로 구체성의 값이 다릅니다.

 

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }
 
/* 다중 class */
.foo.bar { ... }
 
/* id와 class의 조합 */
#foo.bar { ... }

첫 번째는 요소와 클래스를 조합한 경우입니다.

이 경우에는 <p>이면서 class 속성에 bar가 있어야 적용됩니다.

두 번째는 다중 클래스의 경우입니다.

이 경우에는 class 속성에 foo와 bar가 모두 있어야 적용됩니다.

마지막은 id와 class를 조합한 경우입니다.

이 경우에는 id가 foo이며 class가 bar인 요소에 적용됩니다.

 

속성 선택자

단순 속성으로 선택

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다.

요소에 해당 이름의 속성이 있다면 해당 사항이 적용됩니다.

위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드입니다.

첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용됩니다.

두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용됩니다.

바로 위  HTML 코드에는 3개의 <p>가 있습니다.

그렇다면 이 3개의 <p>에는 각자 어떤 스타일이 적용될까요?

p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용됩니다. 

p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용됩니다. 

두 규칙 모두 속성의 값은 상관하지 않습니다.

 

정확한 속성값으로 선택

정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택합니다.

선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 됩니다.

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용됩니다.

 

부분 속성값으로 선택

부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다. 

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

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

위의 코드에서는 모두 class 속성값으로 "color"를 선택합니다.

요소 순서대로 기호에 따라 규칙이 적용되는 결과는 다음과 같습니다.

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */