css 선택자 활용

2021.08.19 - [웹,앱 제작/html, css] - css 선택자 기본

 

지난 포스팅 css 선택자 기본에 이어서 css 선택자 활용에 대해 정리해보겠습니다. 선택자의 종류가 많아서 당장에는 귀찮고 복잡할 수 있지만, 추후에 자바스크립트 명령에서도 css 선택자 로서 선택할 수 있기 때문에 장기적으로 볼 때 알아두는 것이 좋습니다.

 

 

 

 

-동위, 동위 인접 선택자

동위라는 말은 같은 계층에 있다는 뜻으로, 영어로는 sibling 이라고 합니다. 같은 부모 아래에 있는 형제라고 할 수 있습니다.

 

• 동위(sibling) 선택자

div ~ p 라고 선택하면, div태그의 뒤에 있는 모든 p 태그를 선택할 수 있습니다.

헷갈릴 수 있지만 자식이나 자손 선택자와는 다릅니다. html문서 상으로 뒤(아래)에 위치한 동등한 요소만을 선택합니다.

<p>div 태그보다 앞에 있으므로 선택되지 않습니다.</p>

<div>
	<p>div 태그의 동등하지 않은 자식이므로 선택되지 않습니다.</p>
</div>

<p>div 태그와 동등한 계층에 있으면서, div 태그 뒤에 작성되어 선택됩니다!</p>
<p>div 태그와 동등한 계층에 있으면서, div 태그 뒤에 작성되어 선택됩니다!</p>

 

 

• 인접 동위(sibling) 선택자

div + p 라고 선택하면, 해당 요소의 바로 뒤에 있는 요소를 선택합니다. 위의 동위 선택자에서 div 뒤에 쓰인 모든 p를 선택하였다면, 이번에는 div 뒤에 있는 첫번째 p만 선택됩니다. 이를 응용하면 div 태그 마다 바로 뒤에 있는 p 들을 반복해서 선택할 수도 있습니다.

 

 

 

-동적 의사클래스 

 

• :hover 선택자

:hover 선택자는 메뉴나 버튼에 마우스를 올렸을 때의 상태를 선택할 수 있습니다.

nav ul li a:hover{background: #000;}

이렇게 a에 마우스를 올렸을 때 스타일을 줄 수 있습니다.

 

 

• :focus 선택자

:focus 선택자는 요소를 보고 있을 때를 선택합니다.

아이디나 비밀번호를 입력하는 input 요소 등을 클릭했을 때 포커스를 가지고 있는 상태라고 할 수 있습니다.

 

 

이 밖에도 :link(링크를 클릭하지 않은 상태), :visited(링크를 클릭한 상태), :active(링크를 클릭하고 있는 상태) 등 의 동적 의사 클래스가 있습니다. 이러한 동적 의사 클래스를 잘 활용하면 사용자와 상호작용을 하고 좀 더 인터렉티브한 작업물을 만들 수 있습니다.

 

 

 

-상태 의사클래스

input 요소에 사용하는 의사클래스로, input 요소의 상태에 따라 요소를 선택할 수 있습니다.

 

• :checked

체크박스의 체크된 상태를 선택합니다. 

 

 

• :enabled

사용할 수 있는 상태를 선택합니다.

 

 

• :disabled

사용할 수 없는 상태를 선택합니다.

 

 

 

-구조 의사클래스 :nth-child()

리스트나 div의 몇번째 자식을 특정할 때 유용하게 사용할 수 있습니다. 몇 개만 특정 스타일을 줘야할 때 사용하거나,

리스트의 스타일이 몇 개만 빼고 스타일이 동일할 때, 다른 스타일을 줄 요소를 선택하는게 효율적이기 때문입니다.

nav ul li:nth-child(1){스타일 줄 내용;}

:first-child나 :last-child로 쓸 수도 있습니다.

 

 

 

-기타 의사클래스 :not

특정 요소만 제외하고 모두 선택할 때 사용할 수 있습니다. :nth-child와 같다고 생각할 수 있지만, 차이점은

:nth-child는 제외할 요소를 하나씩 선택하는 것이고, :not은 처음부터 제외할 요소를 뺀 나머지를 선택합니다.

nav ul li:not(:nth-child(1)){스타일 줄 내용;}

 

 

 

-의사요소 ::before ::after

html 태그를 더 만들지 않고 어떤 요소를 추가하거나, :hover했을 때 등 상태에 따라 나타났다가 사라져야 하는 경우 사용합니다.

 

:before를 선언하면 div의 앞(html문서 상 위)에 :before가 생성되며 태그 처럼 스타일을 줄 수 있습니다.

:after를 선언하면 div의 뒤(html문서 상 아래)에 :after가 생성되며 태그 처럼 스타일을 줄 수 있습니다.

 

주의할 점은 둘 다 스타일 명령을 줄 때 {content: '';}을 필수적으로 써줘야 한다는 것 입니다. 따옴표 안에 특정 글자를 써서 활용하는 방법도 있지만 일단 기본적으로는 빈값이 있다고 선언을 해줘야 스타일을 줄 수 있습니다. 

 

이 밖에도 의사요소가 더 있지만 거의 쓰지 않아 소개하지 않겠습니다.

 

 

 

-속성 선택자

클래스나 아이디 등을 선택하지 않아도, 태그의 속성 만으로도 요소를 선택할 수 있습니다.

따라서 html 문서의 태그에 해당 속성을 기입해 줘야 한다는 특징이 있습니다.

 

• [속성]을 가진 요소를 선택

a의 href를 선택하려면 [href] 라고 선택할 수 있습니다.

 

• [속성 = 값]이 일치하는 요소를 선택

a의 target 속성이 blank인 것은 선택하려면 [target="_blank"] 라고 선택합니다.

 

 

• [속성 ~=값] 여러 값들 중에서 특정한 값이 포함된 요소를 선택

<div class="myclass red"></div> 만약 이런 요소가 있다면,

myclass라는 클래스를 가진 div중에서 red이기도 한 클래스만 스타일을 줘야 할 경우가 있습니다.

이 때 [class ~="red"] 라고 선택할 수 있습니다. 

 

 

이 밖에도 속성에 특정한 값을 포함한 요소를 다양하게 선택할 수 있습니다.

 

• [속성 |= 값] 특정 값이 포함되어 있는 요소를 선택합니다.
• [속성 ^= 값] 특정 값으로 시작되는 요소를 선택합니다.
• [속성 $=값] 특정 값으로 끝나는 요소를 선택합니다. href에 파일을 링크할 경우 특정 확장자로 활용할 수 있습니다.
• [속성 *= 값] 특정 값이 속성 값의 일부 포함되어 있는 요소를 선택합니다. 

 

 

 

css 선택자 활용까지 알아보았습니다. 선택자는 작업중인 작업물의 상황에 따라, 영리하게 사용하기 위해 존재합니다.

 

어려운 선택자를 쓴다고 좋은 것이 아니고 기본적인 클래스 아이디로도 선택이 가능하다면 그것으로도 충분합니다. 다만 더 복잡하게 선택해야만 하는 상황에서 가능한 간결하게 선택할 수 있게 도와줄 뿐 입니다. 수고하셨습니다.