[Vue.js] 페이지 배경화면(background) 설정하기 (스크롤 금지, 반복 금지, 사이즈 맞춤, 사진 중앙 정렬)

페이지에서 배경화면을 설정하는 방법에 대해 설명하겠습니다.

만들고자 하는 웹에 따라 배경화면의 설정이 달라질 수 있습니다.

 

우선 기본 코드를 먼저 보도록 하겠습니다.

<!--HTML-->

<template>
  <div class="background">
    Hello
  </div>
</template>

HTML에는 다음과 같이 해주시면 됩니다. class="background"로 설정 했기 때문에 CSS에서 .background로 설정하면 됩니다.

/*CSS*/

<style>
.background{
  height: 100vh;
  overflow: hidden;
  margin:0;
  background-image: url("./assets/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

저는 다음과 같이 .background를 설정했습니다. 이제 하나씩 살펴보도록 하겠습니다.

• height: 100vh;
  높이를 설정한 것입니다. vh는 뷰포트 높이로 이는 뷰포트의 100분의 1의 값을 가집니다. 즉, 뷰포트의 전체 높이가 800px이라면 1vh는 8px입니다. 100vh로 지정한 이유는 배경화면이기 때문에 전체 화면을 꽉 채워야하기 때문입니다.
• overflow: hidden;
  overflow는 박스 안의 내용이 화면보다 더 길때 어떻게 보여줘야 하는지에 대한 속성입니다. overflow에는 여러 값을 설정할 수 있는데 그 중 hidden은 넘치는 부분은 없애는 값입니다. 사진의 길이가 height에서 지정한 100vh보다 길면 없애고 싶기 때문에 이렇게 설정했습니다. 쉽게 말해, 스크롤을 없애는 것입니다.
• background-image: url('경로');
  '경로'에 절대경로나 상대경로를 넣어주시면 됩니다.
• background-size: cover;
  이 속성은 쉽게 말해서 사진이 화면보다 클 때, 가로 세로 비율을 유지한채로 작게 조정하는 역할을 합니다.
• background-size: no-repeat;
  이 속성은 지정한 사진을 배경화면에 넣었을 때, 공간이 남아 남은 공간을 같은 사진으로 반복되는 것을 막을 수 있습니다. 즉, 배경화면이 반복적으로 나오는 것을 막습니다.
• background-position: center;
  이 속성을 사용하지 않으면 배경화면으로 지정한 사진의 왼쪽 상단이 배경화면으로 적용됩니다. 이 속성은 지정한 사진의 가운데를 배경화면으로 사용하게 하는 역할을 합니다.

 

! 본 글은 작성자의 기록용입니다. 잘못된 정보를 포함할 수 있습니다.