크롬 개발자도구2 [Chrome] 개발자 도구 - 요소 상태 및 Class 활용 ● 요소 상태별 스타일 확인 - 요소 상태 전환 버튼(:hov) 클릭 - active, hover, focus, visited, focus-within, focus-visible, target 체크해보며 스타일 확인 (중복 선택 가능) - active : 요소가 활성화 된 상태 (ex : 버튼 클릭 했을 때) - hover : 요소 위에 마우스를 가져다 놓은 상태 - focus : 요소가 포커스 받았을 때. 주로 폼 요소에서 사용. 키보드 또는 다른 입력 장치를 통해 포커스 발생 - visited : 링크를 방문한 후에 해당 링크 요소에 적용. 이를 통해 방문한 링크와 아직 방문하지 않은 링크 구별 가능 - focus-within : 요소 내부의 자식 요소가 포커스 받았을 때 부모 요소에 적용 - foc.. 2023. 11. 28. [Chrome] 개발자 도구 - 눈금자 표시 ❗ 사실상 기능 개발을 주로 하는 개발자들에게는 쓸모없을 수 있지만, 퍼블리셔에게는 도움 될 수 있는 기능 - 오른쪽 상단 세로 점 3개 버튼 클릭 > Run Command 클릭 - 또는 Ctrl + Shift + P - 눈금자 입력 > "마우스를 가져가면 눈금자 표시" 선택 · 영어 사용중인 경우, "Show rulers on hover" 검색 - 요소 선택 · 요소 탭 > 왼쪽 상단 화살표 버튼 클릭 · Ctrl + Shift+ C - 눈금자 생성 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 눈금자 표시하기 https://www.youtube.com/watch?v=ZwqSsekJVqU&list=PLkfUwwo13dlUJCAGcBOynazaBVgvvj4ba&index=3 2023. 11. 15. 이전 1 다음 반응형
