본문 바로가기

Web60

[Javascript] 글자수 체크, 문자열 길이 구하기(한글 포함) Javascript에서 문자열 길이를 체크할때, 그냥 length를 사용하면 1Byte인 영문, 숫자 입력시엔 상관없지만 한글 '가' 입력시에도 length 값은 1로 나온다. 아래 스크립트는 escape() 함수를 이용해 입력받은 값이 한글인지 판단 후 글자수를 2byte로 계산해준다. See the Pen 한글포함 문자열 길이값 by juein (@juein) on CodePen. 2019. 4. 12.
[Javascript] input 전화번호 입력시 하이픈(-) 자동 붙이기 input에 전화번호 입력시 하이픈(-)이 글자수에 따라 자동으로 붙는 스크립트 02-1234-1234 식으로 하고싶으면 조건별 length와 substr를 수정하면 된다. See the Pen 폰넘버 하이픈 붙이기 by juein (@juein) on CodePen. 2019. 4. 12.
[Javascript] 간단한 아코디언 토글 jQuery 없이 순수 자바스크립트 만으로 구현. Toggle 버튼 클릭시 내용 부분이 아코디언 형태로 토글된다. JS로는 단순하게 클릭시 여닫는 기능만 있고 CSS의 Trantransition 값으로 부드러운 효과를 나타낸다. See the Pen js list more by juein (@juein) on CodePen. 2019. 4. 12.
HTML 전역 속성 사용하기 전역 속성(Global attributes)은 모든 HTML의 공통 속성이다. 모든 엘리먼트 요소에 사용할 수 있지만 일부 요소에는 효과가 없는 것도 있다. 하나의 엘리먼트의 다중 속성을 선언하는것도 가능하며, 속성을 쓰는 순서도 중요하지 않다. (자주 사용하거나 익숙한 속성별로 정리하려다가, 그냥 abc 순으로 정리해두었다.) [accesskey] 키보드 단축키를 지정하여 해당 엘리먼트를 선택할 수 있게 한다. accesskey를 설정하는데 필요한 키 조합은 브라우저와 플랫폼마다 차이가 있으며 윈도우에서 대체로 accesskey는 alt키를 함께 누를 때 작동한다. (이미지 출처) https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/acc.. 2019. 3. 25.
[CSS] Koala를 사용하여 LESS / SASS 를 CSS 파일로 컴파일 코알라는 less, sass 파일을 css파일로 쉽게 컴파일 해주는 GUI 프로그램이다.사용방법은 무지 간단하다. 프로그램 다운로드http://koala-app.com 변경하고싶은 sass / less 파일의 경로를 Add Folder 로 추가할수 있다. 마우스 우클릭 메뉴중 Set Output Path 로 컴파일 된 CSS파일의 저장 경로를 설정 각 파일마다 Auto Compile(자동 컴파일) 기능을 활성화/비활성화 할 수 있다.자동 컴파일 기능을 켜두면 파일에 수정부분이 감지될때마다 실시간으로 컴파일이 진행된다. 2019. 3. 25.
CentOS7 + Vue CLI 3.0 프로젝트 환경 구축 vue-cli는 Vue.js 의 작업환경을 간편하게 생성해준다. 나는 CentOS7 (7.4v) 환경에서 설치 / 프로젝트 생성을 했다. 저장소 할당 후 node js / npm을 설치한다. 저장소에 추가 curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash - curl -sL https://rpm.nodesource.com/setup_10.x | bash - node js 설치 sudo yum install nodejs 버전확인 node --version npm 및 vue-cli 설치 sudo yum -y install npm sudo npm install -g @vue/cli버전확인 vue --version 혹여 vue --version 명령어에 n.. 2019. 3. 20.