whatisthis?

HTML href=" " 태그로 외부 CSS파일을 불러올때 사용 태그에 url을 입력할 때 사용 src=" " 로 외부 js파일을 불러올 때 사용 태그에 url을 입력할 때 사용 link인 경우 href link가 아닌 경우 (이미지,비디오 등) src CSS url( ) CSS 코드 또는 HTML의 에서 특정 파일을 불러올 때 사용 background-image: url("../images/google.png"); REFERENCE https://developer.mozilla.org/ko/docs/Web/HTML/Element/link : 외부 리소스 연결 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. 는 스..

https://user-images.githubusercontent.com/19285811/69063907-43da4800-0a58-11ea-8efb-4b57dca4e3fe.png The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science. — Albert Einstein Feed 우선, 최소한의 기능 단위로 나눠보자. 마크업을 하기 전에 꼭 해야 함! index.html Kimbug 30 min Follow The most beautiful experience we can have is the myste..

Input Group 연습하기! 마크업 부분 나누기. 1. h1과 paragraph Manage Subscriptions You can follow the discussion on @kimbug without to leave a comment. Cool, huh? Just enter your email address in the form here below and you are all set 2. input 태그와 button Subscribe button type = submit 을 이용하여 폼을 제출해야하므로, form 으로 반드시 감싸줘야한다. method는 GET 을 사용한다. https://mywebproject.tistory.com/73 etc) HTTP - GET 방식 vs POST 방식 G..

ECMA Script 기준. ❗ 객체의 구성 1. Built-in Object(자바스크립트 내장객체) Built-in Object 에는 Global, Object, String, Number, Boolean, Date, Array, Math, RegExp, Error 등 많은 내장객체들이 존재한다. 이들은 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트코드 어디에서든 사용이 가능하다. 2. Native Object(브라우져 내장 객체) Native Object 역시 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체 들이다. 하지만 이들은 자바스크립트 엔진이 구성하는 기본객체라고 하기 보단 브라우져 즉 자바스크립트 엔진을 구동하는 녀석들에서 빌드되는 객체 들이다. 자바스크립트 프로그..

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 ..

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