CODING/WEB14 [Vue.js] Hooper 사용해서 Slider 추가하기 모듈 설치 npm install hooper # or use yarn yarn add hooper hooper을 사용하는 방법은 너무 간단하다 [ Hooper 공식문서 ] - 보면 쉽게 설명 되어 있어서 금방 따라 할 수 있음 원하는 컴포넌트나 .vue 로 되어있는 파일에 들어가서 위와 같은 코드를 넣어주면 된다. 그리고 그 위에 안에 [📍 기본형태 ] slide 1 slide 2 넣어주면 완전 기본 형태의 slider를 만들수 있고 여러가지를 추가하고 바꿔서 다양하게 바꿀 수 있다. 그건 위에 공식 문서에 있는 example이나 api를 둘러보길 🙂 슬라이드를 template에 추가하는 것이 아니라 data안에 추가해서 v-for를 이용해 slider를 사용할 수 있게했다 [ 📍간단하게 바꿔본 것 ] .. 2021. 1. 18. [Vue.js] vue 명령어 안먹힐 때 | vue 명령어 오류 (Mac) zsh : command not found: vue 이렇게 나오면서 npm install vue도 깔고 npm install --global vue-cli 했는데도 명령어가 안나와서 진짜 몇시간동안 계속 헤매고 있었는데 한번은 npm init 을 안해줘서 npm init 하니까 해결됐었는데 또 새로 프로젝트 만들려고 vue 저렇게 치니까 또 안되길래 찾아보니까 환경 변수 설정을 하면 해결된다고 했다. 그러려면 일단 vue가 설치되어있는 폴더를 찾아야한다 맥에서 숨겨진 파일보려면 커멘트 + 쉬프트 + . 누르면 되는데 찾다보니까 " /Users/유저이름/.npm-global/lib/node_modules/vue-cli/bin " 이 안에 있어서 export PATH="$PATH":/Users/유저 이름/... 2021. 1. 16. [CSS] box-sizing / 박스의 크기를 어떤 기준으로 정할지 Default 값 : content-box ➡️ 콘텐츠 영역을 기준으로 크기를 정함 🎵 속성값 content-box : 콘텐츠 영역을 기준으로 크기를 정함 border-box : 테두리를 기준으로 크기를 정함 inital : 기본값으로 설정 inherit : 부모 요소의 속성값 상속 content-box 일때는 border의 크기를 늘리면 박스가 커지지만 border-box 일때는 border의 크기를 늘려도 박스의 크기가 커지지 않음 2021. 1. 16. [JS] 템플릿 리터럴 | template literals 템플릿 리터럴 [template literals] 이란 ? JavaScript에서 backtick(`)을 사용하여 문자열을 표현한 것을 템플릿 리터럴 [ Template Literals ] 라고 한다. const name = 'mingtory' let age = 20 let alpha const song = 'savage(feat.BIA)-Bahari' console.log("저는 " + name + "이고, 나이는 " + (age + alpha) + "살입니다. 요즘 자주 듣는 노래는 " + song + " 입니다.") // 이 부분을 아래와 같이 바꿀 수 있게 됨 console.log(`저는 ${ name }이고, 나이는 ${age + alpha}살입니다. 요즘 자주 듣는 노래는 ${song}입니다... 2021. 1. 12. [JS] Failed to load resource: the server responded with a status of 404 (Not Found) - 이미지 안나올 때 imageDiv.style.backgroundImage = 'url(./img/${pictures[counter]}.jpeg)' 이미지 슬라이드 만든다고 저렇게 해놨는데 자꾸 사진이 안바뀌길래 뭐가 문제인가 계속 찾아봤는데 다시 살펴보니까 저렇게 써야하는게 아니고 imageDiv.style.backgroundImage = `url('./img/${pictures[counter]}.jpeg')` 빨간색으로 된 부분을 잘못 써놨었다,, 후,, 그래서 계속 사진을 읽어오지 못한거였어,, `(backtick) ⬅️ 을 치려면 Mac에서는 영문으로 입력받는 상태일 때는 ₩를 누르면 `가 나오는데, 한글로 입력받는 상태에 ₩을 누르면 문자 그대로 ₩가 나오게 되니까 한글로 입력중일때는 option + ₩ 를눌러주면.. 2021. 1. 12. [CSS] CSS 박스 모델 1️⃣ 블록 레벨요소 - , 등 - 요소를 삽입했을 때 한 줄을 차지하는 요소 - 요소의 너비가 100% 2️⃣ 인라인 레벨 요소 - , , 등 - 줄을 차지하지 않는 요소 - 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 박스 모델 실체 1️⃣ 콘텐츠 영역, 2️⃣ 패딩(padding), 3️⃣ 박스의 테두리(border), 4️⃣ 마진(margin) 등의 요소로 구성 📌 width & height 속성 : 실체 콘텐츠 영역의 크기 지정 [ defalut값 : auto ] width : 크기 or 백분율 or auto height : 크기 or 백분율 or auto 📌 display 속성 : 블록 레벨 요소 ➡️ 인라인 레벨 요소 OR 인라인 레벨 요소 ➡️ 블록.. 2020. 11. 10. 이전 1 2 3 다음
