svg 미리 보기 활성화 하는 방법 파일을 직접 열지 않아도 미리 볼 수 있기 때문에, 작업 속도가 빨라집니다. 특히 여러 SVG 파일을 다루는 경우 시간 절약 효과가 더욱 뛰어납니다. 확장 프로그램 설치 하기 svg-explorer-extension SVG SEE 프로그래 설치 사이트로 이동해서 컴퓨터 사양에 맞는 버전을 다운로드 합니다. ...

CSS 전처리기란? SASS는 CSS전처리기(Preprocessor)라고도 합니다. CSS 전(예비)처리기 입니다. 보통 언급되는 전치리기 3대장으로 Less, SASS(SCSS), Styleus가 있습니다. 그 중 SASS는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며, 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌...

Identify technologies on websites 크롬 확장프로그램 Wappalyzer를 사용하면 현재 접속한 사이트가 어떤 프레임워크(Framework)나 언어를 사용해 만들어졌는지 파악할 수 있다. 아래 이미지는 Wappalyzer 공식 사이트의 상태 값이다. LINK 공식 사이트: Wappalyzer ...

props {{ 데이터바인딩 }} 은 밑에 script 에 데이터가 있어야 가능하다. App.vue 에 있는 데이터들을 ModalDetail.vue 컴포넌트에서 사용하려면 props를 사용해야 한다. 보통 App.vue에 모든 데이터를 몰아놓고 props를 이용해 필요한 곳에 가져다 쓴다. 부모 컴포넌트 : App.vue 자식 컴포넌트 ...

component 문법을 사용하면 긴 HTML을 한 단어로 깔끔하게 줄일 수 있다. 생성, 작성, import, 등록, 사용의 스텝으로 한다. src 폴더 안에 DiscountBanner.vue 파일을 생성한다 Discount.vue 에 html작성 ( < 열고 엔터치면 vue 템플릿 자동생성) <template>...

v-if=”조건식” 조건식이 참일 때 보여짐 v-else-if v-if=”조건식”이 참이 아니면 실행해주세요 v-else 위에거가 모두 참이 아니면 실행해주세요 <div v-if="1==2"> 안녕하세요 </div> <div v-else-if="1==3"> 위에거가 참이 아니면 실행해주세요 </div>...

누른거 라는 변수를 데이터에 넣고 리스트의 제목을 누를때마다 누른거의 값을 바꿔주고 모달을 띄워준다. <template> <div class="black-bg" v-if="모달창열렸니==1"> <div class="white-bg"> <img :src="원룸들[누른거].image" clas...

oneroom.js 파일에 있는 데이터를 App.vue내 data()로 가져오기 oneroom.js 파일에서 App.vue로 변수를 보내고 싶을때 import / export 문법을 사용한다. export default 내보내기 할 파일에서 내보내기 할 변수를 export 한다. var apple = 10; export default apple ...

v-if=”조건식” 안에 있는 조건식이 참일때만 보여진다. ui 만드는 법칙 필요한 ui를 미리 만들어놓는다. ui의 현재 상태를 데이터로 저장해놓는다. 데이터에 의해서 모달창이 어떻게 보일지 작성한다. 모달창 스위치(데이터)를 만들어 놓고, 스위치를 변경하는 방법으로 기능 개발을 한다. 모달 v-if="모달창열렸니==1" 속성...

이미지 경로 이미지는 src/assets/ 폴더 안에 넣는다. <img src="./assets/room0.jpg" class="room-img"> 이미지 경로에 변수 사용 이미지에 변수를 사용할 때에는 require 함수를 이용한다. <img :src="require(`@/assets/room${i}.jpg`)" class=...