whatisthis?

this A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode. the value of this is determined by how a function is called (runtime binding). 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다. 즉, 선언이 아닌 호출에 따라 값이 달라진다. 단독으로 쓴 this = global object 함수 안에서 this = 함수의 주인에게 바인딩 (=window객체) 메서드에서의 this = 해당 ..

객체(object)를 완성하는 구성품 = 프로퍼티 + 메서드. 객체는 빈 껍데기에 불과한다, 데이터를 의미하는 프로퍼티 (property) 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메서드 (method) ___ 프로퍼티(property) 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 키 (key) 프로퍼티를 식별하기 위한 식별자(identifier) 값 (value) js 내 모든 값 - 값의 default 값은 string(문자열) 이다. 변수선언만 할경우 자바스크립트 엔진이 강제적으로 undefined를 할당하기 때문에 에러가 생길 수 있다. _..

재귀 함수 함수 내에서 자신을 다시 호출하는 함수. vs. 콜백 함수 자바스크립트는 함수를 변수로 저장(함수 표현식)할 수 있기 때문에 함수 표현식에 의한 변수를 함수의 인수로 사용하여 매개변수에 전달할 수 있다. 이때 함수의 매개변수에 전달되는 함수 표현식의 변수인 인수를 콜백 함수라고 한다. 즉, 함수의 변수로 들어가는 함수를 콜백함수라 함! 보통 자바스크립트에서 웹 페이지가 서버로부터 데이터를 수신하기 위해서 AJAX(Asynchronous JavaScript and XML)를 사용할 때 콜백함수를 많이 사용함. ** 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수임. 즉, 개발자는 함수를 등록하기만 하고 직접 ..

opacity 속성은 요소의 불투명도를 설정함. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대 개념임. opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖는다. opacity: 0.4; -> 자식 요소는 불투명하게 유지하고 싶다면 background 속성을 이용하자! background: rgba(0, 0, 0, 0.4); cf> rgba rgb라는 색상정보에 a는 알파 채널값을 부여하여 투명도를 조정 - 자식 요소를 불투명하게 하고싶을 때는 background 속성의 rgba를 이용해야함. opacity는 자식요소에는 상속되지 않기 때문. opacity:..

cursor cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다. ** cursor 속성의 속성값으로 올 수 있는 value 키워드 값 cursor: pointer; cursor: auto; URL, 대체 키워드 cursor: url(hand.cur), pointer; URL, 좌표 or 대체키워드 cursor: url(cursor2.png) 2 2, pointer; 전역 값 (Global values) cursor: inherit; cursor: initial; cursor: unset; REFERENCE REF: https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor - CSS: Cascading Style Sheets ..

https://mywebproject.tistory.com/107 HTML 훈련 - (9)GitHub Dropdown Menu GitHub Dropdown Menu REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에!.. mywebproject.tistory.com var dropdownMenu = document.querySelector(".dropdown-menu") var dropdownButton = document.querySelector(".dropdown-butt..

https://mywebproject.tistory.com/107 HTML 훈련 - (9)GitHub Dropdown Menu GitHub Dropdown Menu REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에!.. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxy..

GitHub Dropdown Menu Dropdown Menu란? GUI 요소 중 하나. 버튼 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 보통 그 버튼의 아래로 하위 메뉴들이 펼쳐지는 요소를 말한다. 풀다운 메뉴(pulldown menu)라고도 부른다. 마크업을 하기 위해서 블록단위로 각 부분을 어떻게 마크업 할지 생각해보자. 1. img 부분 이미지처럼 보이지만, 이미지를 누르면 드롭다운 메뉴가 나타나는 동작을 하므로 이미지가 아니라 일종의 버튼(button)임을 알 수 있다. 이미지도 유저의 프로필 사진이라는 의미가 있는 이미지이므로, img 태그를 이용한다. 이때, 버튼의 기능을 명확히 해주기 위해서 aria-label을 사용하는 것이 좋다. button의 필수 속성인 type에는 type..

1. 여러 요소를 동시에 선택 .class1, .class2, .class3 각 선택자마다 쉼표(,)로 구분할 경우 각각의 항목을 OR로 적용함. 즉, class1, class2, class3 모두에 스타일이 적용됨. .class1 .class2 .class3 쉼표 없이 공백으로 구분하여 사용시 뒤에 나온 선택자가 하위 개체로 지정됨. 즉, class1 ㄴ class 2 ㄴ class 3 으로 지정되고, class1 요소 내부의 class2 요소 내부의 class3 요소에만 스타일이 적용됨. .class1.class2.class3 공백 없이 연결해서 지정시 class="class1 class2 class3"에 해당하는 요소에만 스타일이 적용됨. 즉, AND 처리 되는 것. (class1이면서 class2..

https://mywebproject.tistory.com/104 HTML 훈련 - (8) Receipt REFERENCE (style.css) https://github.com/rohjs/bugless-101/blob/master/html-practice/07-instagram-user-profile/styles.css https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%.. mywebproject.tistory.com @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap"); * { margin: 0; box-si..