[TIL] CSS 선택자, 구체성, 상속, Cascading

이지예·2022년 5월 24일

CSS

목록 보기

3/9

선택자 (이전 포스팅에 이어서 작성)

2. class 선택자

(1) 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법이다. 글로벌 속성중 하나인 class 속성에 값을 넣게 되면, CLASS 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수 있다.

<p class="fo"></p><!--html-->

.foo{font-size:30px;}/*CSS*/
/* 선택자에 class의 값을 넣는다. 맨 앞에 마침표를 적어야 한다.*/

(2)
class 속성에는 여러개의 값을 넣을 수 있다. 이때 속성값은 공백으로 구분짓는다.

<dt class="color_purple write_underline">JS</dt>
<dd><span class="color_purple write_underline">JS</span>는 문서의 동작을 나타냅니다.</dd>

3. ID 선택자

CLASS 선택자와 매우 유사하다.

차이점 :

.점 대신 #(해시기호)를 써주면 된다.
요소에는 class 속성 대신 id속성을 넣어주면 된다.
문서내에 유일한 요소에 사용한다.
구체성

선택자의 조합

선택자는 조합이 가능하다

1. 요소와 클래스의 조합

p.bar{}/*<p>태그이면서 클래스로 bar가 있어야 규칙이 적용된다.*/

2. 다중 클래스

class에는 여러 개의 값이 들어갈 수 있다고 했는데, 같은 클래스 속성 안에 있는 속성값들을 동시에 선택자로 선택하는 방법이다.

.foo.bar{}/*foo와 bar를 class 속성 값으로 모두 가지고 있는 경우에만 적용된다.*/

3. 아이디와 클래스의 조합

#foo.bar{}/*아이디는 foo이면서 클래스는 bar인 요소가 선택된다.*/

4.속성 선택자

태그에 속성을 이용해서 요소를 선택한다.

1. 단순 속성으로 선택

p[class] {color:silver;} /*<p>요소이면서 class라는 속성이 있는 요소의 글자를 은색으로 표현한다.*/
p[class][id] {text-decoration:underline;}/*<p>요소이면서 class속성도 있고, id 속성도 있어야 밑줄 적용*/

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
<!--셋 다 은색으로 나오고, 세번째 요소만 밑줄이 쳐진다.-->

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

속성값으로 요소를 선택한다.
선택자를 쓸 때 속성의 이름과 속성값까지 같이 적어줘야 한다.

3. 부분 속성값으로 선택

속성 이름과 속성값 사이에 사용되는 기호에 따라 다르다.

[class~="bar"]
/*class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택*/

[class^="bar"] /*^(캐럿)*/
/*class 속성의 값이 "bar"로 시작하는 요소 선택*/

[class$="bar"]/*dollar sign*/
/*class 속성의 값이 "bar"로 끝나는 요소 선택*/

[class*="bar"]/*asterisk*/
/*class 속성의 값이 "bar" 문자가 포함되는 요소 선택*/

예시)
CSS 코드

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;}/*모두 적용*/

HTML 코드

<p class="color hot">red</p><!--1-->
<p class="cool color">blue</p><!--2-->
<p class="colorful nature">rainbow</p><!--3-->

문서 구조 관련 선택자

선택자와 문서 사이의 관계를 이해하기 위해서는 문서가 어떻게 구조화되는지 살펴봐야 한다.

부모와 자식 관계 이해하기

<html>
    <head>
    </head>
    <body>
        <div>
            <h1><span>HTML</span>Hyper Text Markup Language</h1>
            <span>CSS는 문서를 꾸며줍니다.</span>
        </div>
        <span>JavaScript는 문서를 동적으로 제어할 수 있습니다.</span>
        <p>HTML과 CSS와 JAVASCRIPT를 이용해서 웹 사이트를 제작할 수 있습니다.</p>
    </body>
</html>

<html>의 자식요소 : <head>, <body>
<body>의 부모요소 : <html>
<body>의 자식요소 : <div>, <span>, <p>
<body>의 자손요소 : <div>, <span>, <p>, <h1>, <span>, <span> (자식요소도 포함된다.)
<body>의 자식요소인 <span>의 조상요소 : <html>, <body>(부모요소도 포함된다.)
<body>의 형제요소 : <head>
<p>의 형제요소 : <span>, <div>
<span>과 인접한 관계에 있는 형제요소 : <p> (바로 뒤에 있는 요소를 인접해있다고 한다.)

문서 구조를 이용한 선택자

1. 자손 선택자

div span {color:red;}
/*선택자와 선택자 사이를 공백으로 구분한다.*/

2. 자식 선택자

div>span{color:red;}
/*선택자 사이에 꺽쇠 기호를 넣어주면 된다. 기호의 좌우에는 공백을 줘도 된다.*/

3. 인접 형제 선택자

div+span{color:red;}
/*선택자 사이에 +기호를 쓰면 된다. 자식 선택자와 마찬가지로 기호 앞뒤에 공백이 있어도 괜찮다.*/

요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소이다.

가상 선택자

지금 문서 내에 존재하지 않는 요소에 스타일을 부여할 수 있고, 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용시킬 수 있는 선택자이다.

