필요기능만 가져와 사용할 수 있고 커스텀 할 수 잇다. 1. 프로젝트 생성 하여 Bootstrap 추가 1) NPM 프로젝트 생성 2) Bootstrap 사이트 에서 npm 명령어 복사 Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 3) 터미널에서 설치 실행 해당 package.json파일에서 내용이 확인 가능하다. npm install bootstrap@5..

SCSS 문법 1. 주석 /**/ 또는 // 기존 사용하는 css 주석 이외에 javascript 주석도 함께 이용가능하다. /**/ : css 변환 후에도 주석이 남아있다. // : css 변환 후 주석이 남아있지 않는다. .container{ h1 { color: $color; /*background:#000*/ // font-size:20px } } 2. 변수 설정 $명칭 = 값 유효범위를 설정 할 수 있다. 2-1. 전역변수 📑 SCSS $color : royalblue; .container{ color: $color; } 📑 CSS /* CSS 전역 변수 선언 */ :root { --color: royalblue; } .container{color: var(--color);} 2-2. 지역 변수..

SCSS를 사용한 프로젝트 CSS 전 처리 도구 , css를 좀더 쉽게 사용하기 위한 도구이다. 문법을 두가지 지원을 한다. SCSS , SASS ( ※ SASS는 기존 CSS문법과 호환이 잘 되지 않는 문제점이 있다.) 실제로 웹에서 동작하기 위해서는 작성한 문법을 CSS로 변환( 컴파일 )해야한다. 1. 사용이유 중첩기능 / 변수 ( CSS에서도 변수 현제 사용 가능 ) / 등 유용한 기능 사용 Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 2. 프로젝트 생성 2-1.프..

정규표현식 (RegExp) 정규식, Regular Expression 역할 문자 검색 문자 대체 문자 추출 테스트 사이트 https://regexr.com/ 정규식 생성 //생성자 new RegExp('표현'.'옵션'); new RegExp('[a-z]'.'gi'); //리터럴 /표현/옵션 /[a-z]/gi 예제 문자 const str = ` 010-1234-1234 aaathe@naver.com The quick brown fox jumps over the lazy dog. aaabbcccddddaaathe. `; 메소드 메소드 문법 설명 test 정규식.test(문자열) 일치여부 (Boolean) 반환 match 문자열.match(정규식) 일치..

Node.js chrome v8 javascript 엔진으로 빌드된 javascript 런타임 자바스크립트 문법해석 및 동작하는 자바스크립트 프로그래밍 언어 동작하는 컴퓨터 환경이다. 동작 환경은 node.js 컴퓨터 환경과 브라우저이다. 모듈들을 가져와서 웹페이지를 작업할 때 node.js 를 사용해 모듈을 동작시킨다. 1. Node.js 설치방법 1-1. Node.js 홈페이지 설치 하나의 버전만 설치 할수 있다. 안전성있는 짝수 버전 설치를 권장한다. 하지만 설치한 버전 말고 다른 버전의 node.js 환경에서 개발을 진행해야할 수도 있다. 때문에 해당 페이지에서 하나의 버전을 다운 받는 것보다 노드 버전 메니저를 설치하는 것을 권장한다. Node.js Node.js® is a JavaScript ..