SK_MOUSE 개발일기

Object 전달 const name ='evan'; const age = 44; print(name, age); function print(name, age){ console.log(name); console.log(age); } 위와같이 전달하게 되면 매개변수가 많아지면 다 받기 곤란. const evan = {name : 'evan', age:4}; function print(person){ console.log(person.name); console.log(person.name); } 따라서 이처럼 객체로 전달하게 되면 처리하기 편하다. 프로퍼티 변수를 나중에 따로 선언해도됨. 예시) hasJob 프로퍼티 주목 function print(person){ console.log(person.name)..

클래스 class Person{ constructor(name, age){ this.name = name; this.age = age; } speak(){ console.log(`${this.name} : hello!`); } } //사용 const ellie = new Person('ellie' , 20); console.log(ellie.age); ellie.speak(); getter, setter class User{ constructor(name, age){ this.name = name; this.age = age; } get age(){ return this._age; } set age(value){ // if(value

바닐라 JavaScript는 'use strict'를 사용하면 좀 더 체계적으로 코드를 짤 수 있다. TypeScript(타입스크립트)는 JavaScript(자바스크립트) 위에 타입이 올라간 것이기 때문에, 위와 같은 것을 생각해두면 좋다. 그리고 JS를 배우고 나면 TypeScript를 금방 배울수 있다. JS관련 문법 1. 변수형, 문자열 출력 표기 및 연산자 // 문법 //let : 변수를 선언할때 사용 ES6 let name='evan'; console.log(name); name = 'ggg'; console.log(name); //var hoisting이란 어디에서 선언을했던 선언을 끌어올려줌 age=4; var age;//이런식으로 위에서 먼저 써버리는게가능 //var는 {블록}에서 상관 안..

2학년때 처음 객체를 공부했던 객체지향언어와실습에서 학습한 Processing과 같은 원리다. 크게 function setup()과 function draw()로 나뉜다. setup은 시작시 기본으로 셋팅되는 배경이고, draw는 계속해서 실행이되면서 적용되는 일종의 반복 함수이다. 그리고 위에서 적용된 도형/메소드는 내려갈수록 덮어쓰기가 된다. 웹을 만들때는 아래와같이 적용하면된다. 역동적인효과 예시 mousePressed 오버라이드 VS mouseIsPressed(입력장치 되게 짧은시간에 많이입력됨) 입체감을 더해주는 방법 sqrt( (mouseX-pmouseX)^2 +(mouseY-pmouseY)^2 ) = 빗변의 길이 = 속도 circle의 반지름을 속도로 하면 마우스 이동속도에따라 원의 크기가 ..

1. html태그에 직접 style로 지정하기 Hello world li 로 적용하면 border가 다 적용되는데 왜냐면 ol이 두개기 때문. 따라서 적용할 ol에 id를 "lecture"로 주어서 상속했다. 대등한관계로 따로 적용 ul,ol{ background-color: powderblue; } 3. 속성값 정리 div와 같은 영역 박스도 높이/너비가 정해지면 background가 보인다. 버튼위에 마우스가 올려져있을때(hover) button : hover{ color : red } padding은 컨텐츠 안의 공간 margin은 컨텐츠 밖의 공간 border은 컨텐츠 테두리 .div{ border : 6px dashed red; margin : 10px 10px 10px 10px; padding..

material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=283593 Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io

HTML 구조를 볼때는 박스단위로 쪼개서 보고, 세부적으로 아이템은 사용자 입장에서 시각적인 UI이다. Block형(div)과 Inline형(span)을 잘 이용하여 배치하자. 1. HTML을 볼때는 크게 박스와 아이템으로 나눠서 볼 수 있다. Box는 Sectioning이 가능한것(눈에 보이지는 않는 틀) : 묶어서 스타일링할때 사용 Item은 사용자들에게 보여지는것들. HTML구조를 바라보는 관점 : Header안에 여러 박스가 존재한다...Body안에 여러 박스가 존재한다... 아래와같이 쪼개서 본다. React를 하나의 컴포넌트로 보지말고 최고로 작은 단위로 쪼개어서 작은 단위부터 개발하는 것이 필요하다. 2. HTML은 Block과 Inline 형태가 있다. Block은 각각 다른행으로 배열되고..

opentutorials.org/course/3084/18893 웹서버 운영 : 윈도우 - 생활코딩 자신의 운영체제에 맞는 수업을 찾아서 학습해주세요. 윈도우에 웹서버 설치 웹서버와 http 웹브라우저와 웹서버의 통신 --- 윈도우에 웹서버 설치 이번 시간에는 아파치 웹서버를 윈도우 컴퓨터 opentutorials.org 생활코딩에 나온방식대로 bitnami를여기서 설치했다. https://bitnami.com/stack/wamp WAMP Bitnami WAMP Stack provides a complete, fully-integrated and ready to run WAMP development environment. In addition to PHP, MySQL and Apache, it inclu..

아래 사이트에서 글을 정독하면서 글을 정리해보도록 하겠다. webberstudy.com/html-css/html-1/basic-knowledge/ HTML 기초 지식 HTML 기초 과정을 시작하기 위해 필요한 기본 지식을 다룹니다. 기본적인 태그의 명칭 요소(엘리먼트)와 속성(어트리뷰트)를 소개하고, 절대 주소와 상대 주소를 통해서 어떻게 URL 주소를 표현하 webberstudy.com 1. ABC'와 같이 '열리는 태그', '닫히는 태그'로 이루어진 태그가 있고, ' '와 같이 '스스로 닫는 태그'가 있다. 2. 태그의 호칭 웨버스터디 홈으로 가기 이러한 형식은 아래처럼 호칭을 부릅니다. 또는 요소 내용 3. a 요소에서 href 속성에 원하는 주소를 적어주면 a 요소가 감싸는 텍스트를 클릭 시에 해..

퍼블리싱이란 ? 웹/앱의 분야 중에 최종 단말기(예: 브라우저)에서 표현되는 내용을 작성하는 행위를 말합니다. publish(출판하다) + ing(~을 하는 중)의 합성어로서, 주로 html, css, javascript 와 같은 언어를 이용하여 브라우저에 보여지는 최종적인 형태를 만들어내는 것을 의미합니다. 1. HTML Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어다. 아래는 기본 HTML5 문서타입이다. DOCTYPE 종료하는 태그가 없는 것이 특징이며 은 HTML 문서의 구성 요소는 아니다. html은 크게 두가지로 나눈다. 콘텐츠를 표현하기위한 내용 태그는 (문서자체를 설명하는정보..