1. 가상 클래스(pseudo class)

미리 정의해놓은 상황에 적용이 되도록 약속되어 있는 보이지 않는 클래스이다. 보통 우리는 스타일을 주기 위해 클래스를 이용한다. 스타일 규칙을 만들고 내가 원하는 요소에 클래스 값을 미리 선언하게 된다. 가상 클래스는 우리가 요소에 직접 클래스를 입력하는 것이 아닌, 브라우저 스스로가 특정한 상황이 되면 자동적으로 클래스를 적용시켜주는 것이다.

.red{color:red;}/*css*/

<p class="red"> </p>/*html*/

이전까지 배운 방식으로 코드를 짜면 문서가 나오자마자 해당 요소는 붉은색으로 표현이 된다.

만약 마우스를 글자에 올리거나 하는 특수한 상황에만 글자색을 붉은색으로 표현하고 싶다면 보통 JavaScript와 같은 다른 언어를 사용해서 별도의 처리를 해줘야 한다. 그러나 가상 클래스를 이용하면 CSS만으로 구현이 가능하다.
이 경우 JavaScript를 사용하는 경우보다 효율적이다.

가상 클래스는 실제 클래스 속성 코드에 보이지 않지만 미리 다 정의되어 있기 때문에 클래스의 이름을 다 알 수 있다.

문서 구조와 관련된 가상 클래스

li:first-child{color:red;}
/*first-child는 첫 번째 자식 요소에 들어가는 클래스이다.*/

li:last-child{color:blue;}
/*last-child는 마지막 자식 요소에 들어가는 클래스이다.*/

<ul>
    <li>HTML</li><!--눈에 보이지 않지만 이 첫 번째 요소에는 가상 클래스가 들어가 있다.-->
    <li>CSS</li>
    <li>JS</li><!--마찬가지로 눈에 클래스 속성이 보이지는 않지만, last-child라는 가상 클래스가 들어가 있다.-->
</ul>

링크 관련된 가상 클래스

a:link{color:purple;}
/*link는 하이퍼링크이면서 아직 방문하지 않은 앵커를 뜻하는 가상 클래스이다.*/
a:visited{color:gray;}
/*visited는 이미 방문한 하이퍼링크를 의미하는 가상 클래스이다.*/

사용자 동작 관련된 가상 클래스

a:focus{background-color:yellow;}
/*focus는 현재 입력 포커스를 갖고 있는 요소에 적용된다.
입력 포커스란 입력 폼 요소를 클릭하거나, 
키보드의 탭 키를 이용해서 탐색하다가 점선 테두리가 위치하는 경우가 포커스를 받은 상태이다.*/
a:hover{font-weight:bold;}
/*hover는 마우스가 올려진 요소에 적용된다.*/
a:active{color:red;}
/*active는 포커스가 간 상태에서 링크를 클릭하거나 버튼을 눌렸을 때 순간적으로 발생하게 된다.*/

2. 가상 요소(pseudo element)

지금 HTML 코드 내에 존재하지 않는 구조, 요소에 스타일을 부여할 수 있다. 미리 정의해놓은 위치에 삽입되도록 약속 되어 있는 보이지 않는 요소이다.

:before{}
/*요소 내에 가장 첫 번째 자식으로 삽입 된다.*/
:after{}
/*위와 반대로 가장 마지막 자식으로 삽입 된다.*/
:first-line{}
/*요소의 첫 번째 줄에 있는 텍스트를 감싸는 요소가 삽입 된다. 
이 첫 번째 줄은 브라우저의 화면을 기준으로 한다.*/
:first-letter{}
/*요소 내에 블록 레벨 요소 중에서 첫 번째 문자를 감싸는 요소를 생성해준다.*/
:first-letter{} 
/*before 가상 요소로 인한 텍스트를 포함하여 브라우저 내에서 가장 첫번째 글자에 영향을 준다.*/

모두 가상 요소이기 때문에 HTML 구조에는 나타나지 않는다.
또 before과 after 가상 요소는 애초에 내용이 없는 상태로 생성된 요소이기 때문에 내용을 집어 넣기 위해서는 contents라는 CSS 속성도 사용해야 한다.

구체성(명시도)

아래 두 규칙 모두 h1 요소를 선택하는 선택자이다. 하지만 지정한 스타일이 서로 상반된 경우이다.

h1{color:red;}
/*요소 선택자를 사용한 규칙*/
body h1{color:green;}
/*요소 선택자 두 개를 조합해서 자손 선택자를 사용한 규칙*/

아래는 모두 h2 요소를 선택하는 규칙이다.

h2.grape{color:purple;}
/*요소 선택자와 클랙스 선택자를 조합한 규칙*/
h2{color:silver;}
/*단순 요소 선택자를 사용한 규칙*/

h1 과 h2 요소는 어떻게 표현될까?

선택자에는 어떠한 규칙이 우선되어야 하는지 정해진 룰이 있는데 그것이 바로 구체성이다. 구체성은 선택자를 얼마나 명시적으로 선언했는지를 수치화한 것으로 구체성의 값이 높을수록 우선되어 적용된다.

