본문 바로가기
반응형

[자기계발]/유튜브로 코딩배우기

반응형
[자기계발]/유튜브로 코딩배우기 2021. 1. 26. <생활코딩> 많이 보이는 DATABASE 살짝 맛보기 DATABASE 란 database에서 가장 중요한 것은 어떻게 입력하고 출력하는 가를 따져보는 것이다. 입력(Input) - [생성(create), 수정(update), 삭제(delete)] 출력(Output) - [조회(read)] 이 4가지 작업을 줄여서 'CRUD' 라고 한다. #파일시스템은 원하는 정보의 검색하는데 불편하다. (다른 정보가 들어있는 메모장 파일 여러개를 만들어두는 것) #Spreadsheet , MS의 xl 같은 제품을 이용하면 구조적으로 데이터를 관리할 수 있어 편리하다. 엑셀에서 ID/ TITLE/ DESCRIPTION / CREATED / AUTHOR / PROFILE 이렇게 분류하고 각 컬럼을 눌러서 'data - filter' 기능을 이용하면 구조적으로 정리가 가능하다...
[자기계발]/유튜브로 코딩배우기 2021. 1. 25. <유튜버 - 생활코딩> WEB2 - JavaScript 34~ JS파일로 쪼개서 정리 하기 1. 파일로 만들어서 배포하기 style.css 처럼 하나의 파일을 안에 넣어서 1억개가 넘어도 한 번에 적용시키는 방법을 이용해야 한다. color.js 파일을 따로 만들고 function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === 'night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; self.value = 'day' } else { target.style.backgroundColor = 'pink'; target.style.color = 'white'; self.value = 'night'; } } 이것..
[자기계발]/유튜브로 코딩배우기 2021. 1. 22. <유튜버 - 생활코딩> WEB2 - JavaScript 29~ 33객체 1. 배열이란? console 에서 var coworkers = ['sung', 'yaya'] 을 배열을 묶어주고 coworkers[0] 을치면 sung 이 나오고 [1]을 치면 yaya가 나온다. 정보의 양이 많아졌을 때 서로 연관된 정보를 정리정돈하기 위한 도구 정보를 담는 그릇이면서 순서에 따라서 정보를 정리정돈하는 특징이 있다 그렇다면 순서 없이 정보를 저장하는 도구도 있지 않을까? = 객체 =이름이 있는 정리정돈 상자 2. 객체의 문법 coworkers라는 변수에 객체를 넣는 작업을 할 것이다. 배열은 대괄호, 객체는 중괄호를 쓴다. DOCTYPE html> object Create var coworkers = { "programmer": "sung", "designer": "yaya" }; d..
[자기계발]/유튜브로 코딩배우기 2021. 1. 22. <유튜버 - 생활코딩> WEB2 - JavaScript 24~ 1. 함수(function) 항상 공부를 할 때 과장되게 코드가 1억개 짜리 굉장히 복잡한 코드라고 생각하면서 접근해야한다. 코딩을 하다가 새로고침해도 적용이 안되면 코드가 잘못된 것이니 개발자도구 console로 들어가면 어떤 것이 잘못됐는지 알려준다. 보고 고치면 끝~ Function Basic 만약에 document.write('1'); document.write('2-1'); document.write('2-2'); document.write('3'); document.write('2-1'); document.write('2-2'); 이렇게 나열을 해야할 때 1억개가 있다고 생각하면 답이 없다. 반복문을 쓰면 될까 했지만 이것은 연속적으로 반복되는 것이 아니기에 쓸 수가 없다. 여기서 쓸 수 있는..
[자기계발]/유튜브로 코딩배우기 2021. 1. 19. <유튜버 - 생활코딩> WEB2 - JavaScript 14~ #태그 색상 입히는 법: 화면 오른쪽 아래에 html 누르시고 뜨는창에서 auto detect 누르기 #비교 연산자, 블리연, IF 조건문 1. 비교 연산자 - === - 이항 연산자 1+1=2 +라는 이항 연산자는 왼쪽과 오른쪽의 값을 더해서 2가 되는 것 1===1 이 이항연산자는 만약에 같다면 true라는 값을 갖는다. ===라는 비교 연산자는 좌항과 우항의 관계에 따라서 true / false를 만들어 내는 연산자이다. 2. 블리언 {} true와 false 값을 묶어서 'Boolean'이라고 부른다. 데이터 타입의 종류 1. Number 2. String(문자열) 3. Boolean(단 2개의 데이터 타입) 이것을 통해 인류는 단순 반복에서 해방되었다. HTML에서는 ''가 html에서는 태그의..
[자기계발]/유튜브로 코딩배우기 2021. 1. 16. <유튜버 - 생활코딩> WEB2 - JavaScript 웹페이지를 동적으로 사용자와 상호작용 할 수 있도록 기능을 추가한 것이 자바 스크립트 ex) 게임 1. JavaScript를 넣는 방법 웹브라우저한테 HTML의 코드로 지금부터 J.S가 시작됩니다를 알려 줘야 한다. 웹브라우저는 사이에 있는 코드를 j.s로 해석한다. 어느 태그 밑에 써야하는 것은 아니고 사이에 넣든 사이에 넣기. 안에 넣을 시, 중간에 하고 싶은 말 or '' 선택자 class=xx사용시 .xx 을 쓴다. 선택자 id-:"xx" 사용시 #xx을 쓴다. 8. 실전 구글링해서 나온 코드들의 대소문자 구분은 중요하다. 마음대로 바꾸면 안된다. 구글링: javascript select tag by css selector document.querySelector(".example"); 웹브라우저..
[자기계발]/유튜브로 코딩배우기 2021. 1. 13. <유튜버 - 생활코딩> WEB2 - CSS - 2 #html 기본 형식 #박스 모델 윤곽 배우기 h1 태그는 화면 전체를 쓴다. 줄바꿈을 알아서 해버린다. - 블럭 전체 쓰는 것이 더 편함 a 태그는 똑같은 태그이지만, 줄바꿈이 되지 않고, 다른 콘텐츠들과 같은 라인에 위치하고 있다. - 화면 전체를 써서 링크 앞 뒤에 있는 콘텐츠가 줄바꿈이 되면 불편함 고로 no 줄바꿈, 딱 자기의 콘텐트 크기만큼을 쓴다 이 둘의 차이점을 알기 위해 테두리를 넣어보자! 태그 사이에 h1{ border-width:5px; border-color:red; border-style:solid; } a{ border-width:5px; border-color:red; border-style: solid; } 를 집어넣고 사용. border는 테두리이고 width-두께, col..
[자기계발]/유튜브로 코딩배우기 2021. 1. 12. <유튜버 - 생활코딩> WEB2 - CSS 1. HTML로 색깔 바꾸기 이렇게 하면 폰트를 red, blue ,yellow 등으로 바꿀 수 있다. 이렇게 하면 사이의 코드가 무시된다. 2. CSS 적용 디자인과 관련된 것은 이 안에 들어있는 것 / HTML은 정보에 전념한다. a는 이 웹 페이지에서 주고 싶은 효과를 누구에게 줄 것인가를 선택한다. a = selector 라고 부른다. 이 선택자에게 지정될 효과를 효과라고도 하고 선언 declaration 이라고 한다. = color:색깔; color = Property, 속성 red = proverty의 값. 즉, proverty Value CSS를 적용하면서 얻을 수 있는 좋은 효과는 웹페이지를 디자인할 떄 HTML을 이용해서 디자인 하는 것보다 훨씬 더 효율적이다. 왜냐하면 만약에 1번처럼 ..

티스토리툴바