vue 여백

1. 문제 정의

Vue 프로젝트를 생성해서 헤더와 푸터를 만들어서 화면 테스트를 하는 도중에 문제를 발견했습니다.

사진과 같이 상하좌우 여백이 생기는 것을 볼 수 있습니다.

2. 문제 해결

처음엔 헤더와 푸터에 css 요소를 잘못 적용했다고 판단하여, 헤더 푸터와 관련된 글들을 구글링 해보았습니다. 하지만 저와 같은 현상을 찾아보기 힘들었습니다.
Vue의 특성인가 고민이 돼서 다시 찾아보니, Vue 프로젝트는 상하좌우 8px 씩 margin을 두는 것을 알 수 있었습니다.

이를 해결하기 위해 Root 컴포넌트인 App.vue의 style 영역에 다음 코드를 추가해주었습니다.

body {
  margin: 0;
}

이를 적용하니 다음과 같이 문제가 해결되었습니다.