HTML 실습 중 네모빔에 맞아버렸다...
뭐냐고 대체...
에러사항
네모박스 1개를 생성하는 코드였는데 네모빔 맞은거 마냥 무수히 많은 네모박스가 출력됐다.
네모빔1에서 문제를 해결해보려고 하니 뭐라고 검색해야할지...
뭐 어째저째 검색해봤는데 나와 같은 사례를 찾아보는게 쉽진 않았다. 아니 그리고 코드도 몇 줄 안 되는데?
크롬 재부팅, VSCODE 재부팅, 맥북 재부팅 다 해봐도 소용없었다.
그래서 그냥 무시하고 실습 네모빔2까지 진행하다가 네모빔3 실습을 하는데 이건 안 되겠더라ㅎㅎ
그래서 에러 해결 시작!
[개발 환경]
VSCODE (확장 프로그램 Live Server)
Chrome
HTML
맥북
## 네모빔2 실습코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>배경을 깔아보자</title>
<style>
div{
width: 300px;
height: 300px;
border: 20px double green;
padding: 20px;
background-color: yellowgreen;
background-clip: border-box;
/*background-image: url(me.png);*/
background-size: 280px 280px;
background-repeat: no-repeat;
/* background-origin: content-box;
background-position: right bottom;
background-position: center;
background-position: 100px 50px; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
에러원인
[시도한 것들]
1. 크롬 재부팅
2. VSCODE 재부팅
3. 맥북 재부팅
4. 캐시 삭제
5. 확장 프로그램 정리 (해결)
결론은 크롬 확장프로그램들로 인해 div 요소들이 생성되었던 것!!!
참고링크 : https://www.inflearn.com/community/questions/898033/chrome-live-server-%EC%98%A4%EB%A5%98?focusComment=265304
해결
우선 여기서 문제가 됐던 크롬 확장 프로그램은
- 아이템스카우트
- 알리바바 이미지 검색
저 2개가 뭐하는 애들이냐면... 판매업 한다고 설치했던 애들인데,
아이템 스카우트는 쇼핑몰 페이지에서 상품을 분석해주는 확장 프로그램이고 페이지에 도표도 생성해준다.
알리바바 이미지 검색은 상품 이미지를 알리바바, 1688 등 중국 쇼핑몰 사이트에서 검색해주는 것이다.
위 두개가 실행되면 특히 쇼핑몰 즉, 상품들이 나열되어있는 페이지에 접속하면 분석표라든지 여러가지 요소들을 추가로 생성해준다.
아마도 이것 때문에 네모빔 문제가 발생한 것으로 보인다. 눈에는 보이진 않지만, 요소들이 미리 생성되어서 준비를 하고 있었던 모양이다.
그래서 저 2개를 끄니까 그냥 바로 해!결!
글을 정리하며...
위의 코드에서도 작성되어있듯 div 요소에 style을 지정해주는 간단한 코드이다.
나는 분명 div를 하나만 생성했고 근데 개발자 도구에서 확인해보면 div~~ 뭐라고 하는 요소들이 엄청 많았다.
대체 어디서 생겨난 것일까? 했는데
해결 하고 나니 보인다. div 뒤에 단어들이
div.ap-ext.ap-ext-alibaba_search_by_image
잡았다 요놈!
근데 모든 사람들의 웹 환경을 고려하려면... 각 확장프로그램들의 특성을 알아야할까?
아무튼 많은 조건들이 달려야 할 것 같다. 아니면 페이지가 이상하게 조회될 수도 있으니
프론트엔드의 세계도 쉬운게 아니구나ㅠㅠ
댓글