인프런 커뮤니티 질문&답변

강의는 스크린샷이 되지 않아서 사진을 찍었습니다.

사진은 나무를 설명하기 위해 class에서 선택하는 과정을 찍은 것입니다. .block1의 경우 20개가 있는데 화살표를 누르면 선택된 부분이 개발자도구에서는 노란색으로, 홈페이지에서는 파란색으로 표시가 됩니다.

내가 실습하는 경우에는 개발자도구에서만 표시가 되고, 홈페이지에서는 표시가 되지 않습니다. 그래서 어느 부분인지 금방 확인하기가 어렵습니다. 이런 차이는 무엇때문인지 알고 싶습니다.

음... 저도 이건 처음 보는 현상인데요

개발자 도구 설정이나, 확장 프로그램 충돌 등에서 문제가 났을 가능성이 높아 보입니다.

아래는 GPT o1 모델의 답변이니 참고해서 해결해 보시겠어요??

• 설정 혹은 버전 이슈

  • Chrome 개발자도구 설정에서 'Element Source Overlay'나 'Hover Highlight' 같은 옵션이 꺼져 있는지 확인해야 합니다

  • 크롬 또는 다른 브라우저(예: Edge 등)를 사용한다면 버전이나 개발자도구 표시 방식이 다를 수 있습니다

  • 확장 프로그램이나 플러그인 중에 개발자도구 동작을 간섭하는 경우도 있으니, 잠깐 모든 확장 프로그램을 끄고 테스트해보세요

• 디바이스 툴바(Device Toolbar) 사용 시

  • 개발자도구에서 디바이스 미리보기(스마트폰 아이콘)를 켜두면, PC 버전의 하이라이트가 정상적으로 표시되지 않는 경우도 있습니다

  • 이럴 때는 디바이스 툴바 모드를 끄고 요소를 다시 선택해보면 파란색 Highlight가 정상적으로 표시되는지 확인해보세요

• 요소 선택 방식에 따른 차이

  • 'Elements' 탭에서 선택: 왼쪽 패널(HTML 구조)에서 요소를 클릭하면 우측 스타일 영역에 해당 요소 정보가 나오지만, 페이지 내 오버레이(파란색 Highlight)가 순간적으로만 표시되거나 표시되지 않을 수도 있습니다

  • 'Inspect Element' 아이콘으로 직접 선택: 화면에서 클릭한 요소가 바로 하이라이팅되면서 'Elements' 탭에서 해당 요소가 강조 표시되는 방식이 기본값입니다

• 권한 / 브라우저 레벨 충돌

  • 일부 회사 내 보안 프로그램이나 권한 설정 등으로 개발자도구 기능 일부가 제한되는 사례도 있습니다

  • 개인 PC 환경이라면 크게 문제 없을 텐데, 기업용 PC나 특정 네트워크 환경에서는 개발자도구 기능이 완전히 동작하지 않을 수 있습니다

감사합니다. 나는 선생님께서 다른 설정을 한 건가 했더니, 내 컴퓨터에 오류가 있었던 거네요. 해보도록 하겠습니다.

어떤 설정인지는 파악이 안되어서 더 설명드리기가 애매하네요.. ㅎㅎ

설정이나 확장 프로그램 문제가 아니라면,

웨일과 같은 다른 브라우저를 이용해 보시는 것도 한 방법입니다!