https://thecatapi.com/ The Cat API - Cats as a Service. A public service API all about Cats, free to use when making your fancy new App, Website or Service. TheCatAPI.com 랜덤 고양이 사진을 제공하는 API promise, axios 예제를 다룰 때 사용했다. 해당 api의 키 값을 사용해 url을 통하여 이미지를 랜덤으로 받을 수 있는데 사용 방법은 아래와 같다. 1.사이트 접속 2.메인에서 get your api key - 본인 이메일로 api 키를 발급받는다. 나는 개인 스터디용이라 Signup for free를 선택함. 대강 내 이메일과 함께 이유에는 js 공부한다..

## this용법 1. Tag inline 이벤트 속성에 작성한 this는 tag객체 자신을 가리킨다. ```html ``` 2. 객체메소드(일반함수)의 this는 현재객체를 가리킨다. ```jsx const user = { username : '홍길동', run(){ console.log(`${this.username}이/가 달린다~`); } } ``` 3. 생성자함수(new연산자 호출)안 this는 현재객체를 가리킨다. ```jsx function Pet(name, breed, weight, age, ...colors){ this.name = name; this.breed = breed; this.weight = weight; this.age = age; this.colors = colors; } `..

1127은 시험/실습으로 진도를 나가지 않았다. input 태그 id:해당 페이지에서 유니크한 변수명 name:실제로 전송에 필요한 속성값 첫글자는 반드시 영소문자 아이디의 길이는 4-12길이 =>첫글자제외하고 3,11 addEventListener onSubmit return false(); return false(); x e.priventDefault(); 유효성 검사 코드는 submit핸들러 호출 시 실행한다. 여기서 유효성검사를 통과하면 실제 제출/ 아니면 prevent로 막는다. http://latentflip.com/loupe http://latentflip.com/loupe/ latentflip.com

클로져,구조분해할당 과제 리뷰 完 prototype:예전타입 class: prototype을 개선 목차 19.WINDOW객체 20.BOM(Browser Object Model) 21.EVENT처리 19.WINDOW객체 window -브라우저 최상위 객체 -탭 별로 하나씩 존재한다. -BOM: Browser Object Model - navigator,history,screen.. -DOM: Document Object Model - document(내가 만든 html문서) -Javascript object(객체) -등등.. open -새 창(탭/팝업)을 여는 함수. -새 창의 window 객체를 반환. 해당 창에 대한 제어 가능. const newWindow = open ("01_hellojs.html"..

1117실습문제 리뷰 //2. 폼단위 // document.querySelector("[name=purchaseFrm]"); // document.forms[0] // document.forms.purchaseFrm document.purchaseFrm.reset(); // 폼하위의 input태그 value속성 초기화 document 객체 중에 몇개는 이렇게 접근 가능하다. document.forms[0]; document.네임값 즉, document.purchaseFrm 으로도 접근이 가능함. name만 가능하고, id는 불가능하다. css javascript

16실습과제 리뷰 사진갤러리 만들기 flexbox or float 안겹치고 배치되는것 static relative , absolute등을 사용해서 원본이미지와 겹쳐서 큰 이미지 출력 position:relative 부모의 left top이 기준->offset 적용 동일한 이미지 두개를 준비하여 하나는 갤러리리스트처럼 두고, 나머지 하나는 크기n배/숨겨서 마우스 호버시에만 나오게 하기. visibility:hidden; :hover 형제 이미지 visibility:visible; ----- 컨테이너에서는 width:900px이런식으로 너비 고정함. --- float 띄워서 왼쪽/오른쪽으로 보내기 float:left float:right footer clear:both(float무효화 both) float과..

-repaet(기본:켜져있음) 이미지 반복 -position center, 50% 100px 등등 다양한 키워드로 위치를 지정할 수 있다. w3school 에서 실습 가능 -size 배경이미지 크기 지정 contain : x축 또는 y축이 꽉찰 때까지만 확대/축소 요소를 채우지 못할 수 있음. cover : 요소를 모두 채울때까지 확대/축소 (이미지 잘릴 수 있음..) -attachment scroll(기본값) fixed(고정) 정렬을 하려는 요소가 인라인인지 블락인지 타입부터 확인해야 한다 인라인:인라인 요소 자체를 정렬 불가능 해당 인라인을 감싸고있는 부모를 정렬해야함. 블락:해당 요소 자체 정렬 가능. 가상클래스:어떤상황 호버(마우스올림),클릭 #bar2:hover 가상요소:요소가있는것처럼 요소를 ..

목차 01_hellocss.html 02_selector.html 03_selector_priority.html 04_font.html 05_alignment.html 06_text.html 07_layout_boxmodel.html 08_border.html 09_layout_display.html (각 html별 css파일도 있음) 01_hellocss 태그에서 직접 스타일을 지정하는 것은 지양한다. ex) inline style 속성 아래처럼 css 파일을 따로 만들면 사용/관리하는데 용이하다. 02_selector 1.자식 , 후손 선택자 2.형제 선택자 3.가상 클래스 선택자 4.가상 요소 선택자 03_selector_priority(선택자 우선순위) https://velog.io/@sophia..

오전:어제 강의 복습 -file - save workspace as - 내가 사용할 프로젝트 폴더 경로에 파일 저장. 해당 파일 실행하면 그 경로에 있는 (생성/실행했던) 프로젝트들이 editor list에 나옴. =>매번 vsc 실행 하지 않고 파일만 실행하면 됨. -gitignore:설정하지 "않을" 파일들 작성(무시할 파일만) -branch 생성 시 보통 목적/이름 이런식으로 네이밍하는게 보기 편함. ex) bugfix/texttest -3-way merge : base / commit1 / commit2 - true merge 이 개념이 좀 헷갈리는데.. 기존의 master에서 작업이 2가지로 분리 됨 master-master / master - feature/animal 이런 경우엔 빨리감기 병..