본문 바로가기

전체 게시글376

[CSS] - display / position / inline-block / static / relative / absolute / fixed / sticky See the Pen css block / inline by hbkuk (@hbkuk) on CodePen. div 태그와 span 태그의 display 타입을 각각 반대로 변경한다면? div { background-color: red; display: inline; } span { background-color: blue; display: block; } div 태그의 display: inline-block으로 변경한다면? // block element가 한줄에 한개씩 display: block; // block element가 한줄에 다 배치 display: inline-block; 한줄에 하나씩 배치되지 않고 1줄에 배치 See the Pen Untitled by hbkuk (@hbkuk) on C.. 2022. 9. 20.
[Javascript] 브라우저 객체 모델 / BOM(Browser Object Model) / window 객체 / open() 메서드 / close() 메서드 / setInterval() 메서드/ setTimeout() 메서드 / screen 객체 / 브라우저 객체란? 브라우저에 내장된 객체를 '브라우저 객체'라고 함. window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있음. 계층적 구조이며, 이를 BOM(Browser Object Model)이라고 함. window 객체: 브라우저 객체의 최상위 객체 open("URL, "새 창 이름", "새 창 옵션") URL 페이지를 새창 alert(data) 데이터로 된 경고창을 보여주며, 사용자가 [확인] 버튼을 누르면 다음 코드를 수행 prompt("질문, "답변") 질문과 답변으로 구성된 질의응답 창을 보여줌 confirm("질문 내용") 질문 내용으로 확인이나 취소 창을 보여주며, [확인] 버튼은 true, [취소] 버튼은 false를 반환 moveTo(x,y) .. 2022. 9. 20.
[Javascript] map 메서드 / key값 / value값 / map.get() map 메서드 선언방식 map 생성 방식 1 let emptyMap = new Map(); console.log( emptyMap); map 생성 방식 2 let map2 = new Map( [ [ "key1", "value" ], [ "key2", "value2" ], [ "key3", "value3" ] ]); console.log( map2 ); console.log( map2.size ); key를 이용해 value를 저장한다. 데이터 불러오기 배열에서 했던 방식대로 저장된 데이터를 불러오자. let map2 = new Map( [ [ "key1", "value" ], [ "key2", "value2" ], [ "key3", "value3" ] ]); console.log( map2[0]) con.. 2022. 9. 20.
[Javscirpt] for Each / 배열 순회 forEach() 메서드는 배열을 순회하는 여러 방법 중 하나입니다. 아래와 같은 숫자 배열이 있습니다. const numbers = [1, 2, 3, 4, 5, 6]; for문을 통해서 배열을 순회하는 방식은 아래와 같습니다. for ( i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 그렇다면 forEach 메서드는? 배열을 순회하기 위해 사용되지만, 기본적인 for 반복문과는 다른 방식으로 함수를 사용합니다. forEach 메서드는 다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달합니다. Current Value (명명된 매개변수) - 처리할 현재 요소 Index (선.. 2022. 9. 20.
[Javascript] set() 메서드 / add() / size / for of / for Each set은 중복을 허락하지 않고, 교, 합, 차집합이 가능함에 따라서 중복을 제거하는 용도로 사용 데이터를 삽입한 순서대로 요소를 순회 // 대문자 주의 // "iterable" => 반복 가능한 객체 new Set([iterable]); 사용 예 // 선언 let set = new Set(); // 데이터 추가 set.add( "축구" ); set.add( "농구" ); set.add( "배구" ); // 출력 console.log( set.size ); console.log( set ); 데이터를 추가할떄는 add() 라는 메서드를 사용하고, 데이터의 갯수를 확인할때는 length가 아니라 size()라는 메서드를 사용. 중복을 허락하지 않기에 같은 이름의 데이터를 추가해도 set.add( "축구" ).. 2022. 9. 20.
[Javascript] 배열 객체 / join() / reverse() / sort() / slice() / splice() / concat() / pop() / push() / shift() / unshift() / length에 관해서 변수에는 데이터가 한 개만 저장. 여러 개의 데이터를 하나의 장소에 저장하려면? 배열 객체(Array Object)를 생성하면 됩니다. 배열 객체(Array object) 생성하는 방식 1. let 참조 변수 = new Array(); 참조변수[0]=값1; 참조 변수[10]=값2; ... 참조 변수[n-1]=값n; 2. let 참조 변수 = new Array(값1, 값2, ... 값n); 3. let 참조 변수 = [값2, 값2, ... 값n]; 배열 객체 생성 예시 // 배열 선언 방법 1 let arr1 = []; // 배열 선업 방법 2 let arr2 = Array(); let arr3 = new Array(); // 선언된 배열 호출 console.log( arr1); console.log( a.. 2022. 9. 19.

티스토리툴바