[Vue.js] 배경에 나타나는 검은색 테두리(?) 없애기.

 

 

[ 라우터 설치하고 배경색 바꿔보기 ]

◀ 이전 포스팅 ◀

[Vue.js] 라우터 설치하고, 배경색 바꿔보기.

 

 

---

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

배경색을 채웠더니,
이상한 검은색이 왼쪽 사이드에 존재한다.
거슬리니 없애보자!

 

 

 

 

1. 문제 확인하기

이상한 검은면(?)선(?)이 왼쪽 사이드에 나타났다. 아무리 코드를 살펴봐도, 검은색 관련 코드를 적은 것은 없었다. 그렇다면 저것의 정체는 무엇일까? 

 

 

 

 

---

 

 

 

2. main.css 코드 살펴보기.

나만 나타나는걸까? 검색을 해도 나오지 않았다. GPT는 실제로 배포하면 나타나지 않을거라고 그냥 개발하는게 어떻겠냐며... 날 진정시키려 했다. 하지만 이미 한 번 거슬리기 시작해서 기필고 없애야겠다고 다짐했다. GPT가 하란대로 해봤지만 막연하게 내부에서 지정하고 있는 것 같다며, 내가 새로 만든 것들 외의 파일에서 검은색과 관련된 코드가 있는지 찾아보라했다. 찾아봐도 모르겠고, 하란대로 해도 안없어졌다.(이거 없애는데 2시간 걸림.. 내시간 ㅠㅠ) 

 

 

main.css 파일에 있는 이 코드 때문이라는 것 같다. 그런데 이 코드를 주석처리해도 사라지진 않았다. 

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }
  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}

 

결론적으로 main.css에 아래 코드를 저장하니 사라졌다. 여기서 이상한 점은 아래 코드의 일부분을 설정해봤다는 것이다. 근데 그때는 안없어졌다. 저 코드 중 무엇이 검은색 테두리를 없앤건지 확인해봐야겠다. 하나하나 주석처리를 하면서 살펴보니 padding: 0 !important; 코드가 검은색 테두리를 사라지게 했다.

  html, body, #app, .main-view {
    min-width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

 

 

 

 

---

 

 

 

3. main.css 코드 수정하기.

혹시모르니 그냥 일단 padding만 남겨놨다.

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }

  html, body, #app, .main-view {
    /*min-width: 100vw !important;*/
    /*max-width: 100vw !important;*/
    /*min-height: 100vh !important;*/
    /*max-height: 100vh !important;*/
    /*margin: 0 !important;*/
    padding: 0 !important;
    /*border: none !important;*/
    /*box-shadow: none !important;*/
    /*box-sizing: border-box !important;*/
  }
 }

 

짜잔 완성