css
CSS 가상 클래스와 가상 요소는 웹 페이지의 스타일링을 더 다양하고 동적으로 만들 수 있는 기능입니다. 마우스 호버, 클릭 등의 상태에 반응하거나, 특정 부분에 스타일을 적용하는 데 사용됩니다.
가상 클래스는 요소의 특정 상태나 위치를 선택하여 스타일을 적용하는 데 사용됩니다.
가상 요소는 요소의 특정 부분에 스타일을 적용하는 데 사용됩니다.
가상 클래스와 가상 요소의 예제입니다.
마우스가 요소 위로 이동했을 때 스타일을 적용합니다.
<!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>마우스를 박스 위에 올리면 스타일이 변경됩니다.
마우스 클릭하고 있는 동안의 상태를 나타냅니다.
<!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>마우스를 클릭하고 있는 동안 스타일이 변경됩니다
요소가 포커스를 받았을 때의 상태를 나타냅니다.
<!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 는 선택한 요소의 내부 뒤에 콘텐츠를 생성합니다.
<!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 를 사용하여 요소의 앞과 뒤에 콘텐츠를 생성했습니다.
가상 클래스와 가상 요소는 웹 디자인에서 상호작용과 스타일링을 풍부하게 만드는 핵심 기능입니다. 마우스의 상태나 특정 위치에 따라 스타일을 적용하거나, 특정 부분에 콘텐츠를 추가하는 데에 사용됩니다.
컴포넌트 스캔이란? 컴포넌트 스캔(Component Scan)은 스프링 프레임워크가 특정 패키지를 탐색하면서, 스캔 대상에 해당하는 클래스를 찾아…
스프링 빈이란? 스프링 빈(Spring Bean)은 스프링 IoC(Inversion of Control) 컨테이너가 관리하는 자바 객체를 의미합니다. 간단히…
스프링 컨테이너(Spring Container)란? 스프링 컨테이너는 스프링 프레임워크에서 가장 핵심적인 부분으로, IoC(Inversion of Control) 개념을 기반으로…
Queue란 무엇인가? Java에서 Queue는 데이터 구조의 일종으로, 데이터를 선입선출(FIFO, First-In-First-Out) 방식으로 처리합니다. 이 글에서는 Queue의…
Stack이란 무엇인가? Java에서 Stack은 자료구조의 한 종류로, 데이터를 순서대로 쌓아 올리는 형태로 운영됩니다. 컴퓨터 과학에서…
소개 자바에서 Map 인터페이스는 키(Key)와 값(Value)의 쌍을 저장하는 자료구조입니다. 이는 연관 배열이라고도 불리며, 각 키는…