가상 클래스란?
가상 클래스 선택자는 CSS에서 요소의 특정 상태나 위치를 기준으로 스타일을 적용하는 방법이에요. 일반 선택자( 태그,
클래스, ID등 )가 "무엇"을 선택하느냐에 초점을 맞춘다면, 가상 클래스는 "어떤 상황"이나 "어떤 조건"에 있는 요소를
골라내는 데 사용됩니다.
이름에 "가상"이 붙은 이유는 실제 HTML에 클래스가 추가된 게 아니라. CSS가 요소의 상태나 위치를 "가상으로"
판단해서 스타일을 입히기 때문이에요.
기호는 콜론(:) 으로 시작하며, 선택자 뒤에 붙습니다.(예: button:hover,li:first-child)
주요 가상 클래스
:hover: 마우스가 요소 위에 있을 때 스타일 적용
:focus: 요소가 키보드나 클릭으로 포커스를 받았을 때 적용(주로 입력창에 사용)
:first-child: 부모 안에서 첫번째 자식 요소 선택
:last-child : 부모 안에서 마지막 자식 요소 선택
:nth-child(n) : 부모 안에서 특정 순서(숫자,odd,even등)의 자식 요소 선택
================================================================
브라우저에서 기본적으로 들어가 있는 요소들에 CSS 를 없애고 싶다면
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
https://necolas.github.io/normalize.css/
Normalize.css: Make browsers render all elements more consistently.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
necolas.github.io
|실습 예제 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 클래스 선택자 연습</title>
<link rel="stylesheet" href="css/reset.css">
<!-- 내부 스타일 시트 -->
<style>
button:hover {
background-color: orange;
}
input:focus {
border: 2px solid blue;
color: red;
/* outline 속성 제거해야 border 속성을 사용할 수 있다 */
outline: none; //브라우저는 기본적으로 **파란 테두리(아웃라인)**를 표시합니다.
// 그래서 outline: none을 통해 먼저 제거해야 함
}
/* 리스트의 첫 번째 항목을 선택해서 배경 색상을 그린으로 표시해 */
.item-list li:first-child {
background-color: green;
}
/* 리스트의 마지막 번째 항목을 선택해서 배경 색상을 노란색으로 표시해 */
.item-list li:last-child {
background-color: yellow;
}
/* 리스트 항목중에 홀수 항목들만 폰트 크기를 20크기 그리고 굵게 표시해 */
.item-list li:nth-child(odd) {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<button>버튼을 눌러보세요</button>
<input type="text" name="" id="" placeholder="여기에 값을 입력하시오">
<ul class="item-list">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
<li>항목 5</li>
</ul>
</body>
</html>
|도전 과제 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 클래스 도전 문제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="challenge.css">
<style>
/* 문제 1: 메뉴 링크에 마우스 오버 시 */
/* 문제 2: 로그인 폼 입력창에 포커스 시 */
/* 문제 3: 랭킹 리스트의 첫 번째 항목 */
/* 문제 4: 랭킹 리스트의 마지막 항목 */
/* 문제 5: 랭킹 리스트의 3번째 항목 */
</style>
</head>
<body>
<h2>도전 문제</h2>
<div class="menu">
<a href="#">메뉴 1</a>
<a href="#">메뉴 2</a>
<a href="#">메뉴 3</a>
</div>
<form class="login-form">
<input type="text" placeholder="아이디">
<input type="password" placeholder="비밀번호">
<button type="submit">로그인</button>
</form>
<ul class="ranking">
<li>1등: 김철수</li>
<li>2등: 이영희</li>
<li>3등: 박민수</li>
<li>4등: 최지영</li>
</ul>
</body>
</html>
CDN(Content Delicery Network)은 " 콘텐츠 전송 네트워크"라는 뜻이에요. 쉽게 말해 , 웹 사이트의 파일(예: CSS,JavaScript, 이미지 등 )을 사용자에게 더 빠르게 전달하기 위해 전 세계 곳곳에 서버를 두고 제공하는 서비스입니다.
즉 ... 내 컴퓨터나 서버에 파일을 저장할 필요 없이 바로 쓸 수 있습니다.
| CDN 방식 CSS 기본 초기화(두 개중 하나를 선택해서 사용 하면 됩니다.)
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
| 풀이
/* 문제 1: 메뉴 링크에 마우스 오버 시 */
.menu a:hover {
color: purple;
font-size: 18px;
}
/* 문제 2: 로그인 폼 입력창에 포커스 시 */
.login-form input:focus {
border: 3px solid red;
background-color: lightyellow;
outline: none; /* 브라우저 기본 outline 제거 */
}
/* 문제 3: 랭킹 리스트의 첫 번째 항목 */
.ranking li:first-child {
color: green;
font-weight: bold;
}
/* 문제 4: 랭킹 리스트의 마지막 항목 */
.ranking li:last-child {
background-color: gray;
padding: 10px;
}
/* 문제 5: 랭킹 리스트의 3번째 항목 */
.ranking li:nth-child(3) {
color: blue;
font-style: italic;
}'HTML CSS' 카테고리의 다른 글
| (JAVA) 파일 복사 기능 만들어 보기-18 (1) | 2025.05.29 |
|---|---|
| (HTML/CSS/JavaScript)CSS 선택자(속성 선택자) - 12 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 선택자(결합 선택자) - 10 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 선택자(기본 선택자) - 9 (0) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 크기와 단위, 색상 - 8 (0) | 2025.05.28 |