html,css,js

html이란?=>hyper text markup language웹페이지 표시를 위해 개발된 마크업 언어제목,목록,같은 구문을 구조적으로 나타낼 수 있다첫날에는 기본적으로 html의 기본개념부터 시작하였다.우리가 보는 모든 브라우저는 html로 사용자에게 보여진다.vsc

오늘은 ul,ol태그와 li 태그, 그리고 table태그에 대해 배웠다.주제는 부모태그와 자식태그의 관계정도다.번호가 매겨진 리스트가 표시된다. ol안에는 항상 li태그가 자식처럼 따라 붙는다.이렇게 하면ol태그는 li와1.한쌍이렇게 나온다.(추가로 start란 att

오늘 배운 영역을 크게 나누면 3가지이다. > 1.css 2.input 3.display 1번 안에 나머지 2개가 포함되지만 css에서는 생성자에 대해 주로 알아보려 한다. 1.css 기존에 알고있던 css는 클래스 생성자만 알고 있었다. 태그,id로 하는 것은 잘

오늘 배운 주제는 크게 두가지 이다. background,그리고 position사실 둘 다 너무 많이 쓰기 때문에 짧고 굵게 공부했다고 할 수 있다.background-color와 같은 색을 넣는 법은 이미 배웠으니 이미지를 넣는 방법을 알아보자백그라운드 이미지는 ur

오늘 배운 것은 크게 세가지이다.1.연산자(조건자)2.animation3.media연산자는 css를 유동적으로 설계 할 수 있게 해준다.자신의 태그 바로 인접해 있는 형제 태그를 지칭할 수 있다.이런식으로 말이다. hover,input인 경우 checked를 적용 할

밑에 버튼과 카카오 이미지를 position:fixed로 고정시켜 주었다. 스크롤 할 때마다 저 부분은 움직이지 않는거다... 하지만 여기서 문제가 발생하였다.버튼 같은 경우는 margin:auto와 bottom:5px로 어찌저찌 고정 시켰는데 카카오 이미지가 원하는데

input에 onchange를 줘서 리액트 때 날먹했던 기억이 있다.하지만 vanilla js의 세계는 냉혹했다....addEventListener('change')로 인풋의 변화를 감지하여야 한다.하지만 문제가 생겼다. change이벤트는 인풋에서 focus가 벗어나

지금까지 typeof로 했다. 그러지 말자5는 숫자라는 사실을 알았다. ㄷㄷㄷㄷ컴파일 언어와 인터프리터 언어개념컴파일러 언어:프로그램 코드를 컴파일해서 컴퓨터가 알아들을 수 있는 기계어로 번역 해준다. 소스코드 전체를 한 번에 번역하고 실행파일을 만들어서 실행해준다.

전설의 자바스크립트 사이트 mdn에 따르면hoisting의 정의는 다음과 같다.JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undef

오브젝트 내에서 많은 함수를 선언 했지만 가끔 key에 대한 value로 함수를 넣을 때 익명이라는 사실을 잊는다. 이번엔 잊지말자.데이터를 가져왔을 때 가끔 썼었던 기억이 있었다.indexOf는 해당하는 value가 없으면 -1을 변환시킨다. 있다면 해당하는 값의 i

length라는 메소드를 일반 함수에도 쓸 수 있었다. 사실 처음에는 이것이 가능한지 검색조차 하지 않았다. 당연히 ... 없겠지... 싶어서 없다 생각했다.하지만 가능 했었다.함수의 length는 그 함수의 매개변수의 개수를 의미했다!3데이터를 전달할 때 필요한 매개

쿼리 셀렉터는 css랑 선택자랑 똑같이 작용한다는 것이 편리한 것 같다.3x4 행렬의 한 타일을 클릭했을 때 그 타일이 img태그를 가질 때 삭제하고 싶었다.div태그 안에 있는 특수한 아이디를 가진 태그를 remove로 삭제했다.

하나의 태그를 변수로 만들어서 js상에서 조작할 수 있다.이렇게 되면 \_div라는 변수는 div태그가 저장된 주소를 가리키는 변수가 된다.다양한 변화를 줄 수 있다.이러면 \_div가지고 있는 div태그 안에 innerHtml에서 입력한 문자및 태그와 classLis

생각보다 간단하다 마치 localstorage를 보는듯 하다.local storage의 개수저장된 로컬 스토레지의 수가 나온다.local storage 키값 호출key 안은 당연히 인덱스이다. 그 인덱스에 맞는 키값이 나온다!css2.html기본적으로 box안에 있는

2.css3.js변수 저장팝업 버튼은 누르면 팝업이 사라지는 버튼이다.팝업 이벤트는 팝업 창 내에서 쿠키를 저장시키는 용도이다.팝업 쿠키는 event-popup를 키로 가진 cookie의 value를 가져오는 역할을 한다.팝업창 온/오프를 결정하는 함수display:b

기본적인 배열기본적인 배열이다.구조분해 할당(배열)구조 분해 할당은 배열에서 인덱스 순서에 따라 변수에 값을 할당하는 문법이다.할당되는 값이 없다면 undefined가 된다.오브젝트에서 구조분해 할당해당 변수가 object구조면 {}를 이용해 미리 변수를 선언해서 편리

옵션 체이닝이란 각 키에 해당하는 value를 확인하고 없을 경우 type에러가 나지 않게 undefined를 던져준다. 리액트에서 사용자의 정보나 다른 데이터를 가져올 때 유용하게 쓸 수 있을 것 같다.생성자함수게시글이 생성될 때마다 다음과 같은 파라미터를 구조분해할

try-catch문은 기본적으로 오류를 잡는 역할을 한다. 오류가 나도 기능이 멈추지 않고 계속 유지되며 catch로 err를 return한다.isNaN() 함수는 문자열,숫자를 판별한다.근데 우린 문자열에 parseInt를 주었는데도 isNaN은 true를 뱉었다.사

java와 다른 객체지향 언어에서 많이 사용한 class이다. 사실 리액트에서 함수지향을 사용했기 때문에js에서 class는 사용해본적이 별로없다생성자를 이용해 this로 객체를 생성할시 해당 변수에 할당되도록 한다.static으로 전역 함수를 만들면 java와 마찬가

프로토 타입의 정의와 활용이런 코드가 존재 할 때 우리는 생성자를 이용하여 객체에 직접 값을 주입할 수 있다.이 때 객체에 직접 할당하는 방식이라 만약 새로운 객체를 만든다면 stop이라는 함수는 사용할 수 없다.그러나 prototype을 이용하여 생성자 함수에 직접

set은 중복값을 허용하지 않으므로 console은 위와 같이 찍힌다.배열을 직접적으로 추가할 수 있고, has함수로 요소의 존재유무를 확인 할 수있다.delete로 제거할 수 있다.set은 이터러블 하다. 즉 이터레이터를 반환 할 수 있다.많이 봐 왔던 HashMa