배열에 배열 추가시 2차원 배열되는 현상 1차원배열로 넣기 let a = [] let b = ['바나나', '딸기', '복숭아'] a.push(b) a.push(b) => [['바나나', '딸기', '복숭아'], ['바나나', '딸기', '복숭아']] 원하는건 ['바나나', '딸기', '복숭아', '바나나', '딸기', '복숭아'] a = [...a, ...b] spread operator를 이용한다 STUDY/javascript 2022.08.19
ios input:disabled value color 바꾸기 ios에서 input disabled 일때 value 글씨가 다른데보다 안보이는 현상 placeholde는 정상적으로 보여지지만 value는 좀 흐리게 보인다. input:disabled { -webkit-text-fill-color: #888; -webkit-opacity: 1; } STUDY/CSS 2022.08.16
css 주민번호 뒷자리 배경처리 주민번호 뒷자리 배경처리 입력된 자리수만큼 표시가 되어야 할 경우 input password 와 같은 레벨에 배경 이미지를만들고 input password가 동그란 모양으로 나오기 때문에 입력된 문자열 만큼 배경이미지 위에 가려지는 효과로 작업 .personalNo-2:before {bg:img} .personalNo-2 input {font-size:60px; color:green} See the Pen input password 배경 by soohyeon (@sooh) on CodePen. 2. 주민번호 뒷 1자리 표시 뒷 1자리 한정 input을 배경이미지 크기만큼 width를 적용하고 label로 focus 영역을 확장한다 input에 value가 있을때 == placeholder가 없을때 ( i.. STUDY/CSS 2022.06.02
websquare 줄바꿈 웹스퀘어 UI개발시 유동적인 요소일경우 w2:textbox로 작업해야할 경우가 있다 xf:group으로 작업한다면 줄바꿈시 태그가 잘 적용되지만 w2:textbox의 label에 들어갈경우 오류가 나면서 랜더링조차 되지 않는다 웹스퀘어에서 w2:textbox나 form요소에 줄바꿈이 필요한경우 escape="false" 사용 w2:textbox 줄바꿈 xf:select 줄바꿈 ... STUDY/웹스퀘어 2022.05.11
[비표준 크로스브라우징] IE와 크롬 col width 계산법의 상이함 col width에 padding이 있을경우 표준브라우저와 비표준 브라우저의 렌더링 방식이 다름 width 220, padding-left 15 일경우 ie 는 content-box, 표준브라우저는 box-sizing으로 출력 td의 넓이는 ie : width 220, pl 15 = 235px 크롬 : width 105, pl 15 = 200px table의 width값이 정해져 있는데 td가 맘대로 width값을 늘려버렸으니 그 모자란 width값은 죄없는 옆 친구 td값을 차감한다 구 IE5버전의 모습을 크롬이 그대로 보여줘야 하기때문에 col값을 크롬 계산법대로 수치 수정을 해준다. STUDY/CSS 2021.12.02
gulp-ejs vs gulp-file-include vs gulp-pug gulp-pug gulpfile.js const gpug = require("gulp-pug"); const routes = { pug : { watch: 'src/**/*.pug', src: 'src/**/*.pug', dest: "dist" } } const pug = () => gulp .src(routes.pug.src) .pipe(gpug({ pretty:true })) .pipe(gulp.dest(routes.pug.dest)); ./include/layout.pug doctype html html.no-js(lang='en') head meta(charset='utf-8') meta(http-equiv='x-ua-compatible' content='ie=edge') title Test Pu.. STUDY/gulp 2021.07.20
링크 미리보기 만들기, iframe 꽉차게 보이기 링크에 mouse over 했을때 a 링크의 href를 ireame에 append 해준다. mouse leave 일경우 append 되어있는 iframe을 지워준다. 한번에 로딩하면 로딩속도가 느려지기 때문에 각 필요할때 불러주는 형식이 알맞았다. $('a').on({ mouseenter :function(){ var $this = $(this); var href = $this.attr('href'); var html = ''; $this.append(html) }, mouseleave : function(){ $(this).find('.sitemapIframe').remove(); } }) iframe에 href로 링크만 불러올경우 불러온 컨텐츠가 ifeame에 너무 크게 보이게 된다. iframe에 .. STUDY/javascript 2021.07.02
[프로그래머스] 코딩테스트 문제 풀이(신규아이디추천) https://programmers.co.kr/learn/courses/30/lessons/72410 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr 프로그래머스에서 코딩테스트 연습 규격에 맞지 않는 아이디를 입력했을경우 규칙에 맞게 변경하여 추천하는 기능이다 이 연습으로 정규식을 공부하게된 좋은 경험이였다 내가 제출한 답안 모든것을 함수화하여 만들었다.... function solution(new_id) { var answer = new_id; answer = changeLowercase(answer.. STUDY/코딩테스트 문제풀이 2021.06.03
rolling text number animation (수정 ES6 버전) 해당 소스를 최근에 사용할 일이 있어 차용해보니 jquery가 섞여있어 최신 문법으로 리펙토링 했다 훨씬 코드가 줄어들었고 slide 여부를 동일한 방법으로 작성하고 css transition 유무로 구분지었다 콤마 적용방법도 정규식을통해 미리 콤마를 찍어두고 숫자와 동일하게 롤링시켰다 new source See the Pen rolling text number animation ES6 by soohyeon (@sooh) on CodePen. new RollingNum('.countTest1','123000','slide'); new RollingNum('.countTest2','123000'); function RollingNum(className, number, type) { const speed =.. STUDY/javascript 2021.05.17