4전 4전

Array.from()은 자바스크립트에서 이터러블(iterable)한 객체나 문자열 같은 유사 배열 객체를 배열로 만들어주는 기능을 하는 메서드입니다. | 구조 매개변수로는 배열로 변환하고 싶은 유사 배열 객체와 배열의 모든 요소에 대해 적용하고 싶은 맵핑함수를 넣을 수 있습니다. let arr = Array.from(유사 배열 객체, 맵핑함수); | 예시 1. 원하는 배열 생성 let arr = Array.from({length: 5}, (v ,i)=> i ); // [0, 1, 2, 3, 4] 생성 let arr1 = Array.from({length: 5}, (v ,i)=> 0 ); // [0, 0, 0, 0, 0] 생성 console.log(arr); // [0, 1, 2, 3, 4] 출력 con..

rem, em 은 요소의 크기를 결정해 주는 단위들입니다. | rem rem 은 최상위 요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. html { font-size: 16px; } div { font-size: 1rem; /* 16px */ } div { font-size: 2rem; /* 32px */ } | em em은 부모요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. div { font-size: 30px; } div span { font-size: 1em; /* 30px */ } div span { font-size: 2em; /* 60px */ }

overflow는 요소의 내용물이 해당요소를 감싸고 있는 컨테이너의 크기를 넘어가면 어떤 식으로 처리를 할지 정해줄 수 있습니다. | 속성값 1. visible 이 속성은 기본값으로 컨테이너를 넘어가는 내용물을 컨테이너 외부에 그대로 표시돼서 다른 콘텐츠를 가릴 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 2. hidden 이 속성은 컨테이너를 넘아가는 내용물을 자르고 안 보이게 숨겨줍니다. HTML 삽입 미리보기할 수 없는 소스 3. scroll 이 속성은 스크롤 막대가 컨테이너에 추가돼서 내용물을 스크롤하면서 볼 수 있습니다. 하지만 내용물이 컨테이너를 넘지 않아도 항상 스크롤이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 4. auto 이 속성..

CSS에서 position 속성은 HTML요소가 위치하는 방식을 정해줍니다. 또한 속성값에 따라서 top, left, bottom, right로 요소의 위치를 지정해 줄 수 있습니다. | 속성 값 1. static static값은 기본값입니다. HTML 요소가 문서의 일반 흐름에 따라서 배치가 되고, top, left, bottom, right 같은 속성값을 사용할 수 없습니다. HTML 삽입 미리보기할 수 없는 소스 2. relative relative값은 HTML요소를 원래 위치에 상대적으로 위치시킬 수 있습니다. top, left, bottom, right 속성값을 사용하여 위치시킬 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 3. absolute absolute값은 HTML요소를 가장 가..

white-space는 요소 내의 공백문자를 처리하는 방법을 정해주는 속성입니다. | 속성 값 1. normal 이 값은 기본값으로 연속된 공백이 있으면 하나로 합치고 한 줄이 너무 길면 자동으로 줄 바꿈을 해줍니다. HTML 삽입 미리보기할 수 없는 소스 2. nowrap 이 값은 연속된 공백이 있으면 하나로 합치고 줄 바꿈을 방지해서 한 줄에 모든 내용이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 → 태그로 줄 바꿈 가능 3. pre 이 값은 요소 내의 모든 공백문자와 줄 바꿈을 유지해 줍니다. 따라서 html코드에 나타나는 대로 표시해 줍니다. Lorem ipsum dolor sit amet consec tetur adipisicing elit. Eius culpa, harum HTML 삽..

Map, Set은 자바스크립트에서 데이터를 저장하는 데 사용하는 구조입니다. | Map Map은 키와 값을 저장하는 객체입니다. 1. 생성 const map1 = new Map(); 이러면 map1을 변수로 하는 Map객체가 생성이 됩니다. 2. 사용 Map객체의 set() 메서드를 사용해 새로운 키-값을 추가하고, get() 메서드를 사용해 값을 검색할 수 있습니다. const map1 = new Map(); map1.set('key1', 'value1'); map1.set('key2', 'value2'); console.log(map1.get('key2')); // "value2" 출력 그리고 Map객체를 생성할 때 배열을 전달해 초기 키-값을 설정할 수도 있습니다. const map1 = new M..

map() 함수는 기존 배열의 각 요소에 함수를 적용하여 새로운 배열로 변환해 주는 함수입니다. | 구조 1. 구조 map() 함수의 구조는 다음과 같습니다. array.map((currentValue, index, array)=>{}); currentValue: 현재 처리 중인 요소의 값 index: 현재 처리 중인 요소의 값 array : 현재 배열 이런 식으로 콜백함수로 최대 3개의 인수를 가질 수 있고, 이중에 index와 array는 필수가 아니고 선택 요소입니다. 2. 예시 let arr = [1, 2, 3, 4]; let arr2 = arr.map((number)=> number * 2) console.log(arr2) // [2, 4, 6, 8] 출력 위 예제에서처럼 배열을 만들고 map(..

continue, return, break은 반복문이나 함수의 흐름을 제어하는 데 사용할 수 있는 키워드들입니다. | continue continue는 반복문이 돌 때 현재 반복을 건너뛰고 다음 반복으로 이동하기 위해 사용됩니다. for (let i = 1; i