sohyeon kim

💡 그리드 컨테이너 내 그리드 아이템에 주어지는 속성에 대해 알아보자. ✳️ grid-column & row : 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치한다. 기본 세팅! 6개의 리스트를 2열 3행으로 ~ 1 2 3 4 5 6 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; border: 5px solid aquamarine; } li { display: flex; justify-content: center; align-items: center; background-color: lemonchiffon; border: 5px solid pink; border-radius: 10px; } .con..

💡 grid layout : 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다! 그리드 방식은 컨테이너에 행 and 열을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다! 그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소 그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소 display : grid 기본적으로 블록 레벨 display : inline-grid 인라인 속성으로 쓰고 싶을 때! 시작해 보아요. 1 2 3 4 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; bo..

💡 flexbox : 행 or 열을 주축('가로 ➡️' 가 기본값)으로 설정해 웹 요소를 배치 / 정렬하는 1차원 레이아웃 방식 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소, ul 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소, li 고양이 강아지 오리 달팽이 고라니 * { box-sizing: border-box; } body { margin: 0; } #first-ul { display: flex; padding: 0; list-style: none; height: 300px; } 먼저 기본으로 이렇게 flex 를 설정해 주면 ⬇️ 한줄로 정렬된다! ⬇️ display: flex 는 기본적으로 블록레벨 속성, 그 줄을 전체 차지함 ⬇️ display: ..

💡 렉시컬 환경 : 어떤 함수가 선언(생성)될 때 그 당시의 외부 변수가 저장되는 곳! 그 정보들 : 외부 변수 등등 const x = 1; // 전역 스코프 function outerFunc() { const x = 10; // outerFunc 스코프 function innerFunc() { console.log("x : " + x); // x : 10 // (innerFunc 스코프에 x 가 없으니 이 함수가 선언될 때의 LE 인 outerFunc 로 찾으러 감) } innerFunc(); } outerFunc(); console.log("x : " + x); // x : 1 ➕ 함수를 어디서 '호출' 했는지가 아니라, 어디에 '정의' 했는지에 따라 스코프(상위 스코프) 가 결정된다! outer 내..

전에 클래스 사용법 글을 썼었지만 한 번 더 정리해 둔다. 💡 새 객체를 쉽게 추가해 주는 class! class Car { constructor(name, year, type, price) { this.modelName = name; this.modelYear = year; this.type = type; this.price = price; } makeNoise() { // 클랙션을 울리는 메서드 console.log(`${this.modelName} : 빵빵!`); } makedYear() { // 연도를 말해주는 메서드 console.log(`${this.modelName} : 나는 ${this.modelYear}년도에 만들어졌어~`); } } const car1 = new Car("현이 차", 2..

💡 for 문 이용 function isPrimeNumber(number) { if (number

💡 첫 번째 방법 split(), reverse(), join() 이용 let str = "hihelloohayo"; // 1. split() 메소드를 이용해 새 배열을 반환한다. let splitString = str.split(""); console.log(splitString); // ['h', 'i', 'h', 'e', 'l', 'l', 'o', 'o', 'h', 'a', 'y', 'o'] // 2. reverse() 메소드를 이용해 새 배열의 순서를 뒤집는다. let reverseArray = splitString.reverse(); console.log(reverseArray); // ['o', 'y', 'a', 'h', 'o', 'o', 'l', 'l', 'e', 'h', 'i', 'h'] ..

📝 문제 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 🫠 나의 풀이 function solution(strings, n) { let result = []; for (let i = 0; i < strings.length; i++) { result[i] = strings[i][n] + strings[i]; // 문자열의 맨 앞에 두 번째 글자를 넣어준다. } result.sort(); // 사전순 정렬 for (let j = 0; j < result.le..

: key, value 를 저장하는 객체와 비슷, for of 사용 가능! 하지만 객체와 달리 key 로 모는 유형 할당 가능! 그리고 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다! 💡 주요 메서드와 프로퍼티 new Map() 맵을 만든다. map.set(key, value) key 를 이용해 value 를 저장한다. map.get(key) key 에 해당하는 값을 반환한다. key 가 없다면 undefined 반환 map.has(key) key 가 존재하면 true, 존재하지 않으면 false 반환 map.delete(key) key 에 해당하는 값을 삭제한다. map.clear() 맵 안의 모든 요소를 제거한다. map.size 요소의 개수를 반환한다. 💡 new Map() 생..

📝 문제 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 🫠 나의 풀이 function solution(absolutes, signs) { let result = 0; for (let i = 0; i < signs.length; i++) { signs[i] ? (result += absolutes[i]) : (result -= absolutes[i]); } return result; } 🧞‍♂️ 다른 사람의 풀이 function solution(absolutes, signs) { return abs..