[TIL] CSS: 상태와 구조를 제어하는 가상 클래스 및 가상 요소

• Pseudo-classes - 사용자의 동작이나 요소의 구조 및 상태에 따라 스타일을 부여하는 가상 클래스 선택자
• Pseudo-elements - HTML 문서에 존재하지 않는 가상의 요소를 생성하거나 특정 부분만 스타일링하는 기법
• CSS Functions - 수학적 계산이나 변형 및 색상 등 스타일 값을 동적으로 계산하고 변환하는 함수

---

 

Pseudo-classes

사용자의 동작이나 요소의 특정 상태에 따라 스타일을 부여하는 CSS 가상 클래스

가상 클래스는 HTML문서 구조상에는 존재하지 않지만, 마우스를 올렸을 때, 방문한 적이 있을 때, 첫 번째 자식일 때 와 같은 특별한 상태를 선택할 수 있게 해주는 도구 

---

 

사용자의 동작에 반응하는 가상 클래스 (User Action)

사용자의 상호작용에 따라 실시간으로 스타일이 변하게 만드는 선택자이다.

동적 상태 제어

:hover - 요소 위에 마우스 커서를 올렸을 때 적용된다.

:active - 요소를 마우스로 클릭하고 있는 순간에 적용된다.

:focus - 탭 키로 이동하거나 클릭하여 요소에 커서가 활성화되었을 때 적용된다.

 

CSS

.btn { background-color: gray; transition: 0.3s; }
.btn:hover { background-color: blue; }    /* 마우스 올리면 파란색 */
.btn:active { background-color: darkblue; } /* 클릭 시 진한 파란색 */

input:focus { border: 2px solid orange; } /* 입력창 클릭 시 주황색 테두리 */

 

---

 

요소의 구조를 이용하는 가상 클래스 (Structural)

요소가 부모 안에서 몇 번째에 위치하는지에 따라 스타일을 지정한다.

구조적 위치 제어

:first-child - 부모의 첫 번째 자식인 요소를 선택한다.

:last-child - 부모의 마지막 자식인 요소를 선택한다.

:nth-child(n) - 부모의 n번째 자식인 요소를 선택하며 짝수나 홀수 지정이 가능하다.

 

CSS

/* 리스트의 첫 번째 항목만 글자 크기 키우기 */
li:first-child { font-size: 20px; }

