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

click event binding v-on:click=”script” @click=”script” 두 가지 문법 <button v-on:click="자바스크립트~~">허위매물신고</button> <button @click="자바스크립트~~">허위매물신고</button> 버튼을 클릭하면 신고...

v-for v-for=”작명 in 몇번반복” :key=”작명” :key 속성은 반복문 돌릴 때 꼭 필요하다. 반복한 요소들을 각각 구분짓기 위한 속성이다. <a v-for="작명 in 3" :key="작명">Home</a> data를 활용한 v-for 3의 자리에는 데이터를 넣을 수가 있음 메뉴들의 갯수만큼 반복됨 작명한...

Vue Data binding 뷰의 실시간 자동 렌더링 기능을 이용하려면 데이터 바인딩을 적극 활용하면 된다. Vue는 data가 변경되면 data와 관련된 HTML도 실시간으로 반영(재 랜더링)된다. 자주 변하는 데이터들은 데이터로 보관하고 HTML에 {{꽂아넣는다}} 데이터 바인딩 Vanilla JS 문법 document.getElemen...

1. 다운로드 node js vs code node.js 를 설치하면 npm을 이용할 수 있다. npm은 각종 웹 개발 라이브러리들을 쉽게 이용할 수 있게 도와주는 패키지 매니저다. (yarn도 마찬가지) npm으로 vue cli를 설치한다. (vue 프로젝트 생성을 빠르게 도와주는 라이브러리) 2. vue/CLI 설치 vs code...

접근성이 필요한 이유 웹 접근성(별칭: a11y)은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것을 의미합니다. 보조과학기술(assistive technology)들이 웹페이지들을 해석할 수 있도록 접근성을 갖추는 것이 필요합니다. React는 접근성을 갖춘 웹사이트를 만들 수 있도록 모든 지원을 하고 있으며, 대부분은 표준 HTML 기술...

Javascript를 이용한 input value 유효성 검사 예제 value 입력 시 다음 칸으로 focus() 된다 <div class="input__wrap input__certy"> <label for="">인증번호 4자리 입력</label> <input type="tel" maxlength="1...

RegExp, 정규 표현식이란? 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다. String의 match(), matchAll() (en-US), replace(), replaceAll(), sear...