Chrome 개발자도구2 [Chrome] 개발자 도구 - 명도대비율 확인 ● 목적 : 웹접근성 - 색약, 저시력자, 고령자 등도 구분가능하도록 텍스트와 배경의 명도대비가 필요함 - 기본적인 비율은 텍스트 : 배경 = 4.5 : 1 - 큰 글자(24px 이상) 혹은 굵은 글자(19px 이상)의 경우, 텍스트 : 배경 = 3 :1까지 가능 ● 방법 - Ctrl + Shift+ C 또는 요소 선택 버튼 클릭 후 해당 요소 위에 마우스 올려서 확인 - 스타일에서 Color Picker를 이용하여 확인 - 펼침 버튼을 누르면 레벨 기준 통과여부도 확인 가능 (아래의 경우, AA와 AAA 기준 모두 통과한다는 뜻) - 기준을 미달하면 아이콘이 바뀌고(왼쪽), 새로고침 아이콘(오른쪽)을 누르면 해당 기준에 맞춰 색상 변경 ● 참고 - 텍스트가 있는 요소에서만 확인 가능. 텍스트가 없는 요.. 2023. 11. 24. [Chrome] 개발자 도구 - 요소 숨김 처리 단축키 ● 요소 선택 + H - ex : 빨강 > 노랑 > 초록 div 에서 노란색 div 선택 후 H를 눌렀을 때 - __web-inspector-hide-shortcut__ 이라는 class가 추가되면서 숨김 처리가 됨 - 스타일 탭에서 __web-inspector-hide-shortcut__ class의 스타일은 visibility : hidden !important; 라는 것을 확인 가능 - __web-inspector-hide-shortcut__ · Chrome에서만 사용되는 class · Edge에서 단축키는 동일하며, microsoftStartLogo __web-inspector-hide-shortcut__라는 class가 추가됨 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - HT.. 2023. 11. 24. 이전 1 다음 반응형
