비전공자 개발일기

BULMA https://bulma.io/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free. bulma.io CSS만을 위한 프레임워크 1. JQuery를 사용하지 않기 때문에 Bootstrap보다는 조금은 이해가 쉬운 클래스 2. 쉬운 CUSTOMIZE 3. 내가 작성한 CSS와 충돌이 없음 4. 브라우저 호환성이 낮음 npm install bulma TAILWIND https://..

map() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map find() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find findIndex() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex filter() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global..

★ 모든 method는 지정한 배열 내 요소들로 진행 array.map(x => x *2)이면 이때 x는 array[0], array[1].... 이 되는 것! // Array.map(함수) const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; const doubles = numbers.map(function (num) { return num * 2; }) console.log(doubles) /////////////////////////////////////////////////////////////// // Array.forEach(함수) const numbers = [1, 2, 3, 4, 5, ..

// array.filter(function) let numbers = [1, 2, 3, 4, 5]; let result = numbers.filter(n => n % 2 ===0) console.log(result) // [2, 4] function f1() { return "Hello World!" } function f2(str: string) { return str } // f2(1234) error f2("I'm IRONMAN") document.title = "Typescript Basic" interface Friend { name: string; favoriteColor?: string; } function add(friend: Friend) { let name = friend.name; ..

// break let goal = 3; let result = ""; for(let i = 0 ; i < 100; i++) { if(i === goal) { break; } result +="IRONMAN \n"; } console.log(result); // continue // 1부터 100까지 정수 중 7의 배수를 제외한 수 들의 합계 let sum = 0; for(let i = 1 ; i

// 숫자 데이터 형식: number 키워드로 숫자 데이터 지정 후 정수 또는 실수 저장 namespace NumberNote { // [1] 숫자 형식의 변수 선언 및 초기화 let age : number = 21; // 정수 const PI : number = 3.1415922714; // 실수 // [2] 문자열을 다시 대입하려고 하면 에러 발생 // age = 'abc'; // [3] 사용 console.log(`나이 : ${age}`) console.log(`PI : ${PI}`) } // 숫자 구분자 const rich =9_999_999_999_999; console.log(rich) // 9999999999999 // 문자 데이터 형식: string namespace StringKeywor..

Update CSS Variables with JS Spacing: Blur: Base Color :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } body { text-align: center; background: #193549; color: white; font-family: 'helvetica neue', sans-serif; font-weight: 100; font-size: 50px; } .h1 { color: var(--base); } .controls { margin-bottom: 50px; } a { color: var(--base); text-decoration: none; } input { width: 100px; } img{ pa..

Simple Clock html { background: #018ded background-size: cover; font-family: 'helvatica neue'; text-align: center; font-size: 10px; } body { font-size: 2rem; display: flex; flex-flow: column; flex: 1; min-height: 100vh; align-items: center; } h1 { color: lavender; } .clock { width: 30rem; height: 30rem; border: 20px solid lavender; border-radius: 50%; margin: 50px auto; position: relative; paddi..