flex-shrink, flex-wrap, justify-content
·
Programming/JavaScript
flex-shrink - flex-item의 요소값을 설정하는 속성 - 사용하는 경우 : 부모 컨테이너 크기보다 클 때 (=공간 부족) - flex-shrink : 0 => 부모 컨테이너의 크기가 줄어들어도 해당 요소는 줄어들지 않는다. - 숫자가 커질수록 더 줄어든다. flex-wrap - flex-item의 요소들을 정렬하는 속성 - 사용하는 경우: 줄바꿈을 하고 싶을 때 - no wrap : default - wrap : 아래 방향으로 여러 줄로 나눈다. - wrap-reverse : 위 방향으로 여러 줄로 나눈다. justify-content - 요소들 사이와 주 공간을 나누는 속성 - space-between : 요소들 간 간격을 균일하게 만든다. - space-around : 요소들의 둘레 간..
JS 문법 정리 (6)
·
Programming/JavaScript
0. Declaration, index position 배열의 포인트는 인덱스 const arr1 = new Array(); const arr2 = [1, 2]; const fruits = ['a', 'b']; console.log(fruits); console.log(fruits.length); 1. Looping over an array // 1. for for (let i=0; i console.log(fruit)); 2. Addition, deletion, copy // push : add an item to the end fruits.push('c',"d"); console.log(fruits); // pop : remove an item from the end fruits.pop(); frui..
JS 문법 정리 (5)
·
Programming/JavaScript
0. Literals and properties one of the JS 's data types a collection of related data and/or functionality. Nearly all objects in JS are instances of object object = { key : value }; const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person){ console.log(person.name); console.log(person.age); } const cucu = { name : 'cucu', age : '1..
JS 문법 정리 (4)
·
Programming/JavaScript
0. class, object Class - template - declare once - no data in - syntactical sugar over prototype-based inheritance Object - instance of a class - created many times - data in 1. Class declarations class Person{ constructor(name, age){ this.name = name; this.age = age; } speak(){ console.log(`${this.name}:hello!`); } } const cucu = new Person('cucu', 99); console.log(cucu.age); console.log(cucu.n..