꾸생의 DevLog

자바스크립트 정규표현식(Regular Expression)

정규표현식(Regular Expression) 문자열안에 특정 내용을 찾거나 대체 또는 발췌하기 위해 사용한다. ex) 회원가입시 사용자에게 받는 정보(전화번호, 이메일 등)가 유효한지 체크해야할 경우 정규표현식을 사용 정규표현식은 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제가 있다. const tel = '010-1234-5678'; // 정규 표현식 리터럴 const myRegExp = /1234/; console.log(myRegExp.test(tel)); // true 자바스크립트 정규표현식 메소드 const targetStr = 'This is a pen.'; const regexr = /is/ig; // RegExp 객체의 메소드 conso..

2020.10.07  

[JS/JQ] 자바스크립트 체크박스 컨트롤하기

Java Script 체크박스 체크 및 해제하기 var chkbox = document.getElementById("chkbox"); chkbox.checked = true; JQuery 체크박스 체크 및 해제하기 $("#chkbox").prop("checked", true); // attr도 가능하지만 prop 권장 체크여부 확인 if( $("#chkbox").prop("checked") == true ){ //checked } else{ // not checked }

2020.10.06  

[JS/JQ] Math객체를 사용한 난수 발생

자바 Math객체를 사용한 난수 사용 // Math.floor((최대값 - 최소값 + 1)*Math.random() + 최소값); var max = 10; var min = 1; var rndVa = Math.floor((max - min + 1)*Math.random() + min); Math.floor((최대값 - 최소값 + 1) * Math.random() + 최소값)

2020.10.06  

[CSS] 요소 화면 중앙에 배치하는 방법

CSS 화면 중앙에 요소 배치 방법 HTML요소를 CSS속성으로 화면 중앙에 배치하는 방법을 알아보도록 하겠습니다. 1. position과 transform 사용 .box { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); } absolute 속성으로 3차원으로 띄운 후 너비와 높이의 길이만큼 50%씩 밀어낸 후 자신의 너비와 높이 크기의 반만큼 당기는 방법입니다. 이 방법의 장점으로는 width, height의 길이가 유동적이어도 사용 가능하다. 단점 : IE8 이하 사용 불가능

2020.10.06  

[CSS] 트랜지션(transition)

트랜지션(transition) 트랜지션은 HTML 객체에 동작이 일어날 때 움직임의 속도를 부여하는 속성 ex) transition: all 1s linear 1s; 주로 사용되는 스타일 속성 위치 : top, right, bottom, left크기 : width, height여백 : margin, padding테두리 : border, border-radius색상 : color, background-color투명도 : opacity변환 : transform 트랜지션(transition) 속성 transition-property: 변화를 적용할 CSS속성 지정 transition-duration: 움직임의 전체 시간 지정(s)transition-timing-function: 움직임의 패턴transition..

2020.10.02  

[CSS] Display속성 inline / block / inline-block 차이점

inline / block / inline-block 차이점 css display 속성 3가지의 특징과 각각의 차이첨을 알아보도록 하겠습니다. 1. display: inline 대표적으로 태그를 예로 들을 수 있으며 text의 크기만큼 공간 차지하고 줄바꿈을 하지않는다. width, height : 적용 불가능margin, padding-top/bottom : 적용 불가능line-height : 적용 불가능 display:inline; 2. display: block block은 대표적으로 태그로 줄바꿈 기능을 무조건 포함하고 있습니다. display:block; 3. display: inline-block inline-block 속성은 이름처럼 inline 속성의 특징과 block 속성의 특징 둘 다 ..

2020.10.01