FE
-
16일차 (DOM의 기초)코드스테이츠 2022. 11. 10. 22:10
오늘은 자바스크립트를 이용하여 html을 조작하는 DOM을 배웠다. 처음에는 어떻게 연결되는지 이해가 잘 안갔지만 실습을 하면서 이해를 했다. 그리고 이벤트 핸들러를 배웠는 아주 재미있었다! 1. DOM으로 새로운 요소 만들기 let one = document.createElement('div') div element를 만들어 변수에 할당해 줬다. 아직 트리 구조에 연결하지 않았기 때문에 어떤한 변화도 나타나지 않는다. 2. 만든 요소를 트리구조에 연결하기 document.body.append(one) document.body로 위치를 잡아주고 append를 사용하여 body안으로 넣어준다. 하지만 그래도 아직 보이지 않는다.(개발자 도구에선 확인가능) 3. 자바스크립트에서 HTML Element 조회하..
-
14일차! (클로저 함수, spread, rest)코드스테이츠 2022. 11. 8. 22:53
오늘은 클로저 함수, spread, rest를 배웠다. 페어활동도 했다. 이번 페어 활동은 둘이 으쌰으쌰하며 해서 너무나 좋았다. 클로저 함수는 이해가 된것 같으면서도....안된것 같고..... 이상하다...? 1. 클로저 클로저 함수는 외부 함수의 변수를 사용하는 내부 함수를 말한다. (또는 외부 함수의 변수를 기억하는 함수, 함수를 리턴하는 함수) //화살표 함수 const add = x => y => (x + y); let add1 = add(7); // x에 7이라는 값을 넣은 함수 add1(6); // x에 7이라는 값을 넣은 함수의 y에 6이라는 값을 넣음 //output : 13 //함수 표현식 const add = function(x) { // 외부 함수 return function(y) ..
-
11일차...(배열)코드스테이츠 2022. 11. 3. 22:03
오늘은 배열을 배웠다. 음... 배우기 전에도 조금씩 배열을 써먹었던거 같다. 코플릿 문제 풀면서 메서드를 많이 했갈렸다. 배열 let arr = [1, 2, 3, 4]; //배열 arr[0] === 1; //index는 0부터 시작 arr[1] === 2; arr[0] = 10; //index 0인 요소를 10으로 변경 arr = [10, 2, 3, 4]; 순서가 있는 값 대량의 데이터를 쉽게 다룰 수 있다. 배열의 순서를 index라 하고 index의 값을 요소라고 한다. [](대괄호)안에 요소를 넣고 각 요소는 쉼표로 구분한다. index를 이용해 요소를 조회할 수 있다. 요소의 변경은 할당과 같은 방식이다. 배열의 길이 arr.length // arr배열의 길이, arr이 위 예와 같을 경우 ar..
-
6일차! (CSS의 기초)코드스테이츠 2022. 10. 27. 19:09
오늘도 어제처럼 많이 어렵진 않았다! 다만 외울것이 많을뿐!!! 여기서부터는 정말 처음이라 더욱 열심히 복습해야겠다. CSS(Cascading Style Sheet) CSS를 사용하면 인터페이스를 직관적으로 볼수 있고 그로인해 일반 사용자들이 보다 편리하게 사용할 수 있다. HTML로 뼈대를 만들고 CSS로 폰트, 여백, 레이아웃 등 여러 꾸미는 역할을 한다. .class { width : 100%; } .class 부분은 셀렉터로 HTML의 tag를 선택하는 부분이다. {} 부분은 선언 블록으로 tag의 형태를 바꾸는 선언들이 들어간다. width : 100% 선언으로 속성 명과 속성 값을 적는다. Text 요소 글꼴 - font-family 사이즈 - font-size 두께 - font-weght 밑..