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 를 사용하여 요소의 앞과 뒤에 콘텐츠를 생성했습니다.
가상 클래스와 가상 요소는 웹 디자인에서 상호작용과 스타일링을 풍부하게 만드는 핵심 기능입니다. 마우스의 상태나 특정 위치에 따라 스타일을 적용하거나, 특정 부분에 콘텐츠를 추가하는 데에 사용됩니다.
인터넷 네트워크란? "인터넷(Internet)"이라는 단어는 "인터네트워크(Internetwork)"의 줄임말입니다. 즉, 여러 개의 네트워크가 상호 연결되어 전 세계적으로 하나의…
스프링 빈(Spring Bean)과 IoC 컨테이너 스프링 프레임워크의 핵심 철학은 IoC(Inversion of Control) 컨테이너를 통해 객체(빈,…
스프링 빈이란? 스프링 프레임워크에서 "스프링 빈(Bean)"이란, IoC(Inversion of Control) 컨테이너가 직접 관리하는 객체를 말합니다. @Component,…
의존성 주입(Dependency Injection)이란? 프로그램을 개발하다 보면, 여러 클래스나 객체들은 서로 필요한 기능을 사용하기 위해 관계를…
컴포넌트 스캔이란? 컴포넌트 스캔(Component Scan)은 스프링 프레임워크가 특정 패키지를 탐색하면서, 스캔 대상에 해당하는 클래스를 찾아…
스프링 빈이란? 스프링 빈(Spring Bean)은 스프링 IoC(Inversion of Control) 컨테이너가 관리하는 자바 객체를 의미합니다. 간단히…