CSS 가상 클래스와 가상 요소란?
CSS 가상 클래스와 가상 요소는 웹 페이지의 스타일링을 더 다양하고 동적으로 만들 수 있는 기능입니다. 마우스 호버, 클릭 등의 상태에 반응하거나, 특정 부분에 스타일을 적용하는 데 사용됩니다.
CSS 가상 클래스와 가상 요소의 속성
가상 클래스 (Pseudo-classes)
가상 클래스는 요소의 특정 상태나 위치를 선택하여 스타일을 적용하는 데 사용됩니다.
- :hover: 마우스가 요소 위로 이동했을 때 스타일을 적용합니다.
- :active: 마우스 클릭하고 있는 동안의 상태를 나타냅니다.
- :focus: 요소가 포커스를 받았을 때의 상태를 나타냅니다.
- :first-child: 부모 요소의 첫 번째 자식을 선택합니다.
- :last-child: 부모 요소의 마지막 자식을 선택합니다.
- :nth-child(n): n번째 자식을 선택합니다.
- :nth-last-child(n): 뒤에서부터 n번째 자식을 선택합니다.
- :nth-of-type(n): 특정 유형의 요소 중에서 n번째 요소를 선택합니다.
- :nth-last-of-type(n): 뒤에서부터 특정 유형의 요소 중에서 n번째 요소를 선택합니다.
- :only-child: 부모 요소의 유일한 자식을 선택합니다.
- :only-of-type: 부모 요소 내에서 유일한 특정 유형의 요소를 선택합니다.
가상 요소 (Pseudo-elements)
가상 요소는 요소의 특정 부분에 스타일을 적용하는 데 사용됩니다.
- ::before: 선택한 요소의 내부 앞에 콘텐츠를 생성합니다.
- ::after: 선택한 요소의 내부 뒤에 콘텐츠를 생성합니다.
- ::first-line: 선택한 요소의 첫 번째 줄에 스타일을 적용합니다.
- ::first-letter: 선택한 요소의 첫 번째 글자에 스타일을 적용합니다.
CSS 가상 클래스와 가상 요소의 예제
가상 클래스와 가상 요소의 예제입니다.
:hover
마우스가 요소 위로 이동했을 때 스타일을 적용합니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
.box {
width: 200px;
height: 100px;
background-color: purple;
color: white;
text-align: center;
line-height: 100px;
}
/* :hover 상태에서의 스타일 변경 */
.box:hover {
background-color: red;
}
</style>
<title>:hover 예제</title>
</head>
<body>
<div class="box">
Hover
</div>
</body>
</html>
Hover
마우스를 박스 위에 올리면 스타일이 변경됩니다.
:active
마우스 클릭하고 있는 동안의 상태를 나타냅니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
.click-button {
padding: 10px 20px;
font-size: 16px;
background-color: purple;
color: white;
border: none;
cursor: pointer;
}
/* :active 상태에서의 스타일 변경 */
.click-button:active {
background-color: red;
}
</style>
<title>:active 예제</title>
</head>
<body>
<button class="click-button">클릭해보세요!</button>
</body>
</html>마우스를 클릭하고 있는 동안 스타일이 변경됩니다
:focus
요소가 포커스를 받았을 때의 상태를 나타냅니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
.focus-input {
padding: 10px;
font-size: 16px;
border: 2px solid black;
}
/* :focus 상태에서의 스타일 변경 */
.focus-input:focus {
background-color: violet;
}
</style>
<title>:focus 예제</title>
</head>
<body>
<label for="username">사용자 이름:</label>
<input type="text" id="username" class="focus-input" placeholder="사용자 이름을 입력하세요">
</body>
</html>
input 요소가 포커스를 받았을 때 스타일이 변경됩니다.
::before 와 ::after
::before 는 선택한 요소의 내부 앞에 콘텐츠를 생성합니다.
::after 는 선택한 요소의 내부 뒤에 콘텐츠를 생성합니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
.card {
position: relative;
width: 300px;
height: 200px;
background-color: #f2f2f2;
border-radius: 10px;
padding: 20px;
margin: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
/* ::before로 생성 */
.card::before {
content: "\2019"; /* 생성할 콘텐츠 설정 - 유니코드로 표현 */
font-size: 3em;
color: purple;
position: absolute;
top: 10px;
left: 10px;
}
/* ::after로 생성 */
.card::after {
content: "INFO"; /* 생성할 콘텐츠 설정 */
font-size: 1.5em;
color: purple;
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
<title>::before, ::after 예제</title>
</head>
<body>
<div class="card">
이 카드는 ::before와 ::after를 사용하여 시작 부분에 작은 아이콘,
끝 부분에 INFO 텍스트를 만드는 예제입니다.
</div>
</body>
</html>
이 카드는 ::before와 ::after를 사용하여 시작 부분에 작은 아이콘,
끝 부분에 INFO 텍스트를 만드는 예제입니다.
::before 와 ::after 를 사용하여 요소의 앞과 뒤에 콘텐츠를 생성했습니다.
결론
가상 클래스와 가상 요소는 웹 디자인에서 상호작용과 스타일링을 풍부하게 만드는 핵심 기능입니다. 마우스의 상태나 특정 위치에 따라 스타일을 적용하거나, 특정 부분에 콘텐츠를 추가하는 데에 사용됩니다.