/* 리스트의 짝수 번째 항목만 배경색 입히기 */
li:nth-child(2n) { background-color: #f9f9f9; }

 

---

 

링크 및 상태 관련 가상 클래스

하이퍼링크나 폼 요소의 특정 상태를 제어한다.

링크 및 폼 상태 제어

:link - 방문한 적이 없는 링크를 선택한다.

:visited - 이미 방문한 적이 있는 링크를 선택한다.

:enabled - 활성화된 폼 요소를 선택한다.

:disabled - 비활성화된 폼 요소를 선택한다.

:checked - 체크박스나 라디오 버튼이 선택된 상태일 때 적용된다.

 

---

 

 

[표] 주요 가상 클래스 요약표

종류	가상 클래스	의미
동적	:hover, :active, :focus	사용자의 움직임에 반응
구조	:first-child, :last-child, :nth-child	부모 내 순서에 따라 선택
상태	:checked, :disabled, :required	요소의 설정 상태에 따라 선택
부정	:not(선택자)	특정 조건이 아닌 요소만 선택

 

---

[예제 코드] 반응형 리스트와 폼 스타일링

CSS

 

/* 리스트 스타일링 */
ul li { padding: 10px; border-bottom: 1px solid #ddd; }
ul li:hover { background-color: #eef; cursor: pointer; }
ul li:first-child { border-top: 2px solid #333; }
ul li:nth-child(odd) { color: navy; }

/* 체크박스 선택 시 인접 레이블 강조 */
input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: green;
}

/* 비활성 입력창 스타일 */
input:disabled { background-color: #eee; cursor: not-allowed; }

 

학습 정리

가상 클래스는 콜론 하나( : )를 사용하여 작성한다.

:nth-child는 아주 강력한 선택자로 복잡한 표나 리스트 스타일링의 핵심이다.

:not() 선택자를 활용하면 마지막 요소만 제외하고 마진을 주는 등의 예외 케이스를 쉽게 처리할 수 있다.

 

---

Pseudo-elements

가상 클래스를 넘어, HTML 문서에 실제로 존재하지 않는 가상의 요소를 CSS로 직접 생성하여 스타일을 입히는 CSS가상 요소

가상 클래스가 '상태'를 선택한다면, 가상 요소는 '특정 부분'을 선택하거나 '새로운 조각'을 만들어 낸다.

---

가장 많이 쓰이는 가상 요소

선택한 요소의 내부 앞쪽이나 뒤쪽에 새로운 콘텐츠를 추가한다.

 

가상 콘텐츠 생성

::before - 요소의 내부 앞쪽에 콘텐츠를 추가한다.

::after - 요소의 내부 뒤쪽에 콘텐츠를 추가한다.

 

특징 및 용도

특징 - 반드시 content 속성이 있어야 화면에 나타난다.

용도 - 아이콘 추가나 장식선 및 단위 표시 등을 HTML 수정 없이 넣을 때 사용한다.

 

CSS

/* 링크 앞에 화살표 아이콘 넣기 */
a::before {
  content: "➔ ";
  color: blue;
}

/* 필수 입력 항목 뒤에 빨간 별표 넣기 */
.required::after {
  content: "*";
  color: red;
}

 

---

글자 및 영역 선택 가상 요소

콘텐츠의 특정 부분만 골라서 스타일을 적용한다.

텍스트 부분 제어

::first-line - 요소의 첫 번째 줄만 선택한다.

::first-letter - 요소의 첫 번째 글자만 선택하여 강조 효과를 준다.

::selection - 사용자가 마우스로 드래그하여 블록을 지정한 부분의 스타일을 바꾼다.

 

CSS

/* 문단의 첫 글자를 크게 만들고 빨간색으로 변경 */
p::first-letter {
  font-size: 3em;
  color: red;
  float: left;
  margin-right: 5px;
}

/* 드래그했을 때 배경색과 글자색 변경 */
::selection {
  background-color: black;
  color: yellow;
}

 

---

입력 힌트 스타일링

input 태그의 placeholder 속성 텍스트에만 스타일을 적용한다.

입력창 힌트 제어

::placeholder - 입력창의 속성 텍스트에만 스타일을 적용한다.

 

CSS

input::placeholder {
  color: lightgray;
  font-style: italic;
  text-align: right;
}

 

---

 

 

[표] 가상 클래스 vs 가상 요소 한눈에 비교

구분	가상 클래스 (Pseudo-class)	가상 요소 (Pseudo-element)
기호	콜론 1개 (:)	콜론 2개 (::)
의미	특정 상태를 선택	특정 부분을 선택하거나 생성
예시	:hover, :nth-child	::before, ::after, ::selection
특징	실제로 존재하는 요소의 상태 변경	존재하지 않는 요소를 만들거나 부분 수정

 

---

[예제 코드] 메뉴 구분선 및 호버 애니메이션 만들기

CSS

 

.menu-list { list-style: none; display: flex; }
.menu-list li { margin-right: 10px; position: relative; }

/* 마지막 항목을 제외한 모든 리스트 뒤에 가상 요소로 세로선 추가 */
.menu-list li:not(:last-child)::after {
  content: "|";
  margin-left: 10px;
  color: #ccc;
}

/* 호버 시 밑줄 애니메이션용 가상 요소 추가 */
.menu-list li:hover::before {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background-color: orange;
}

 

 

학습 정리

가상 요소는 최신 표준에 따라 콜론 2개 ( :: )를 사용하는 것이 정석이다. 

(하위 호환성을 위해 1개도 작동하긴 함)

::before와 ::after는 기본적으로 인라인 요소이므로 크기를 조절하려면 display 속성을 블록이나 인라인 블록으로 바꿔야 한다.

HTML 코드를 깨끗하게 유지하면서 디자인적인 요소를 넣고 싶을 때 사용한다.

---

CSS Functions

CSS 함수는 스타일 값(크기, 색상, 위치  등)을 동적으로 계산하거나 변환하는 역할을 한다.

CSS 함수를 사용하면 정적인 디자인을 넘어 수학적 계산이나 조건부 스타일링이 가능해진다.

---

수학적 계산 함수

요소의 크기나 간격을 계산할 때 사용하여 반응형 디자인을 돕는다.

수치 계산 제어

calc() - 서로 다른 단위(예: %와 px)를 섞어서 계산할 수 있게 해준다.

min() / max() - 여러 값 중 가장 작거나 큰 값을 선택한다.

clamp() - 최소값과 유동값 및 최대값을 설정하여 반응형 크기를 한 줄로 정의한다.

 

CSS

.container {
  /* 전체 너비에서 100px을 뺀 나머지 */
  width: calc(100% - 100px); 
  
  /* 폰트 크기를 최소 16px, 최대 32px 사이에서 유동적으로 조절 */
  font-size: clamp(16px, 5vw, 32px); 
}

 

---

변형 함수 (Transform)

요소를 물리적으로 변형시킬 때 사용한다.

형태 및 위치 제어

translate() - 요소를 가로(x)나 세로 방향(y)으로 이동시킨다.

rotate() - 요소를 지정한 각도만큼 회전시킨다.

scale() - 요소를 확대하거나 축소한다.

skew() - 요소를 기울여 왜곡시킨다.

 

CSS

.box:hover {
  /* 오른쪽으로 20px 이동하고 45도 회전하며 1.2배 확대 */
  transform: translate(20px, 0) rotate(45deg) scale(1.2);
}

---

색상 및 그래디언트 함수

색상을 정의하거나 부드러운 색 변화를 만든다.

색상 혼합 제어

rgb() / rgba() - 적녹청 색상과 투명도로 색을 만든다.

hsl() / hsla() - 색상과 채도 및 명도로 색을 조절하여 직관적인 변형이 가능하다.

linear-gradient() - 선형 그래디언트 배경을 만든다.

radial-gradient() - 원형 그래디언트 배경을 만든다.

 

CSS

.hero {
  /* 오른쪽 아래 방향으로 파란색에서 보라색으로 변하는 배경 */
  background: linear-gradient(to bottom right, blue, purple);
  color: rgba(255, 255, 255, 0.8); /* 80% 투명한 흰색 */
}

 

---

기타 유용한 함수들

외부 리소스를 참조하거나 정의된 값을 불러온다.

참조 제어

var() - 사용자가 정의한 CSS 변수(커스텀 속성) 값을 가져온다.

url() - 이미지나 폰트 등 외부 리소스 파일의 경로를 지정한다.

attr() - HTML 요소의 속성값을 가져와 스타일(주로 content)에 사용한다.

 

CSS

:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color);
  background-image: url('pattern.png');
}

---

[표] 주요 CSS 함수 요약표

카테고리	대표 함수	용도
수학	calc(), clamp()	유연한 수치 계산 및 반응형 크기 조절
변형	translate(), rotate()	요소의 물리적 위치 및 형태 변경
색상	rgba(), linear-gradient()	투명도 포함 색상 정의 및 그래디언트 효과
참조	var(), url(), attr()	외부 값 참조 및 변수 활용

 

---

[예제 코드] 수학 계산 및 변형 함수 활용

CSS

 

/* 전체 너비에서 100px을 뺀 나머지 너비 적용 */
.container {
  width: calc(100% - 100px); 
  font-size: clamp(16px, 5vw, 32px); 
}

/* 오른쪽으로 20px 이동하고 45도 회전하며 1.2배 확대 */
.box:hover {
  transform: translate(20px, 0) rotate(45deg) scale(1.2);
}

/* 색상 변수 및 배경 함수 활용 */
:root {
  --main-color: #3498db;
}
.button {
  background-color: var(--main-color);
  background-image: url('pattern.png');
}

 

 

학습 정리

calc() 내부에서 연산자(+, -) 앞뒤에는 반드시 공백이 있어야 브라우저가 올바르게 인식한다.

clamp()는 미디어 쿼리를 줄여주는 혁신적인 함수로 현대 웹 디자인에서 매우 선호된다.

CSS 함수는 속성의 '값' 자리에 위치하여 동적인 브라우저 환경에 대응하게 해준다.

---