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

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

RegExp, 정규 표현식이란? 정규표현식은 문자를 검색하거나 대체하거나 추출하는 패턴이다. 정규표현식을 만드는 방법은 생성자 방식과 리터럴 방식이 있다. JavaScript에서 사용하기 생성자 방식 // new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') 생성자 방식은 RegExp 클래스를 사용하여 ...

이슈 input type="password"는 값을 입력하면 value가 ●●●●● 형태로 출력이 되는데, 이 도트의 사이즈가 브라우저별로 상이하여 디자인적으로 value가 input 가로사이즈 영역을 넘어서는 문제, 크로스브라우징 문제가 발생했다. 검색결과 문제는 (2016년 기준) 비밀번호 입력란에 파이어폭스와 인터넷 익스플로러는 유니코드 코...

node.js로 웹 서버 만들기 node.js 설치 작업폴더 만든 후 에디터로 오픈 server.js 파일 만들고 아래 코드 작성 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, functio...

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 ‘이 방법 으로 해결될 수 있습니다~’ 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다. 대체 텍스...

jQuery보다 JavaScript를 선택해야 하는 이유 웹 개발을 하다 보면 jQuery를 사용할지, JavaScript를 사용할지 고민하게 된다. 한때 jQuery는 웹 개발의 필수 도구였지만, 현대 웹 환경에서는 JavaScript가 여러 측면에서 더 나은 선택이 될 수 있다. 성능과 사용자 경험 웹 성능은 더 이상...

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 컨텐츠의 ‘역할(roles), 상태(states), 속성(properties)’ 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. r...