몸을쓰라곰 몸을쓰라곰

35강 라이브러리와 프레임워크 오늘날 트렌드 : 다른 사람이 잘 만들어 놓은 것 부품삼아 내가 만들고 싶은 것 만들기 라이브러리(library) : 부품이 되고, 재사용하기 쉬운 소프트웨어들 잘 정리해놓은 곳-> 내가 만들고 있는 프로그램의 부품을 가져와서 쓰는 느낌프레임워크(framework) : 언제나 필요한 공통적인 것 / 기획 의도에 따라 달라지는 것-> 프레임워크 안으로 들어가서 작업함 jQuery : 자바스크립트 라이브러리 중에서 가장 유명한 것jQuery 사용할 수 있는 방법1)jQuery 홈페이지 접속2)CDN(Contnent Delivery Network)-많은 라이브러리들이 CDN을 통해 자신들의 서버에 파일 보관 -사용자는 태그의 src 속성을 통해 가져감-Google CDN에서 jQ..

29강 객체 예고 정리 정돈 수단으로서의 객체 배워보자함수와 변수가 많아지면 어떻게?- 서로 연관된 함수와 변수를 같은 이름으로 그루핑해서 잘 정리 정돈하기 위한 도구로서의 객체(object)  배우기중복된 코드를 함수로 독립시켜보자1) a태그 색상지정 함수 만들기2) body태그 글자 색상지정 함수 만들기3) 각 함수 겹치지 않도록 이름 붙여주기4) body태그 배경 색상시정 함수 만들기5) 함수의 이름을 바꾸는 것도 방법이지만, 지금 같은 상황에 연관된 것 나누는 수납상자 역할을 객체가 할 수 있음6) Body라는 객체와 Links라는 객체를 .를 통해 구분시켜주기7) document도 객체다. document.querySelector()에서 querySelector()은 document라는 객체에 ..

24강 함수 예고함수(function)는 코드를 잘 정리 정돈할 수 있는 수납상자이전 시간에 만들었던 태그가 많아졌을 때, 태그의 powderblue부분을 한꺼번에 다른 색으로 바꾸려면 어떻게 해야할까?함수 function를 만들어서 해결할 수 있다! 어떻게?1) 태그의 중복된 부분을 지우고, 태그를 가져와 붙여넣는다.2) 가져온 코드에 이름을 붙이자. nightDayHandler(self){코드}3) 이름 앞에 function을 붙여주면 nightDayHandler라는 기능을 부여하겠다는 뜻4) 그런다음 다른 태그에 nightDanHandler(this);를 넣어서 실행시킬 수 있다!5) 그러면 태그 함수부분의 powderblue만 바꿔주어도 다른 태그에 모두 적용할 수 있다!함수를 통해 중복된 코드를..

주제 : JavaScript 교재 : 생활코딩 내용 : 19강 반복문 예고 문제의식 : 버튼을 누를 때 링크가 야간모드에서 조금 밝게, 주간모드에서 조금 어둡게 표현되면 좋겠다. 링크가 몇개든 자동으로 적용될 수 있도록 말이다.그래서 모든 태그에 대해 하나하나 powderblue 색상 지정을 하는 반복문을 반들어 볼 예정이다. 20강 배열 배열(array)이 왜 필요한가? 시간이 지나면 데이터가 점점 많아짐 -> 이 때 배열은 서로 연관된 데이터를 정리해서 담아두는 수납상자 역할을 함배열은 대괄호로 구분하며, 값과 값 사이에는 콤마(,)가 들어간다. ex) ["egoing", "leezche"]배열을 수납상자에 담고 싶을 때는? var coworkers = ["egoing", "leezche"]를 이..

주제 : JavaScript 교재 : 생활코딩 내용 :  13강 프로그램, 프로그래밍, 프로그래머 1.HTMl과 자바스크립트 그리고 프로그래밍 언어 1)프로그래밍 언어란?HTML과 자바스크립트는 둘 다 컴퓨터 언어이다. 하지만 그 중 프로그래밍 언어는 자바스크립트 하나이다.그렇다면 프로그래밍 언어는 무엇일까? 답을 하려면 우선 프로그램과 프로그래밍이 무엇인지부터 알아야 할 것이다. 프로그램이란 음악회 같은 곳의 시간에 따른 진행 순서를 말한다. 그렇다면 프로그래밍은 이러한 순서를 만드는 행위라고 할 수 있다. 나아가 프로그래밍 언어란 순서대로 여러기능을 작동시킬 때, 특정 순서가 반복되는 작업(치킨을 우리집에 배달해 -> 피자를 우리집에 배달해...)을 효율적으로 할 수 있도록 -  시간 순서에 따라 실..

주제 : JavaScript 교재 : 생활코딩 내용 :  6강 데이터 타입 - 문자열과 숫자 1.자바스크립트의 데이터 타입(자료형)을 알아보자! 1)자바스크립트 데이터 타입-자바스크립트의 데이터 타입 : 6개의 데이터 타입 + 객체 2)숫자열-웹페이지 검사 -> Console로 숫자열 알아보기-alert(1);이라고 치면 경고창 1이, alert(1+1);이라고 치면 경고창 2가 뜬다-그러나 굳이 alert를 이용하지 않아도 숫자만을 통해 계산을 할 수 있다-Number(숫자) 데이터 타입에서 아주 중요한 것은 연산-더하기(+)는 왼쪽에 있는 값과 오른쪽에 있는 값을 더해서 하나의 값을 만든다는 점에서 이항 연산자 + 이항 연산자 중에서 산수를 하는 것이기 때문에 산술 연산자-빼기(-)역시 더하기와 같은..

주제 : JavaScript 교재 : 생활코딩 내용 :  1강 수업소개 HTML이 나오고 얼마지나지 않아 사용자의 조작에 반응해서 프로그램이 움직이는, 동적으로 사용자와 상호작용할 수 있는 웹페이지를 만들고 싶다는 욕망이 사람들 사이에서 일어났다. 이처럼 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망으로부터 JavaScript는 나왔다. 오늘날 웹페이지 구성HTML : 정적 토대JavaScript : 사용자와 상호작용할 수 있는 기능  2강 수업의 목적 1.수업최종목표-실습이 중심이 되어 문법을 익히는 것이 부가적으로 따라옴-웹페이지 야간모드, 주간모드를 버튼을 통해서 바꿔볼 예정 2.야간모드 주간모드되는 페이지를 웹페이지검사로 코드 해석해보기-웹브라우저는 한번화면에 출력되면 자기자신을 바꿀 수 없..

기획 1.미디어 쿼리를 이용한 반응형 웹페이지 만들어보기 CSS 관련해서 다양한 개념을 배웠다. 그 중에 가장 끌리는 개념은 미디어쿼리를 이용한 반응형 웹페이지가 아닐까 생각한다. 내가 만든 html페이지가 청소년을 대상으로 하는 만큼 스마트폰이나 테블릿을 이용해 콘텐츠를 체험하려는 사람들도 많을 것이다. 이들이 스마트폰과 테블릿 같이 작은 화면을 기준으로 했을 때도 콘텐츠를 적절히 이용할 수 있게 하는데는 반응형 웹페이지 기술이 제격이라고 생각한다. 따라서 이번 실습은 기존에 만들었던 웹페이지(https://move-on.tistory.com/43 하단 참조)에 반응형 웹페이지를 주려고 한다. 2. 반응형 웹페이지 픽셀 기준구글링을 해보니 스마트폰 세로 ~ 480px / 스마트폰 가로, 태블릿 : 48..