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 ...

watcher 데이터를 감시하는 함수 데이터가 제대로 들어왔는지 검사한다, 특히 사용자의 input을 받는 페이지에서는 필수적이다. 문법 <script> export default { name: 'ModalDetail', data(){ return { month: 1, } }, watch: { ...

@input 사용자가 해당 input에 입력할 때마다 스크립트가 실행된다. <input @input=""> @change= 사용자가 해당 input에 값을 입력하고 커서를 다른 곳에 옮겼을 때 실행된다. <input @change=""> 사용자가 input에 입력한 값을 ‘month’ 데이터에 반영하기 vue에서 $ev...

자식 컴포넌트에서 props를 수정하고 싶으면 custom event를 사용한다. 자식 컴포넌트에서 부모 컴포넌트로 메세지를 보내 부모 컴포넌트에 있는 데이터를 수정해야 한다. 자식 컴포넌트에서 부모 컴포넌트로 메시지를 보내고, 부모 컴포넌트에서 메시지를 수신해야 한다. $emit(‘작명’, 데이터) 자식 컴포넌트에서 부모 컴포넌트로 메세지...

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...