Chapter 10
10-1 연결 선택자
하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자
특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다.
하위 선택자
하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며, 자손 선택자라고도 한다. 즉, 자식 요소뿐만 아니라 손자요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다.
/*기본형*/
상위요소 하위 요소
/*example*/
section p { ....... }자식 선택자
자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 다음과 같이 두 요소 사이에 >기호를 표시해 부모 요소와 자식 요소를 구분한다.
/*기본형*/
부모요소 > 자식요소
/*example*/
section > p { ....... }자식 선택자는 하위 선택자와 비슷해 보이지만 다른 점이 있다. 하위 선택자에서는 자식 요소뿐만 아니라 자식의 자식, 즉 손자 요소까지 적용되지만, 자식 선택자에서는 바로 한 단께 아래의 요소, 즉 자식 요소에만 스타일이 적용된다.
형제 요소에 스타일을 적용하는 인접 형제 선택자와 형재 선택자
웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.
인접 형제 선택자
형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 한다. 인접 형제 선택자를 정의할 때는 다음 기본형과 같이 요소1과 요소2 사이에 '+' 기호를 표시한다. 요소1과 요소2는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소2를 선택한다.
예제의 코드는
<h1>,<p>,<p>,<p>의 구조로 되어있다. 만약 두 번째<p>에만 적용하고 싶다면 어떻게 해야할까? 테스트 해본 것들
h1 + p + p
p + p
형제 선택자
형제 선택자는 형제 요소의 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용된다. 형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시한다. 요소1과 형제인 요소2를 모두 선택하는 것이다.
**그렇다면 h1 ~ p 대신 p ~ p를 선택자로 지정해준다면 어떻게 될까?** 선택자 | 코드 | 결과값 ---|---|--- `h1 ~ p` | | `p ~ p` | |
10-2 속성 선택자
특정 속성이 있는 요소를 선택하는 [속성] 선택자
HTML 태그를 작성할 때 여러 가지 속성을 함께 사용하기 마련이다. 그 속성값에 따라 원하는 요소를 선택할 수도 있다. 이때 사용하는 것이 [속성] 선택자인데, 대괄호[] 사이에 원하는 속성을 입력하면 된다.
특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자
[속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용한다. 이 형식은 대괄호[]안에 속성과 속성값을 넣고 그 사이에 '='기호를 표시한다.
여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자
[속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다. 이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는데 편리하다.
선택자 | 코드 | 결과값 **주의점** `[속성 ~= 값]` 선택자는 `botton` 값과 정확하게 일치하는 요소를 선택한다. 만약 `flat-button`이나 `buttons`처럼 `button` 외에 다른 글자가 속성값에 포함되어 있으면 선택하지 않는다.
특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자
[속성 |= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용한다. 이때 속성값은 한 단어로 일치해야 한다. 앞에서 다룬 [속성 ~= 값] 선택자와 비슷해 보이지만, [속성 ~= 값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않는다는 점에서 [속성 |= 값] 선택자와 차이가 있다. 즉, [속성 |= 값] 선택자는 지정한 값과 정확하게 일치하거나, 지정한 값을 초함해서 하이픈(-)으로 연결된 단어도 선택한다.
특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 시용한다.
특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자
[속성 ^= 값]이 지정한 속성값으로 시작하는 요소를 선택했다면, [속성 $= 값] 선택자는 지정한 속성값으로 끝나는 요소를 선택한다.
일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자
[속성 *= 값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택한다.
[속성]
해당 속성이 있는 요소
[속성 = 값]
지정한 속성값이 있는 요소
[속성 ~= 값]
지정한 속성값이 포함이 된 요소(단어별)
[속성
= 값]
[속성 ^= 값]
지정한 속성값으로 시작하는 요소
[속성 $= 값]
지정한 속성값으로 끝나는 요소
[속성 *= 값]
지정한 속성값의 일부가 일치하는 요소
10-3 가상 클래스와 가상 요소
사용자 동작에 반응하는 가상 클래스
사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다. 다음은 자주 사용하는 가상 클래스 선택자다.
방문하지 않은 링크에 스타일을 적용하는
:link가상 클래스 선택자 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다. 이때 링크의 밑줄을 없애거나 색상을 바꾸려면:link선택자를 사용한다.방문한 링크에 스타일을 적용하는
:visited가상 클래스 선택자 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다. 한 번 이상 방문한 텍스트 링크는 보라색이 기본값이다. 이때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면:visited선택자를 사용해 조절한다.특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는
:hover가상 클래스 선택자:hover선택자는 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다. 즉, 이 가상 클래스 선택자를 응용하면 메인메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있다.웹 요소를 활성화했을 때 스타일을 적용하는
:active가상 클래스 선택자:active선택자는 웹 요소의 링크나 이미지 등을 활성화했을 때 스타일을 지정한다. 예를 들어 어떤 웹 요소의 링크를 클릭하는 순간의 스타일을 지정할 수 있다.웹 요소에 초첩이 맞추어졌을 때 스타일을 적용하는
:focus가상 클래스 선택자:active선택자는 웹 요소에 초점이 맞추어졌을 때 스타일을 적용한다.
위의 가상 클래스 선택자는 메뉴 링크에서 자주 사용하는데, 이때 다음과 같은 순서로 정의해야 한다. 이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않는다.
(1) :link (2) :visited (3) :hover (4) :active
요소 상태에 따른 가상 클래스
요소의 상태에 따라 스타일을 적용할 수 있는데, 이때 가상클래스 선택자를 사용한다.
앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
:target 가상 클래스 선택자'문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때에는 앵커anchor를 사용한다. 이때 :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다.
요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
:enabled와 :disabled 가상 클래스 선택자'해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 반대로 사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 사용한다.
선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자
:checked 가상 클래스 선택자폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가된다. 이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 checked 선택자를 사용하면 편리하다.
특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'
:not 가상 클래스 선택자':not 선택자는 이름에서도 알 수 있듯, 부정의 의미가 있다. 여기서 not은 '괄호 안에 있는 요소를 제외한'이라는 뜻이다.
구조 가상 클래스
구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자이다.
특정 위치의 자식 요소 선택하기
웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class나 id 선택자를 사용한다. 하지만 요소가 여러 개 나열되어 있는 경우는 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있다.
:only-child
부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
A:only-type-of
부모 안에 A 요소가 하나뿐일 때 선택한다.
:first-child
부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
:last-child
부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
A:first-of-type
부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택한다.
A:last-of-type
부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
:nth-child(n)
부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
:nth-last-child(n)
부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
A:nth-of-type(n)
부모 안에 있는 A 요소 중에서 n번째 요소를 선택한다.
A:nth-last-of-type(n)
부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택한다.
수식을 사용해 위치 지정하기
위치를 지정할 때 :nth-child(n) 선택자처럼 위치를 정확히 알려 줄 수도 있지만, 반복된 규칠을 찾아내서 an + b처럼 수식을 사용할 수도 있다. 이때 n값은 0부터 시작한다. 또한 홀수는 odd, 짝수는 even 키워드를 사용할 수 있다.
가상 요소
가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다. 가상 요소를 만들어 사용하는 이유는, 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위한 것이다. 가상 요소는 가상 클래스와 구분하기 위햐여 가상 요소 이름 앞에 콜론 2개(::)를 붙여 표시한다.
첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 'first-line요소, first-letter요소'
first-line요소, first-letter요소'::first-line 요소와 first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있다. ::first-letter요소는 해당 요소의 첫 줄의 첫 글자를 가리킨다. 만약 <p> 태그 안에 <br>태그가 있어 첫 글자가 첫 줄에 없을 경우에는 적용할 수 없다.
내용 앞뒤에 콘텐츠를 추가하는 '::before요소, ::after요소'
::before요소, ::after요소'::before 요소 ::after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다. 이 요소를 이용하면 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있다.
Last updated