본문 바로가기
반응형

컴퓨터/Front70

[JavaScript] 변수 선언 var let const 존재 범위 (2) 1편...🙂 https://gallery-k.tistory.com/352 변수 선언 존재범위 재선언 재할당 var function {} o o let {} x o const {} x x 변수 존재범위 존재범위: 사용할 수 있는 곳 function 함수(){ var 이름 = 'Kim'; console.log(이름); } 지금 var 로 선언된 '이름' 변수는 함수() 에서 선언되었고 var '이름' 은 지금 함수() 에서만 사용할 수 있다. var '이름' 의 존재범위는 함수()이다. var 존재범위: function function 함수(){ var 종족 = '토끼'; console.log(종족); //가능 } 함수(); console.log(종족);// 앙대 함수 안에서 선언한 var 는 그 안에서만 .. 2022. 8. 2.
[JavaScript] 변수 선언 let const 가 나온 이유, var let const 의 차이 (1) 글 쓰기 전에... 선언: let a 할당: a = 'a'; let const 왜나옴? var 는 예전부터 있던 애구 let 이랑 cosnt 는 새로 나온 애임 (es6) 예전에는 변수를 선언할 때 var 만 사용했다고 한다. var 는 엄청 자유로워서 한번 쓰면 또 쓸 수도 있고 값도 맘대로 바꿀 수 있다. 근데 너무 자유로우니까 문제가 많이 생기는거임.. var 로 선언했던거 까먹어서 한번 더 선언해버려서 값이 바뀌거나 하는 문제들이 생겼다고 한다. (원래 자유는 많을수록 문제도 많아지고 책임도 많아지니까ㅠㅠ) 그래서 ES6 에서 새로 문법이 나왔는데 (이제는 새로가 아니징...) 그게 바로 let 이랑 cosnt 이다. var let const 차이1 변수 선언 존재범위 재선언 재할당 var fun.. 2022. 8. 1.
[JavaScript] arrow function 뜻, 특징, 기존 function 과 차이점 (this 차이) 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) arrow function 메소드의 this 바깥의 this 값 = window{} eventListener 의 this 바깥의 this 값 = window{} arrow function? arrow function 은 function 처럼 쓸 수 있는 ES6 신문법이다. // 일반함수 var 함수 = function() { } // arrow function var 함.. 2022. 7. 31.
[JavaScript] 함수, function 뜻, 사용하는 이유 ES6 에서 arrow function 이라는 애가 나왔다. () => 이렇게 생긴 애인데 람다식 문법이랑 비슷하게 생겼다. 😫 그래서 arrow function 공부할 겸 함수 정리를 쭉 해보려구...🤔 함수 function 뜻 함수는 상자?.🎁 상자에 짐을 넣어놓을 수도 있고 꺼내 쓸 수도 있고 안에서 뭐 짐을 풀어놓거나 다른 짐이랑 합칠 수 있다.... 함수안에 그냥 데이터만 넣어놓을 수도 있고 데이터만 꺼내 쓸 수도 있고 파라미터 형태로 값을 넣고 기존의 데이터와 합칠 수 있다. (값 조작이 된다구) 그래서 함수를 사용하는 이유는 1. 긴 코드를 저장 2. 파라미터 사용하려구 함수를 사용하는 이유 1. 긴 코드를 저장 왜냐면 다른데서도 막 쓸려구 // 이렇게 만들어놓으면은 function 바보().. 2022. 7. 30.
[JavaScript] eventListener 에서 this 의 의미 (3) + e.currentTarge 의 뜻 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) 💜 this 의 뜻5_eventListener eventListener 의 this: e.currentTarget (=지금 이벤트가 동작하는 html 태그) 이벤트리스너를 달기 위해 버튼을 만들고 id 값을 '잉' 으로 설정해줬다. 잉 만들어진 버튼을 클릭하면 this 와 e.currentTarget 이 출력될 것이당 둘 다 같은 값이 출력되고 그 값은 지금 이벤트가 동.. 2022. 7. 27.
[JavaScript] constructor 에서 this 의 의미 (2) + instance 의 뜻 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) 💜 this 의 뜻4_constructor constructor 의 this: instance (= 새로 만들어지는 아가 object) 자바스크립트에서 constructor 를 사용하면 새로운 object 들을 만들어낼 수 있다. function 엄마 (이름) { this.name = 이름 }; 이렇게 엄마 constructor 를 만들었구 키값 name 앞에 this... 2022. 7. 26.
[JavaScript] object메소드, window, function(전역) 에서 this 의 의미(1) 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) 💜 this 의 뜻1_object 메소드 메소드의 this: 엄마{} 메소드는 object 안의 함수를 뜻한다. let 엄마obj = { 종족 : '토끼',// 이거는 값 이름메소드 : function(){// 이거는 메소드 console.log('버니'); }, 아가메소드: function(){ // 이거두 메소드 console.log(this); } } console.. 2022. 7. 25.
[JavaScript] window 의 의미, window object 에 들어가는 값, 전역변수가 저장되는 원리 window 뜻? 😮 window 는 엄청 큰 object 이다. 실제로 개발자도구에서 window 의 타입을 검색해보면 object 라고 나온다. window object 안에 들어있는 값🙄 window object 안에는 전역으로 쓸 수 있는 기본 함수들이 저장되어있다. alert, length 같은 함수들! 심심하면 개발자도구에서 window 입력하고 살펴봐도 좋당 그래서 🤩전역🤩에다가 함수나 변수를 선언하면 window object 에 저장된다. 무슨 뜻이냐면 a함수(); 로 출력한 결과랑 window.a함수(); 로 출력한 결과가 같음 왜 그러냐면 window object 에 저장되었기 때문이다. window 는 object 이기 때문에 window.어쩌구 이런식의 object 문법처럼 사용이 .. 2022. 7. 24.
[JavaScript] DOM 의 뜻, 자바스크립트가 html 을 해석하는 원리 DOM: Document Object Model DOM 의 뜻: 자바스크립트가 HTML (document)을 object 자료로 정리한 것 Document 를 Object 화 시킨 Model 이라는 뜻이다. 여기서 Doucment 는 html 을 뜻한다. 왜 html 을 Object 화 시켰냐면은 - 자바스크립트로 HTML 언어를 조작하기 위해서… - 자바스크립트가 해석할 수 있는 문법으로 변환해놓으려고 자바스크립트와 html 은 다른 언어이기 때문에 서로 인식을 하지 못한다. 그래서 자바스크립트가 생 html 을 조작하지 못한다. 이런 식으로 자바스크립트가 해석할 수 있게 하기 위해 object 화 시키는 것이다... html Object 화 자바스크립트가 html 언어를 조작할 때 이런 문법을 사용한.. 2022. 7. 24.
[html] Google fonts icons (material-icons)삽입하기 + Outlined, Rounded, Sharp, Twotone 추가하기 구글 폰트에 icons 가 있습니다. 개인적으로 font awesome, bootstrap 아이콘들보다 더 이쁜거 같아서 사용해보려고 했습니다. https://fonts.google.com/icons?preview.text=back&preview.text_type=custom Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google fonts 이쁘지 않나요?? 유형도 다섯개나 있습니다. 1. Google fonts 사용 방법 1-1. html head 부분에 링크 추가하기 https://google.github.io/material-design-icons/#getting.. 2022. 2. 6.
[html] 코딩애플 HTML/CSS All-in-one 강의노트 : (5) nav bar로 상단 메뉴 만들기, 태그 셀렉터 문법(공백, >) 배운내용 : - , , 태그로 상단메뉴 만들기 - 태그 셀렉터 활용하기 (자식 셀렉터) 1. 태그들 2. 셀렉터와 부모, 자식 태그 2-1 셀렉터 문법 공백 2-2 셀렉터 문법 > (5) nav bar로 상단 메뉴 만들기 1. 태그들 딱히 기능은 없지만, 의미있어보일려고 존재하는 태그들이 있다. : 섹션 표현하고 싶을 때 : 하단의 정보(footer) 표현하고 싶을 때 : 의미없는 문자들 감싸기 : div 같은 애 ... 얘네들 말고도 더 많다. 2. 셀렉터와 부모, 자식 태그 이중에서 맨 마지막의 nav 태그가 제일 대표적인 애인데, 기능은 div와 똑같음. 근데 이게 네비게이션 바인지 직관적으로 알 수 있으려고 쓰는거이다. ...html 영화 맛집 IT 컴퓨터 이렇게 태그 안에다가 , 태그들로 리스트.. 2021. 11. 23.
[html] 코딩애플 HTML/CSS All-in-one 강의노트 : (4) div랑 float https://codingapple.com/ 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절 codingapple.com * 이 사이트의 HTML 강의를 수강하고 적는 강의노트이다. * 개인공부용이다. * 쌤 말투 시크해서 넘 좋다. * 강의 예제 노출이 안되게 조심하자 [1. 박스배치??] 0. 박스배치 1. 태그 누르기 2. 하위 태그 누르기 3. 누르기 4. 하위 태그 누르기 [2. float 로 div 가로 배치하기] 1. div 박스 가로배치 문제점 2. float: left; 3. clear: b.. 2021. 11. 22.
[html] 코딩애플 HTML/CSS All-in-one 강의노트 : (3) CSS로 html 꾸미기_CSS 셀렉터 별 우선순위 https://codingapple.com/ 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절 codingapple.com * 이 사이트의 HTML 강의를 수강하고 적는 강의노트이다. * 개인공부용이다. * 쌤 말투 시크해서 넘 좋다. * 강의 예제 노출이 안되게 조심하자 [1. HTML과 CSS] 1. html 파일에 css연동하기 2. css에 style 넣기 [2. CSS 셀렉터] 1. class 셀렉터 2. id 셀렉터 3. 태그 셀렉터 4. html style [3. 셀렉터 우선순위] (3) CSS로.. 2021. 11. 18.
[html] 이미지 margin 과 padding 의 차이점 [0. 그림에 여백 주는 방법] 그림에 여백을 주는 방법에는 margin 과 padding 이 있다. margin 은 그림 바깥에 여백을 주고 padding 은 그림 안쪽에 여백을 준다. 이게 도데체 뭔 말인가..그림 안쪽에 어떻게 여백을 줌??? 그래서 직접 실험해보면서 둘의 차이를 공부했다. [1. margin : 그림 바깥에 여백] 0. margin 안했을 때 1. margin-left 했을 때 2. margin 했을 때 [2. padding : 그림 안쪽에 여백] 1. padding left 해주기 2. padding 만 했을 때 [3. margin과 padding의 차이] 1. 버튼에 margin 2. 버튼에 padding [1. margin : 그림 바깥에 여백] 0. margin 안했을 때 .. 2021. 11. 17.
[html] 코딩애플 HTML/CSS All-in-one 강의노트 : (2) HTML 꾸미기(CSS없이 꾸미기) https://codingapple.com/ 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절 codingapple.com * 이 사이트의 HTML 강의를 수강하고 적는 강의노트이다. * 개인공부용이다. * 쌤 말투 시크해서 넘 좋다. * 강의 예제 노출이 안되게 조심하자 [HTML 꾸미기] 1. style 속성으로 꾸미기 2. CSS로 꾸미기 [이미지 꾸미기] 1. 이미지 가운데 정렬 [글자 꾸미기] 1. 글자 가운데 정렬 [많이 쓸거같은 꾸미기 속성] ... [HTML 꾸미기] 1. style 속성으로 꾸.. 2021. 11. 16.
반응형

티스토리툴바