7주차 - CSS 고급 선택자
CSS 고급 선택자
앞서 배운 기본 선택자를 통해 스타일을 적용할 수 있지만, 소스가 길어질 경우 스타일을 지정할 때마다 id와 class가 계속 늘어나게 된다. 그렇기에 연결 선택자와 속성 선택자를 사용하여 소스의 위치나 속성값에 따라 특정 요소를 쉽게 선택하는 방법에 대해 알아보자.
10-1 연결 선택자 10-2 속성 선택자 10-3 가상 클래스와 가상 요소
10-1 연결 선택자
연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. (조합 선택자, 콤비네이션 선택자, 콤비네이션 셀렉터라고도 불린다.)
하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자
하위 선택자
개념 : 하위선택자descendant selector를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 합니다.
기본형 : 상위 요소 하위 요소
이것을 사용하는 이유는 다른 class나 id 요소를 추가하지 않고, 그리고 하위 항목이 여러개 있을 때 특정 요소만 설정을 변경하고 싶을 때 사용하는 것 같다. 하위 요소를 명시해준다는 것의 의미는 나머지는 설정값을 부여하지 않겠다는 말과 같다.
자식 선택자
개념: 자식 선택자child selector는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 다음과 같이 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분합니다.
기본형: 부모 요소 > 자식 요소
자식 선택자와 하위 선택자의 차이 하위 선택자: 자식 요소뿐만 아니라 자식의 자식, 즉 손자 요소까지 적용된다. 자식 선태자: 바로 한 단계 아래의 요소, 즉 자식 요소에만 스타일이 적용된다.
형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자
웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.
인접 형제 선택자
개념 : 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자adjacent selector하고 한다.
기본형: 요소1 + 요소2
형제 선택자
개념: 형제 선택자sibling selector는 형제 요소의 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용됩니다.
기본형: 요소1 ~ 요소2
10-2 속성 선택자
태그 안에서 사용하는 속성값에 따라 요소를 선택하는 역할을 합니다. 속성값의 조건에 따라 특정 부분만 선택하기 쉬우므로 상황에 맞게 스타일을 지정할 수 있다.
특정 속성이 있는 요소를 선택하는 [속성] 선택자
개념 : HTML 태그 작성 시 여러 가지 속성을 사용할 수 있는데, 이 때 속성값에 따라 원하는 요소를 선택할 수 있다. 예시
<html>
<head>
<link type="text/css" href="my_style.css">
</head>
<body>
<font color="red" face="Dotum">Hello</font>
<font color="yellow">World</font>
</body>
</html>이와 같이 <태그 속성='값'>으로 이루어진 형택를 의미
[속성] 선택자를 사용하는 방법은 대괄호([]) 사이에 원하는 속성을 입력하면 됩니다.
특정 속성값이 있는 요소를 선택하는 [속성=속성값] 선택자
개념: [속성=속성값] 선택자는 주어진 속성과 속성값이 일치하는 ㅇ소를 찾아 스타일을 지정할 때 사용합니다.
여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자
개념: [속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택합니다. 이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리합니다.
특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자
개념: [속성 |= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용합니다. [속성 ~= 값]과 비슷해 보이지만, [속성 ~= 값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않는다는 점에서 [속성 |= 값] 선택자와 차이가 있습니다.
특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
개념: 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 사용합니다.
특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자
개념: [속성 ^= 값]이 지정한 속성값으로 시작하는 요소를 선택했다면, [속성 $= 값] 선택자는 지정한 속성값으로 끝나는 요소를 선택합니다.
일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자
개념: [속성 *= 값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택합니다.
앞서 배운 내용을 표로 정리해보자
[속성]
해당 속성이 있는 요소
[required]
[속성 = 값]
지정한 속성값이 있는 요소
[target = _blank]
[속성 ~= 값]
지정한 속성값이 포함된 요소(단어별)
[class ~= button]
[속성
= 값]
지정한 속성값이 포함된 요소(하이픈 포함, 단어별)
[속성 ^= 값]
지정한 속성값으로 시작하는 요소
[title ^= eng]
[속성 $= 값]
지정한 속성값으로 끝나는 요소
[href $= xls]
[속성 *= 값]
지정한 속성값의 일부가 일치하는 요소
[href *= w3]
10-3 가상 클래스와 가상 요소
메뉴의 몇 번째 항목을 지정하거나, 단락의 첫 번째 글자만 지정하는 것 과같이 이렇게 스타일을 지정하는 것에는 앞서 배운 내용은 어려운 부분이 있다. 이를 해결하는 방법에 대해 알아보자.
사용자 동작에 반응하는 가상 클래스
사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작읋 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용해보자.
1. 방문하지 않은 링크에 스타일을 적용하는 :link 가상 클래스 선택자
:link 가상 클래스 선택자텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시됩니다. 이때 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자를 사용합니다.
2. 방문한 링크에 스타일을 적용하는 :visited 가상 클래스 선택자
:visited 가상 클래스 선택자한 번 이상 방문한 텍스트 링크는 보라색이 기본값입니다. 이떄 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조절합니다.
3. 특정 요소에 마우스 포인터를 올려 놓으면 스타일을 적용하는 :hover 가상 클래스 선택자
:hover 가상 클래스 선택자:hover 선택자는 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용합니다. 즉, 이 가상 클래스 선택자를 응용하면 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려 놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있습니다.
4. 웹 요소를 활성화했을 때 스타일을 적용하는 :active 가상 클래스 선택자
:active 가상 클래스 선택자클릭했을 때 스타일을 지정합니다.
5. 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 focus 가상 클래스 선택자
focus 가상 클래스 선택자웹 요소에 초점이 맞추어졌을 때 스타일을 적용합니다.
위의 가상 클래스 선택자의 경우 적용되는 순서가 중요한데 이 순서와 다를 경우 제대로 스타일이 적용되지 않는다.
:link, 2. :visited, 3. :hover, 4. active
요소 상태에 따른 가상 클래스
웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 수 있는데, 이때 가상 클래스 선택자를 사용합니다.
앵커 대상에 스타일을 적요앟는 ':target 가상 클래스 선택자'
문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때에는 앵커anchor를 이용합니다. 이때 :target 선택자를 사용하여 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 적용할 수 있다.
요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
:enabled 선택자 : 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하기 위한 선택자
:disabled 선택자 : 해당 요소가 사용할 수 없는 상태일 때 스타일을 지정하기 위한 선택자
선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가됩니다. 이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리합니다.
특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'
:not 선택자는 이름에서도 알 수 있듯이 부정의 의미가 있스빈다. 여기서 not은 '괄호 안에 있는 요소를 제외한'이라는 의미입니다.
구조 가상 클래스
구조 가상 크랠스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자입니다.
특정 위치의 자식 요소 선택하기
웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class나 id 선택자를 사용합니다. 하지만 요소가 여러 개 나열되어 있는 경우에는 class나 id를 사용하지 않고도 스타일을 지정핳ㄹ 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있습니다.
표 10-2 구조 가상 클래스의 선택자
:only-child
부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택합니다.
A:inly-type-of
부모 안에 A 요소가 하나뿐일 때 선택합니다.
:first-child
부모 안에 이쓴ㄴ 모든 요소 중에서 첫 번째 자식 요소를 선택합니다
:last-child
부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택합니다.
A:first-of-type
부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택합니다.
A:last-of-type
부모 안에 있는 A 요소 중에서 마지막 요소를 선택합니다.
:nth-child(n)
부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택합니다.
:nyh-last-child(n)
부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택합니다.
A:nth-of-type(n)
부모 안에 있는 A 요소 중에서 n번째 요소를 선택합니다.
A:nth-last-of-type(n)
부모 안에 잇는 A 요소 중에서 끝에서 n번째 요소를 선택합니다.
수식을 사용해 위치 지정하기
반복된 규칙이 있다면 이를 적용할 수 있습니다.
/* div 요소에서 세 번째 자식인 p 요소에 스타일 적용 */
div p:nth-child(3)
/* div 요소에서 홀수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
div p:nth-child(odd), div p:nth-child(2n+1)
/* div 요소에서 짝수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
div p:nth-child(even), div p:nth-child(2n)
가상 요소
가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택하는 것이라면 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가합니다.
가상 요소를 만들어 사용하는 이유 : 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위한 것, 가상 클래스와 구별하기 위해 가상 요소 이름 앞에 콜론 2개(::)를 붙여서 표시합니다.
첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소, ::first-letter 요소'
::first-line 요소와 ::first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있습니다.
내용 앞뒤에 컨텐츠를 추가하는 '::before 요소, ::after 요소'
::before 요소와 ::after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있습니다. 이 요소를 사용하면 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있습니다.
Last updated