반응형
● 요소 상태별 스타일 확인
- 요소 상태 전환 버튼(:hov) 클릭
- active, hover, focus, visited, focus-within, focus-visible, target 체크해보며 스타일 확인 (중복 선택 가능)
- active : 요소가 활성화 된 상태 (ex : 버튼 클릭 했을 때)
- hover : 요소 위에 마우스를 가져다 놓은 상태
- focus : 요소가 포커스 받았을 때. 주로 폼 요소에서 사용. 키보드 또는 다른 입력 장치를 통해 포커스 발생
- visited : 링크를 방문한 후에 해당 링크 요소에 적용. 이를 통해 방문한 링크와 아직 방문하지 않은 링크 구별 가능
- focus-within : 요소 내부의 자식 요소가 포커스 받았을 때 부모 요소에 적용
- focus-visible : 키보드 또는 다른 입력 장치를 사용하여 요소에 포커스 줄 때. 주로 접근성 고려한 디자인할 때 사용
- target : URL의 fragment identifier가 현재 요소 가리킬 때 적용 (ex : a 태그의 href와 요소의 id가 같을 때)
● class 직접 추가 및 활성화 제어를 통한 스타일 확인
- 요소 클래스 버튼(.cls) 클릭
- 새 클래스 추가에 class를 입력하여 스타일 확인
- 체크 선택/해제를 통해 등록되어 있던 class의 활성화 여부 제어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test{
width: 100px;
height: 100px;
border: 1px black solid;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
참고
- 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 가상 클래스 확인하기
https://www.youtube.com/watch?v=R272jVuuZOk&list=PLkfUwwo13dlUJCAGcBOynazaBVgvvj4ba&index=8
반응형
'Programming > Chrome' 카테고리의 다른 글
| [Chrome] 개발자 도구 - 콘솔 사용법 (2) | 2023.12.03 |
|---|---|
| [Chrome] 개발자 도구 - 화면 캡처 (0) | 2023.11.28 |
| [Chrome] 개발자 도구 - 명도대비율 확인 (2) | 2023.11.24 |
| [Chrome] 개발자 도구 - 요소 숨김 처리 단축키 (2) | 2023.11.24 |
| [Chrome] 개발자 도구 - 눈금자 표시 (0) | 2023.11.15 |
댓글