celine

1. Node.js 란 ? Node.js는 크롬 V8 자바스크립트 엔진으로 만들어진 JavaScipt 런타임입니다. - 런타임(runtime)은 프로그램이 실행되고 있는 동안의 동작, JavaScript 런타임은 자바스크립트가 구동되는 환경, Node.js를 활용해서 자바스크립트를 구동시킬 수 있는 환경을 만들어주는 것이다. Node.js가 나오기 전까지는 자바스크립트를 브라우저 내에서만 사용했습니다. Node.js는 자바 스크립트를 서버 사이드에서 사용할 수 있는 언어라고 생각하면 됩니다. 2. express.js 란 ? node.js를 이용한 프레임워크. 3. packgage.json 1) dependencies : express 적혀있는 부분 - 어플리케이션에서 express 라는 라이브러리를 사용..

팝업창 영역을 제외하고 선택 시 팝업창이 닫히는 코드입니다. 팝업입니다 팝업입니다.팝업입니다 팝업입니다. 팝업입니다 팝업입니다.팝업입니다 팝업입니다 .팝업입니다 팝업입니다.팝업입니다 팝업입니다.팝업입 니다 팝업입니다.팝업입니다 팝업입니다. .popup { width: 200px; height: 200px; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); border: 1px solid green; border-radius: 8px; text-align: center; z-index: 99; background: #fff; } .blackBg{ position: fixed; left: 0; top: 0; width: 100..

let priceNum = $("input[name=nftPrice]").val(); let pattern = /^(\d{1,12})([.]\d{0,10}?)?$/; if ( !pattern.test(priceNum) && priceNum != ''){ if( priceNum.indexOf('.') > 0 ) { if( priceNum.toString().split(".")[0].length > 12 && priceNum.toString().split(".")[1].length > 10 ) { $('#integralError').removeClass('hide'); $('#integralError').text('소수점 위로 최대 12자리까지 입력 가능합니다.'); $('#demicalError').rem..

[javaScript] - setTimeOut() : 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. setTimeout(function() { console.log('Hello World!'); //타이머가 만료된 뒤 실행할 function입니다. }, 500); [조건] 1. 클릭 후 배경색이 변경됩니다. 2. 배경색이 변경 되며, 텍스트가 변경됩니다. Copy .copyTooltip { width: 100px; background:#222; border-radius: 16px; padding:16px 0; box-sizing: border-box; box-shadow: 0px 4px 12px 0px #0000001A; position: rel..

[CSS] position: sticky - 스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS 속성입니다. - position: sticky; top: 100px; 의 의미는 스크롤을 한 후 position:sticky를 적용한 요소가 스크롤이 되어 보이는 순간, viewport 기준 top: 100px; 위치에 fixed 가 됩니다. - position:sticky를 적용한 요소의 부모요소를 넘어가면 position:sticky를 적용한 요소의 fixed가 풀립니다. - 반드시 top, bottom, left, right 속성 중 하나는 입력을 해줘야 작동을 합니다. 입력 하지 않으면 작동 X - sticky 속성의 경우, 부모 또는 조상 노드에 overflow 설정이 ..

[CSS] - 모든 컨텐츠의 내용을 보여줄 수 없을 때, 디자인적인 측면으로 말 줄임표를 사용합니다. *조건 - 제목 1줄, 내용 3줄까지 노출되며, 영역이 넘어갈 시 말줄임표(...)를 표시합니다. See the Pen Untitled by 현정 (@Celine__509) on CodePen. 1. width를 사용하지 않고 max-width를 사용한 이유는 컨텐츠 내용의 길이가 짧을 수도 있는 상황을 고려함. 2. text-overflow: ellipsis; 한 줄 표출을 할 때, 일정 width를 넘어갔을 경우, 말줄임표를(...) 위해 사용함. 3. white-space:normal 은 자동 줄 바꿈을 위해 사용함. 4. webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정..