WEB

[WEB/클론코딩] 넷플릭스 클론코딩 (2)

과제가 너무 많아서 오늘은 많이 하지 못했다ㅠㅠ 어제의 클론코딩은 블로그를 참고해가며 했는데, 오늘은 넷플릭스 홈페이지를 보며 한국버전(?)으로 새로 클론 코딩해봤다. main.html 로그인 영화와 시리즈를 무제한으로. 다양한 디바이스에서 시청하세요. 언제든 해지하실 수 있습니다. 시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하려면 이메일 주소를 입력하세요. 시작하기 > Cancel at any time Watch anywhere Pick your price style.css /* Global Styles */ :root { --primary-color: #e50914; --dark-color: #141414; --light-color: #f4f4f4; } * { box-sizing: border..

[Web 클론코딩] 넷플릭스 클론코딩

저번 유튜브 클론코딩은 그냥 강의를 보고 모르는 부분 참고해가며 했다. 그런데 넷플릭스 코딩은 뭐 어디 참고할 곳도 없고ㅠㅠ 너무 막막해서 일단 클론코딩의 방법에 대해 공부했다. 아래 블로그는 도움을 많이 받은 블로그 https://m.blog.naver.com/aurora2337/222138829266 클론코딩 방법 출처: https://geonlee.tistory.com/171 클론 코딩이란? 실제 존재하는 서비스(인스타그램, 카카오톡, 에어... blog.naver.com 현재까지 진행상황이다. 이것만 보면 거의 다 한 것 같지만 화면 모양만 html, css로 구현해둔거라 아직 시간이 많이 필요하다. 내일 할 것은 아래 사진 부분 클릭하면 넘어가는 것을 자바 스크립트로 구현해볼 것이다.

[WEB] youtube 클론코딩

Day18~ 진행중... 내일 오전중으로 끝내는 것을 목표로.. javascript, html, css 활용해서 유튜브, 에어비엔비 클론코딩 프로젝트 진행하기 Youtube #sheep #forest #healing 힐링되는 양의 평화로운 모습 모음 조회수 114,901회 | 2020. 3. 14. 루다 구독자 1.17천명 구독 다음 영상 힐링되는 개발자 입문 영상 1 루다 조회수 8,001회 힐링되는 개발자 입문 영상 2 루다 조회수 7,001회 힐링되는 개발자 입문 영상 3 루다 조회수 10,121회 :root { /* color */ --white-color: #fff; --black-color: #140a00; --blue-color: #045fd4; --red-color: #ff0000; --g..

[ES6/Javascript] 비구조 할당

Day17 왜 낮에는 집중이 안될까,, 벌써 17일차!!! ES6 비구조 할당 구글링해보고 실습하기 들어가기에 앞서, ES6의 비구조화 할당(Destructuring Assignment)이란? : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 비구조화 할당의 장점은? 배열, 객체 내 값을 추출하는 코드가 매우 간단해진다. 필요한 객체와 나머지 요소 분리가 매우 간단하다. 기본값 지정이 가능하다. 1. 배열의 비구조 할당 ES6전 코드 let dogbreed = ['retriver', 'bordercollie', 'poodle']; let retriver = dogbreed[0]; let bordercollie = dogbreed[1]; let poodl..

[ES6/Javascript] 변수 선언(let, const), 화살표 함수 선언

Day 16~~ 오늘은 ES6 문법을 배워 볼 것이당당 var말고 변수 선언 할 수 있는 것이 이렇게나 많다니~~ 어서 배워보자 ES6 문법을 통해 변수 선언(let, const), 화살표 함수 선언 구글링해보고 실습하기 ES6란? ES란 ECMAScript의 약자로, Ecma에서 표준안으로 정한 내용이다. 그 중에서도 ES6은 ECMAScript 2015로 ES 표준의 가장 최신버전이다. ES6로 변수선언하기 - let 다른 값이 재할당 될 수 있다. let myDogBreed = 'retriver'; myDogBreed = 'labrador retriver'; console.log(myDogBreed); ES6로 변수선언하기 - const const는 constant(상수)의 줄임말로 '늘 같은 수'..

[Javascript] 로컬 스토리지

Day 15 큰일이다.! 당장 이틀 후가 실습이라니ㅠㅠ 내일 오후에 앉아서 다시 다 정리해야겠다... 로컬 스토리지 개념 구글링해보고 실습하기 로컬 스토리지 : 사용자(로컬)에 저장하는 임시 저장소 (간단한 데이터 저장) : 영구적이다 (세션 스토리지와의 차이점) : 객체의 LocalStorage라는 컬렉션을 통해 저장, 조회가 된다. 로컬 스토리지를 이용한 데이터 저장 // 데이터 저장 localStorage.setItem(이름, 저장할 내용); // 데이터 불러오기 localStorage.getItem(이름); // 데이터 삭제 localStorage.removeItem(key) // 모든 것 삭제 localStorage.clear() // index에 해당하는 키 소환 localStorage.key..

[Javascript] 이벤트 리스너

Day 14 이벤트 리스너 개념 구글링해보고 실습하기 Javascript 이벤트 DOM에서 특정 이벤트가 발생하게 되면 자바스크립트 이벤트 객체에서 확인할 수 있다. 이벤트 리스너란? 간단하게 해당 이벤트에 대해 대기중인 것을 이벤트 리스너라고 한다. (이벤트가 실행되는 것을 리스닝 중) 해당 이벤트가 발생하면 등록해둔 이벤트 리스너가 실행된다. 이벤트 종류 UI 이벤트 : 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 경우 키보트 이벤트 : 사용자가 키보드를 이용할 경우 마우스 이벤트 : 사용자가 마우스나 터치 화면을 사용할 경우 포커스 이벤트 : 사용자로 특정 요소에 포커스를 하거나 포커스를 중지할 경우 이벤트 리스너 사용하기 addEventListener() : 특정 이벤트가 발생할 경우 특..

[Javascript] html 문서(DOM)에 접근하기

DOM 이란? DOM (Documment Object Model = 문서 객체 모델) HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서 한마디로, 웹 페이지를 다루는 인터페이스 더 쉽게 설명하자면... (사실 내가 이해가 안돼서 더 찾아봄ㅋㅋ) HTML은 화면에 보이는 구조를 단순 텍스트로 구성한 것이고, DOM은 이 HTML 문서의 내용이랑 구조를 객체 모델로 바꿔서 다양한 프로그램에서 사용할 수 있게 하는거다. 웹브라우저에서 HTML 파일을 받아 DOM으로 만들면 자바스크립트를 통해 여러 가지 조작이 가능(API제공)하다. DOM 요소의 접근 방법 매서드 설명 document.getElementByld("id명") 해당 id명을 가진 요소 하나를 ..

[Javascript] 자바스크립트 함수 선언 & 호출

Day12~~ 함수 선언 방법에 대해서 구글링해보고 실습하기 자바스크립트 함수 선언하는 5가지 방법 파라미터를 사용하는 함수는 그냥 ()안에 파라미터만 넣어주면 되기 때문에 생략 1. named function declaration (명명 함수 선언) function hello() { //함수 내용 } 2. anonymous function expression (익명 함수 표현) 이름이 없는 함수를 변수(hello)에 담은 형식 var hello = function () { //함수 내용 } 3. named function expression (명명 함수 표현) var hello = function originalName() { //함수 내용 } 4. Immediately-invoked expressio..

[Javascript] 객체 & 배열

Day 11~~ 객체와 배열 개념 구글링해보고 실습하기 여기서 잠깐 이 전까지는 javascript를 그냥 html 파일 내에서 선언해서 사용했는데, 참고하는 강의를 옮기면서 파일 분리를 하고 console창(ctrl+shift+i)에서 띄우는 방식으로 진행했다. 객체(Object) : 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 (쉽게 생각하면 붕어빵의 틀 같은 느낌) 객체의 특징 변수이나 하나의 객체에 많은 값이 포함될 수 있다. 중괄호 표기를 통해 객체를 생성할 수 있다. key : 문자열 or 기호 value : 모든 유형 가능 properties : 객체에서 명명된 값 객체 변수를 복사하면 참조가 복사된다. (객체가 복사되는 것이 아니다) 객체의 종류 배열 함수 객체 날짜 수..

[Javascript] 조건문 / 반복문

Day 10!! 조건문 / 반복문 개념 구글링해보고 실습하기 조건문 if문 : 조건에 부합하는 경우 조건문 아래 내용을 실행한다. var num = prompt('점수를 입력하세요','0~100사이의 정수'); if(num >= 70){ alert('합격입니다'); } - prompt함수 : 사용자에게 문자열을 입력받은 함수 - if문에 부합하면 (num이 70보다 클 경우) 경고창에 합격이라고 띄워준다. if문을 응용해서 쓸 수 있는 것들은 if else, if else if 등이 있다. switch문 : 조건 경우(switch 뒤에 들어오는 조건)에 따라 명령을 각각 지정하는 구문 나머지는 다른 문법과 비슷해서 생략한다. - [new Date().getDay()] : 오늘의 요일을 숫자로 반환한다. ..

[javascript] 변수 선언(var), 디버깅(console.log)

Day 9 !! 변수 선언(var), 디버깅(console.log) 방법 찾아보고 실습하기 변수 선언 1. var : 중복 선언이 가능하다. 선언함과 동시에 값을 할당할 수 있다. ,(쉼표)를 통해 여러 개를 한 문장으로 선언할 수 있다. 지정된 초깃값 없이 선언된 변수는 undefined 값을 갖는다. var sum; // 변수 sum을 선언. undifined var a = 3; // 변수 a를 선언함과 동시에 3을 a에 할당 var b, c, d; var e = 1, f = 2, g = 3; // 여러 변수를 한 번에 선언 및 초기화 가능 위는 변수 var의 특징을 잘 보여준다. 디버깅(console.log) 디버깅이란? : 컴퓨터 과정에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 ..