클래스란클래스란 객체를 생성하기 위한 템플릿이다.클래스 이전의 객체 생성클래스 이전에는 함수로 객체를 생성했다. 함수로 객체를 생성하는 방법으로 공장함수와 생성자 함수가 있다.공장함수공장함수는 객체를 반환값을 가지는 것 외에는 일반 함수와 문법이 동일하다.// factory function(공장함수)function createMonster(name, hp, att) { return { name, hp, att, // 객체에 메서드까지 담아서 반환 가능, 공장함수로 객체 생성 시 메서드도 동일하게 새로 생성 됨 attack(monster) { monster.hp -= this.att; }, };}공장함수로 생성한 객체가 메서드를 가지기 위해서는 반환 객체에 함수..
1. 사용자 지정타입타입이란 데이터의 형태나 종류다. int, String은 자바에서 기본으로 제공하는 타입이다. 하지만 경우에 따라서 임의의 타입을 지정해야되는 경우가 있다. 예를 들어 학생정보를 관리할 때 이름, 키, 성적을 한 묶음으로 관리하고자 할 때 타입을 정의하는 것이 좋다. 이때 학생을 본따 만든 데이터의 형태를 사용자 지정타입이라고 한다.2. 클래스와 객체사용자 지정타입을 만들기 위해 자바는 클래스를 제공한다. 사용자지정타입이 설계도이면 클래스는 설계도를 자바로 표현한 것이다. 클래스는 다음과 같다.public class Student { String name; int grade; int age;}class: 자바에게 클래스임을 알려주는 키워드다.Student: 클래스의 이..
Transition요소의 상태 변화에 따른 스타일 변경에 애니메이션 효과를 부여한 것이다.Click me시작점에 transition 속성을 부여한다. 도착점에 변경하고자 하는 속성들을 값을 바꿔서 넣는다.button { padding: 20px; border-radius: 20px; background-color: tomato; color: beige; transition: background-color 1s ease-in, border-radius 0.5s ease-in-out;}button:hover { background-color: beige; color: tomato; border-radius: 5px;}여러 속성들을 다른 애니메이션 효과를 줄 수 있다..
HTML에 CSS 적용하기inline을 하거나 CSS 파일을 링크 태그를 통해 참조한다. CSS SelectorSelector(선택자)를 통해 태그를 지정한다. 태그의 이름, 클래스 이름, id 이름 등을 selector로 사용할 수 있다. 태그이름은 이름 그대로 사용한다. 클래스 이름은 앞에 (.)을 붙여서 사용한다. 아이디 이름은 앞에 (#)을 붙여서 사용한다.h1 {}.myClass {}#myId {}선택자로 태그를 지정을 했으면 중괄호 내부에 속성(property)를 부여한다. 속성은 속성 이름과 속성값으로 구성된다. 필요한 속성은 검색을 통해서 확인한다.h1 { font-color : tomato;}예에서 속성은 font-color : tomato; 이다.CSS 코드의 우선순위동일한 태그에..
#1 객체 생성하기객체란 여러 변수들을 하나의 변수로 묶은 것이다. 객체 내부의 정보들을 속성이라고 한다.const zerocho = { name: "조현영", year: 1994, month: 8, date: 12, gender: "M",};#2 객체 속성에 접근하기객체의 속성은 마침표를 통해, 또는 속성의 이름을 통해 접근할 수 있다. 속성의 이름을 통해 접근하려면 문자열로 입력을 해야한다. 변수명을 그대로 입력하면 변수에 저장 된 값을 통해 속성을 찾는다.// 객체 생성: 객체는 여러 변수를 하나의 변수로 묶는다const zerocho = { // 속성: 중괄호 내부의 정보 // 형식: : name: "조현영", year: 1994, mont..
함수: 특정한 작업을 수행하는 코드익명함수: 이름이 없는 함수함수 선언문: 함수 키워드를 사용하여 함수를 선언한 문장함수 표현식: 함수를 상수나 변수에 대입하는 방식화살표함수: 화살표 기호를 사용하는 함수함수 호출하기: 함수를 사용하는 행위#1 함수 선언하기함수를 선언할 때 이름도 같이 지어야 다른 곳에서 사용할 수 있다. function a() {} // 함수선언문const b = function () {}; // 함수표현식const c = () => {}; // 함수표현식, 화살표함수#2 함수 호출하기함수 호출이란 함수를 사용하는 행위다. 함수의 몸체의 실행문들이 실행된다.function a(){ console.log(); console.log(); console.log(); }..