[Vue.js] transform: translate로 텍스트 중앙에 배치하기.

 

 

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

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

 

 

노란 배경까지 만들었다.
이번엔 텍스트를
중앙에 배치해보자!

 

 

 

1.  전체코드

 

MainView.vue에 텍스트를 만들었다.

 

<script>

</script>

<template>

  <div class="main-view">
    <div class="hello-vue"><h1> Hello, Vue!! </h1></div>
  </div>

</template>

<style scoped>
.main-view {
  position: relative;
  width:  100vw;
  height: 100vh;
  background-color: lemonchiffon;
}

.hello-vue {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: olivedrab;
}


</style>

 

 

 

 

---

 

 

 

2.  텍스트 적기.

<template>
  <div class="main-view">
    <div class="hello-vue"><h1> Hello, Vue!! </h1></div>
  </div>
</template>

 

main-view 안에 적었다. 다음으로 hello-vue 클래스의 스타일을 정의하자.

 

(복습) main-view는 width: 100vw;와 height: 100vh를 가지고 있다. 여기서 vw와 vh는 viewport width와 viewport height로 viewport란 화면 Display상의 표시 영역을 뜻한다. 즉, vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 1vw와 1vh는 전체 스크린의 100분의 1이다. 그래서 width: 1200px, height: 900px를 가지면 1vw와 1vh는 12px와 9px가 된다. 

 

<style scoped>

.main-view {
  ...
}

.hello-vue {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: olivedrab;
}


</style>

 

position: fixed로 지정하여 고정배치를 해줬다. 고정배치는 부모 요소로부터 완전히 독립되어 다른 요소에 구애 받지 않고 화면의 원하는 곳에 배치가능하다. 그리고 스크롤링을 해도 고정요소는 지정된 위치에 있다.

 

top: 50%과 left: 50%으로 전체 화면 비율 중 반절을 의미하여 위에서 반절, 왼쪽에서 반절에 위치한 곳을 나타낸다. 그런데 막상 적용해보면 가운데에 오지 않는다. 그 이유는 top: 50% left: 50%로 부모의 가운데를 딱 찍으면, 딱 찍은 지점에 내 요소의 왼쪽 위 모서리가 닿는다. 

 

 

 

그래서 transform: translate(-50%, -50%);로 내 요소를 본인의 크기 반절만큼 움직여서 정중앙 지점에 겹치도록 만든다. transform은 요소를 회전(rotate)하거나 크기를 조절(scale)하거나 이동(translate) 등 변형하는데 사용한다. translate는 transform 속성의 함수 중 하나로 x축, y축을 원하는 만큼 이동시킨다. 

 

 

 

 

 

---

 

 

 

3.  결과

완성!

 

 

 

---

 

 

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

 

🪽

틀린 내용이 있다면 댓글로 알려주세요

 

---

 

- fixed

CSS의 fixed position을 통한 HTML 요소의 위치 고정

 

 

 

- 가운데 정렬

가운데 정렬 최강자 top:50% left:50% transform:translate(-50%,-50%)🥰

 

 

 

- transform

[CSS] transform: translate(-50%, -50%);