의사 클래스란?
'의사 클래스(pseudo-class)'의 'pseudo' 즉 의사(擬似)는 한자로 '비길 의'에 '닮을 사'로, 유사한 비슷한 이란 의미를 담고있다. 영어 'pseudo-'는 접두사로 허위의, 거짓의, 가짜의, 유사의 라는 의미로 사용된다.
'의사 클래스'는 다른 말로 '가상 클래스'로도 불리는데, 일반적으로 '의사 클래스'라는 용어가 더 정확하고 많이 사용된다.
1. 의사 클래스
의사 클래스 (pseudo-class) 는 HTML 요소의 특정 상태에 스타일을 적용할 수 있도록 도와주는 CSS 문법이다.
예를들어, a:hover {} 를 사용하면, a 태그 위에 마우스가 올라갔을 때 { } 괄호 안의 css 속성이 a태그에 적용되도록 한다.
선택자 혹은 클래스(class)나 아이디(id) 뒤에 붙여 사용된다.
/* 기본형 */
선택자:의사클래스이름{속성:속성값;}동적 의사 클래스
dynamic pseudo-classes
| 의사 클래스 | 설명 |
| :link | 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태 |
| :visited | 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태 |
| :hover | 마우스가 요소 위에 있을 때 |
| :active | 요소가 활성 상태일 때 (보통 클릭하는 순간) |
| :focus | 요소에 포커스가 갔을 때 (입력창 등) |
| :target | 현재 활성화된 target 요소 |
| :in-range | 특정 범위 내의 값을 가지는 input 요소 |
| :out-of-range | 특정 범위를 벗어나는 값을 가지는 input 요소 |
상태 의사 클래스
UI element states pseudo-classes
| 의사 클래스 | 설명 |
| :checked | 체크된(checked) 상태의 input 요소 |
| :enabled | 사용할 수 있는 input 요소 |
| :disabled | 사용할 수 없는 input 요소 |
| :read-write | readonly 속성을 가지지 않는 input 요소 |
| :required |
required 속성을 가지는 input 요소 |
| :optional |
required 속성을 가지지 않는 input 요소 |
| :valid |
유효한 값을 가지는 input 요소 |
| :invalid |
유효하지 않은 값을 가지는 input 요소 |
구조 의사 클래스
structural pseudo-classes
| 의사 클래스 | 설명 |
| :first-child | 부모 요소의 첫 번째 자식 요소일 때 |
| :last-child | 부모 요소의 마지막 자식 요소일 때 |
| :nth-child | n번째 자식 요소일 때 |
| :nth-last-child | 뒤에서 n번째 자식 요소일 때 |
| :first-of-type | 자식요소 중에서 첫 번째로 등장하는 특정 요소 |
| :last-of-type | 자식요소 중에서 마지막으로 등장하는 특정 요소 |
| :nth-of-type | 자식요소 중에서 n번째로 등장하는 특정 요소 |
| :nth-last-of-type |
자식요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소 |
| :only-child | 자식요소를 단 하나만 가지는 모든 요소의 자식 요소 |
| :only-of-type | 자식요소를 특정 요소 단 하나만 가지는 모든 요소의 자식요소 |
| :empty |
아무런 자식요소도 가지지 않는 요소 |
기타 의사 클래스
| 의사 클래스 | 설명 |
| :root | 문서의 root 요소 |
| :not (선택자) | 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 제외한 요소를 선택 |
| :lang (언어) | 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용 |
*참고 : TCPschool.com - 의사 클래스
2. 의사 요소
의사 요소 (Pseudo-element) 는 HTML 요소 내부의 특정 부분에 스타일을 적용하는 문법이다.
클래스처럼 동작하지만 실제로는 요소 안의 특정 위치나 가상의 부분을 선택한다.
| 자주 쓰이는 의사 요소 | 설명 |
| ::before | 요소의 내용 앞에 콘텐츠 삽입 |
| ::after | 요소의 내용 뒤에 콘텐츠 삽입 |
| ::first-letter | 요소의 첫 글자에 스타일 적용 |
| ::first-line | 요소의 첫 줄에 스타일 적용 |
* 참고 : TCPschool.com - 의사 요소
:root
css로 디자인할 때, 웹페이지의 통일성을 위해서 동일한 크기나 컬러를 사용해야할 경우가 많다.
이후 해당 색상을 수정할 때, 요소의 수가 많다면 수정하는데 시간이 오래 걸릴 뿐만 아니라 적확성도 보장할 수 없다.
이럴 때 :root 가상 클래스를 사용하면 유지보수를 손쉽게 할 수 있다.
CSS의 :root 의사 클래스는 문서트리의 루트 요소를 선택한다.
HTML의 루트 요소는 <html> 이므로, :root 의 명시도가 더 높다는 점을 제외하면 html 선택자와 같다.
명시도란?
명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 같은 요소가 여러 선엔의 대상이 되는 경우에 적용된다.
유형 선택자(h1, div) 및 의사요소(:before) 선택자가 명시도가 가장 낮고,
클래스 선택자(.), 속성 선택자([type=""], 의사 클래스(:hover)가 그다음으로 높으며,
아이디 선택자(#)가 가장 높다.
전역 선택자(*) 및 조합자(+ > ~...) 및 부정 의사 클래스(:not)은 명시도에 영향을 주지 않으며,
높은 명시도를 가진 속성이 브라우저에서 적용된다.
* 참고 : mdn - 명시도
1. 기본형
:root 의사클래스를 사용하는 방법은 뒤의 중괄호에 이름과 속성값을 작성하면 된다.
속성명은 하이픈 2개 ( -- ) 다음 원하는 이름을 붙이면 되고, 속성값은 사용하고 싶은 값을 작성하면 된다.
이후 만들어진 속성 명은 var 변수로 가져와 사용할 수 있다.
/* 속성 추가 */
:root{
--속성이름 : 속성값;
}
/* 속성 사용 */
선택자{
속성명 : var(--속성이름);
}
/* 예시 */
:root{
--color-pink : #ebb2b2;
}
div{
background-color : var(--color-pink);
}
2. 속성 이름 작성 시 꿀팁(개인적인..)
보통 속성이름은 사용되는 사용처를 많이 적는다.
border 색상일 경우 --color_border 이런 식으로 말이다.
하지만, 직접 속성을 적용해보면 알겠지만 이름을 일일히 쳐야하는게 또 매우 귀찮다.
또한, 만약 true / false 버튼 색상을 만들어서 --color_btn_true 이런식으로 되어있다면 root 안의 속성이 많아질수록 찾기가 어려워 진다.
이때 하이픈 ( - ) 기호와 언더바 ( _ ) 를 잘 사용하면 조금 편한 것 같다.
단어를 더블 클릭하면 언더바로 연결된 단어는 모두 선택이 되지만 하이픈으로 선택된 단어는 개별 선택이 된다.
이런 특징을 살려, 위의 true / false 버튼을 예로 사용해 보자면, --btn_color-true 와 같은 형식으로 작성하는 것이다.
그렇다면 자동완성 기능에서 --btn_color-false가 첫번째에 뜨더라도 이 코드를 먼저 입력한 뒤 false를 더블클릭하여 이 부분만 true로 손쉽게 변경하여 사용할 수 있다.
맨 처음 네이버를 보며, 나도 똑같이 color를 앞에 붙여 사용했으나,,,
color인거 다 아는데 color 입력해야하고.. 뒤에 in 이나 out 만 바꾸고 싶은데 매번 다 드래그해서 바꿔야하고ㅠ
*참고 사이트:
https://www.jaenung.net/tree/18136
CSS 변수 vs 전처리기 변수: 스타일 관리의 미래를 결정하는 대결! 🚀
목차 CSS 변수와 전처리기 변수: 기본 개념 이해하기 CSS 변수(커스텀 프로퍼티)의 특징과 장점 전처리기 변수(Sass, Less, Stylus)의 매력 실전 코드 비교: 같은 디자인, 다른 접근법 성능과 브라우저
www.jaenung.net
'html, 스타일시트(css, scss)' 카테고리의 다른 글
| [css] 글자 밑줄 긋고 밑줄에 스타일 넣기 / text-decoration (0) | 2025.04.03 |
|---|---|
| [ css ] Style Queries / 스타일 쿼리 효율적으로 사용하기 (1) | 2025.02.19 |
| [html] ARIA(Accessible Rich Internet Applications)란? (1) | 2025.02.17 |
| [html] Amazon searchbox 속성 (0) | 2025.02.17 |
| [HTML/CSS/JavaScript] <table>, <template> 태그로 표 생성하고 꾸미기 (1) | 2025.01.22 |
