vue) :style background #2308

#vue 백그라운드를 html에서 넣을 때

data bind로 백그라운드를 넣을때는 아래와 같이 넣어야지 된다.

:style="{'background-image': 'url(' + require(`~/assets/img/이미지명`) + ')'}"

스택오벌플로우 참조👀

https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working

 

 

 

#console.error

콘솔로그 쓰다가 console.error를 쓰면 빨갛게 떠서 더 알아보기 쉽다.

또한 콘솔창에서 에러만 모아서 보기 때문에 더 수월하게 작업할 수 있다.

 

콘솔종류 확인하기👀

 

 

#vue 확장 파일이 없을 때 확인법

콘솔창에서 window.$nuxt.$store 로 시작한 후 검색하고 싶은 부분을 적으면 확인 가능하다.

개발이 완료된 홈페이지는 외부에서 확장파일에서 검사할 수 있게 제공하지 않기 때문에 위와 같은 방법으로 확인이 가능하다. 

본인이 개발한 홈페이지가 배포 되었을 때 확장파일로는 검사할 수 없으므로 개발자 본인이 검사하는 방법이다. 

 

 

반응형

 

#프론트단 작업시 유의사항

 

이벤트 작업은 1번만 진행한다.

필요시에 호출하도록!

함수를 1번만 등록하는것과 같다.

보통 마운트시에 이벤트 등록을 1회 한다.

나머지는 상황에 따라서 호출만 하면된다.

 

 

# border dashed 간격

 

border style 중에 dashed를 사용하면 이 간격과 크기를 지정할 수 있을까? 하고 

수많은 검색을 해보았지만 역시나 되지 않는다.

이럴때 background-image 를 활용하여 만들 수 있다.

*여기서 팁은 백그라운드 사이즈중 두번째 항목에 높이가 합해져 있다. 그부분을 빼면 공백이 되는거다.

 

1) 백그라운드 이미지가 세로이므로 to bottom 사용

2) 13px 이므로 높이가 13인것을 만들겠다.

3) 반복이므로 백그라운드 사이즈에서 가로가 4px이고 세로가 22px 여기서 백그라운드 이미지 높이가 13px 까지만 검정색이고 나머지는 투명이 된다. 따라서 22 - 13은 8px 이 간격이 된다. 이합한값으로 적어줘야 한다.

4) 세로 반복이므로 repeat-y 를 사용한다.

5) ♦️팁 : 가로로 할것이면 백그라운드 이미지는 to right 가 되고 백그라운드 사이즈도 반대로 되고 백그라운드 반복도 repeat-x 가 될것이다.😚

 

 

border 종류 확인하기(border-style)👀

 

728x90

 

역시나 잔머리가 잘돌아가는게 style할때 좋은거같은 너낌이다.

되지 않는것을 되게 하는것도 능력인거 같다.

가끔 디자인 적인 요구가 많을 때 종종 사용할 만 하다. 하지만 완전똑같이 psd와 맞추고 싶다면 이미지를 잘라서 백그라운드 이미지로 넣는것도 하나의 방법이다.