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>
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>
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>
HTMLinput 요소가 포커스를 받았을 때 스타일이 변경됩니다.
::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>
HTML::before 와 ::after 를 사용하여 요소의 앞과 뒤에 콘텐츠를 생성했습니다.
가상 클래스와 가상 요소는 웹 디자인에서 상호작용과 스타일링을 풍부하게 만드는 핵심 기능입니다. 마우스의 상태나 특정 위치에 따라 스타일을 적용하거나, 특정 부분에 콘텐츠를 추가하는 데에 사용됩니다.
Enum이란? Enum은 "enumeration"의 줄임말로, 특정 값들의 집합을 정의할 수 있는 특별한 클래스입니다. 예를 들어, 요일,…
래퍼 클래스(Wrapper Class)란? 자바에서 래퍼 클래스는 기본 데이터 타입(Primitive Data Type)을 객체(Object)로 감싸는 클래스입니다. 자바의…
서론 Java에서 문자열을 다룰 때, 문자열의 변경이 빈번하게 발생하는 경우라면 StringBuilder 클래스를 사용하는 것이 매우…
String 클래스란? 자바에서 String 클래스는 가장 널리 사용되는 클래스 중 하나입니다. 문자열 시퀀스를 나타내며, 문자열을…
불변 객체란? 불변 객체(Immutable Object)는 생성된 이후 그 상태를 변경할 수 없는 객체를 의미합니다. 불변…