인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

수뼈님의 프로필 이미지

작성한 질문수

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[03-02] CSS 정렬

3-2강 코드로 작성하지 않은 박스가 표시됩니다...?

해결된 질문

작성

·

59

0

<!DOCTYPE html>

<html lang="ko">

<head>

<title>Document</title>

<style>

* {

box-sizing: border-box;

}

div {

width: 80px;

height: 80px;

border: 1px solid red;

padding: 10px;

}

/* #contentBox {

box-sizing: content-box;

}

#borderBox {

box-sizing: border-box;

} */

</style>

</head>

<body>

<div id="contentBox">박스 1</div>

<div>박스 2</div>

<div id="borderBox">박스 3</div>

</body>

</html>

 

이렇게 코드를 치고 저장 후 Live Server로 실행하니 화면과 같이 이상한 박스가 몇 개 더 뜹니다... 버그 같은데 원인을 못 찾겠네요..

image.png

.

답변 2

0

코드캠프님의 프로필 이미지
코드캠프
지식공유자

수뼈님,
안녕하세요! html 파일로 오픈 했는데 문제가 없고, live server에서만 저렇게 보이는 것이면 vs-code 및 live server 에러일 경우도 있습니다.

live-sever를 삭제 후 재설치 해보는 것을 추천드려요!
그래도 안될 경우 다시 남겨주세요 😀

수뼈님의 프로필 이미지
수뼈
질문자

재설치해도 똑같네요ㅠㅠㅠ 윈도우11 24h2인데 뭐가 문제인 걸까요?.. 일단 수동으로 새로고침하면서 따라가겠습니다.

코드캠프님의 프로필 이미지
코드캠프
지식공유자

네! 아무래도 live-server의 호환성 문제일 듯 싶습니다.
vscode 버전이 구 버전이라면 아마 최신으로 업데이트 해보는 것도 하나의 방법이에요!

0

수뼈님의 프로필 이미지
수뼈
질문자

+) 추가
혹시나 해서 html 파일을 더블클릭해서 직접 실행했더니 정상적으로 보입니다. Live Server에서 실행했을 때만 저렇게 보이는데 원인이 뭘까요????..

수뼈님의 프로필 이미지

작성한 질문수

질문하기