0,0,0,0

구체성의 값은 네 개의 값으로 이루어져 있고, 좌측에 있는 값부터 비교를 하기 때문에 좌측 부분의 숫자가 클수록 높은 구체성을 갖는다고 볼 수 있다. 각 자리는 서로 독립적이기 때문에 10진수로 읽으면 안된다.

0,1,0,0 :선택자에 있는 모든 id 속성값에는 0,1,0,0의 값이 추가된다.

0,0,1,0:선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스에는 0,0,1,0의 값이 추가된다.

0,0,0,1:선택자에 있는 모든 요소, 가상 요소에는 0,0,0,1이 추가된다.

조합자(>, +)나 전체 선택자는 구체성에 영향을 주지 못한다.

구체성 예제 :

h1{} /* 0,0,0,1*/
body h1{} /* 0,0,0,2*/
.grape{} /* 0,0,1,0*/
*.bright{} /* 0,0,1,0 ( 전체 선택자 * 는 구체성에 영향을 주지 않는다.)*/
p.bright em.dark{} /* 0,0,2,2*/
#page{}/*0,1,0,0 (두번째로 높은 구체성을 갖는 선택자)*/
div#page{} /* 0,1,0,1 (가장 높은 구체성을 갖는 선택자)*/

인라인 스타일 구체성

p#page{color:red;}/*CSS*/

<p id="page" style="color:blue">Lorem ipsum dolor sit.</p><!--HTML-->

이 경우에 `<p>`요소의 글자 색은 어떻게 될까?

CSS의 구체성은 0,1,0,1 (id 속성값, 요소)

요소에 직접 '인라인 스타일 속성'으로 지정한 HTML의 구체성은 첫 번째 자리의 값에 해당하므로 제일 높은 구체성을 가지고 있어서 글자 색은 파란색이 된다.

만약 CSS의 속성값 뒤에 한 칸 공백을 주고 !important키워드를 입력하면 모든 구체성을 무시하고 우선권을 갖게 된다.

상속

구체성과 더불어 선언들이 문서에 어떻게 적용되는지를 이해하기 위한 또 다른 중요한 핵심 개념이다. 어떤 스타일이 특정 요소만이 아니라 그 자손 요소에까지 적용되는 방식이다.

h1{color:gray;}

<h1>Hello, <em>CSS</em></h1>
<h1>요소 안의 모든 글자들이 회색으로 표현된다.

박스 모델 속성들은 모두 상속되지 않는다.

박스 모델 속성의 예 : margin, padding, background, border 등

상속된 선언의 구체성

*{color:red;}/*0,0,0,0*/
h1#page{color:gray;}/*0,1,0,1*/

<h1 id="page">Hello, <em>CSS</em></h1>

화면에 Hello,만 회색, 자식요소인 em은 빨간색으로 표현된다.
그 이유는 상속된 값에는 아무런 구체성을 갖지 못하기 때문이다.
0,0,0,0의 값도 없기 때문에 전체 선택자의 구체성에도 밀리게 된다.
그렇지만 전체 선택자가 없었다면 어떠한 선택자와도 겹치지 않아서 아무런 구체성이 없어도 회색으로 표현되었을 것이다.

캐스케이딩

모든 스타일 규칙들(CSS)이 어떤 기준으로 문서에 적용 되는지를 정한 규칙으로, 지금까지 배운 규칙도 캐스케이딩 규칙의 하나이다.

구체성이 같은 두 가지 규칙이 동일한 요소에 적용이 된다면 어떻게 될까?

h1{color:red;}
h1{color:blue;}

구체성이 같은 규칙이 나오면 단계적인 규칙에 따라 동작한다.

캐스케이딩 규칙

1. 중요도와 출처

중요도는 !important를 말한다. !important로 선언된 규칙은 그렇지 않은 규칙보다 우선한다.
출처는 제작자, 사용자, 사용자 에이전트로 구분한다. 제작자는 실제 사이트를 제작하는 사이트 개발자가 작성한 CSS를 이야기하고, 사용자는 사이트를 방문하는 일반 사용자들이 작성한 CSS, 사용자 에이전트는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 얘기한다.

우선순위

사용자 !important 스타일
잘 사용되지 않는다.

제작자 !important 스타일

제작자 스타일
사이트 제작자가 작성한 CSS를 말한다. 대부분의 스타일 규칙들이 해당된다.

사용자 스타일
일반 유저가 CSS를 만들어서 본인 브라우저에 설정 해놓은 것

사용자 에이전트 스타일
브라우저에서 기본적으로 제공하는 스타일

2. 구체성

p#bright{color:silver;}/*0,1,0,1*/
p{color:red;}/*0,0,0,1*/

<p id="bright">Hello, CSS</p><!--은색으로 표현된다.-->

3. 선언 순서

나중에 선언된 명령이 우선된다.
h1은 파란색이 출력된다.

이지예

이전 포스트

[TIL] CSS 적용방식 2, 선택자

다음 포스트

[TIL] CSS 속성의 정의 및 syntax 확인 법, 속성의 단위

1개의 댓글

이지예

2022년 5월 24일

CSS 선택자

답글 달기