Footer 항상 맨 밑에 두기

• html과 body의 height 100%로 설정

  기본적으로 보면 html과 body부터 작성이 되어 있는 부분까지만 커버하고 있다는 것을 알 수 있다. 즉, 작성이 되지 않은 그 밑의 부분은 커버되지 않고 있다는 뜻.

  이를 통해 이 둘이 화면 전체를 사용할 수 있도록 한다.

• 넉스트의 경우 #__nuxt, #__layout까지 height 100%로 설정

• footer의 height 정하기

  • 만약 가변적이라면 문제가 될 수 있겠지만, 대부분의 경우 푸터가 가변 크기를 가지지는 않으니 괜찮을 거 같다.
  • 반응형 쿼리를 작성할 때는 각 breakpoint에 맞춰서 구분해서 경우를 나눠야 한다.

• footer와 header, body를 포함하고 있는 wrap의 min-height를 100%으로 한다.

• wrap의 position을 relative로 한다.

• footer의 position을 absolute로 하고, bottom: 0으로 놓는다.

  • 이제 푸터가 바닥에 붙었다!

• wrap의 padding-bottom을 footer의 height만큼 준다.

넉스트에서 동적 이미지 바인딩 사용하기

img 태그에 src='url'로 놓고 data에 url: '~/assets/img/home.png'라 하면 '<http://xxx.xxx.xxx/~/assets/img/home.png'라고> 뜨면서 이미지 경로를 찾을 수가 없다.

안 되는 코드

<template>
  <img :src="url" alt="photo" />
</template>

<script>
import TitleBasic from '@/components/basic/TitleBasic.vue'
import { userObj } from '@/api/test'

export default {
  data() {
    return {
      url: '~/assets/img/vue_logo.png',
    }
  },
}
</script>

뷰나 넉스트 모두 웹팩에 의해서 static asset들을 관리하게 된다.

How to load dynamic images in Vue and Nuxt with ease