CSS 속성 중 height, width 값을 지정해도 위 사진처럼 적용되지 않는 경우가 있다면, 개발자 도구(F12)를 켜고 부모 element에서 해당 프로퍼티의 값이 존재하는지 확인해봐야 한다.
Vue 어플리케이션의 최상위 엘리먼트는 index.html 로
VUE CLI를 이용하여 프로젝트를 만들었다면, 아래 코드와 같이 자동 주입이 되어 있을 것이다.
'app'가 유일한 식별자인 id로 매핑되어 가상 돔이 마운트 될 때 파싱된 index.html 파일을 렌더링 해준다.
//index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.html의 'app'는 가장 먼저 실행되는 main.js 파일에서 초기화 된 App.vue 인스턴스에 .mount('#app')로 부착 시키고, 최종적으로는 index.html 의 'app' 영역의 실제돔을 App.vue 내에서 돌아가는 가상 돔이 마운트 될 때 브라우저에 띄우주는 것이다.
라우팅 된 화면의 height, width 가 적용하려면?
첫째, 루트 엘리먼트인 html에 height, width 값을 지정해야 한다.
최상위 엘리먼트의 height 및 width 값이 없다면, 하위 영역(라우팅 된 하위 컴포넌트)에서 수치를 h-500(tailwind기준) 와 같이 바꿔줘도 부모(루트 엘리먼트) 영역이 존재하지 않기 때문에 무용지물인 것이다.
둘째, index.html의 body 엘리먼트에 height, width 값을 지정해야 한다.
가상돔이 매핑되어 있는 body 태그는 기본적으로 하위 엘리먼트의 영역만큼 height 길이와 width 크기가 정해진다. 따라서 하위 엘리먼트의 context보다 더 길게, 크게 확장하고 싶다면 해당 영역에 CSS 를 주도록 하자.
셋째, #app에 height, width값을 지정해야 한다.
index.html의 body 엘리먼트의 app 영역에 height,width 값을 주면 최상위 컴포넌트인 App.vue의 인스턴스에 스타일 속성이 적용되는 것이고 이는 화면이 렌더링 될 때마다 초기화 된 인스턴스에서 확인이 가능하다.
세가지 작업을 한꺼번에 수행하기 위해서 공통 CSS 파일을 만들고,
이 파일을 App.vue 파일의 style 태그에 연결시켜 주었다.
// common.css
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
#app {
height: 100%;
width: 100%;
}// App.vue
<style lang="scss">
@import './assets/css/common.css'; //공통 css파일의 상대경로 명시
</style>
