일급 객체인 Javascript를 완벽하게 이해하기 위해서는 객체와 함수에 대한 충분한 지식과 이해가 요구된다. 가장 처음으로 알아야 하는 것은 객체라고 생각한다!

💎 객체(Object)

: 원시 값을 제외한 나머지 값(function, array, 정규 표현식 등)은 모두 객체라고 볼 수 있다. 원시 타입(primitive type)은 변경 불가능(immutable value)한 단 하나의 값이지만, 객체 타입(object/reference type)은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이면서, 변경 가능한 값(mutable value)을 갖는다.

💎 객체의 구성

: 객체는 0개 이상의 프로퍼티로 구성된 집합으로, 프로퍼티는 키(key)와 값(value)으로 구성된다.

let today = {
  weather : "맑음",
  date : 24
}

객체 이름 : today 프로퍼티 : { weather : "맑음", date : 24 } 프로퍼티의 키 : weather, date 프로퍼티의 값 : "맑음", 24

💎 프로퍼티와 메서드

: JS에서의 모든 값은 프로퍼티의 값이 될 수 있고, JS의 함수는 일급 객체이기 때문에 함수를 프로퍼티 값으로 이용할 수 있다. 프로퍼티의 값이 함수인 경우를 메서드(method)라고 부른다.

var counter = {
    num : 0,                    //프로퍼티
      increase : function() {        //메서드 
      this.num++
}

프로퍼티와 메서드에 관한 자세한 내용은 여기!!

💎 객체 리터럴에 의한 객체 생성

프로토타입 기반 객체지향 언어인 Javascript는 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6) 등의 다양한 객체 생성 방법을 지원하지만 가장 일반적으로 사용하는 것은 객체 리터럴이다.

let weather = {
  predict : "흐림",
  broadcast : function() {
    console.log(`내일의 날씨는 ${this.predict}으로 예상됩니다.`);
  }
};

console.log(typeof weather)     //object
console.log(weather)            //{ predict: '흐림', broadcast: [Function: broadcast] }

객체 이름 : weather 프로퍼티 : 1개 ( 키 : predict, 값 : "흐림" ) 메서드 : 1개 ( 키 : broadcast, 값 : function )

객체 리터럴은 중괄호{} 내에 0개 이상의 프로퍼티를 정의하고, 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다.

const empty = {};            //빈 객체 생성 후 변수에 할당함
console.log(empty);            //{ }
console.log(typeof empty);    //object

🗝️ 객체의 중괄호는 코드 블럭일까?

결론부터 말하자면 객체의 중괄호는 코드 블럭을 의미하는 것이 아니다. 객체 리터럴은 표현식이기 때문에 닫는 중괄호 뒤에 세미콜론;을 붙이지만, 코드 블록의 닫는 중괄호 뒤에는 붙이지 않는다.

function repeat(input) {        //함수의 중괄호는 코드 블록을 의미함
  console.log(input);
}                                //; 생략 가능

let clock = {                    //객체의 중괄호는 표현식을 의미함
  hours : 6,
  mins : 30 
};                                //; 생략 불가능

하지만 실제로 실행해보면 세미콜론;의 여부와 상관없이 정상적으로 실행된다 ...

*Ref. * 모던 자바스크립트 Deep Dive : 자바스크립트의 기본 개념과 동작 원리

💎 프로퍼티(property)

: 키(key)와 값(value)으로 구성된다.

var example = {
    keyname : "value"
}

🗝️ 프로퍼티 키(property key)

: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값을 의미한다.

🐾 식별자 네이밍 규칙

프로퍼티의 식별자 역할을 하지만 식별자 네이밍 규칙을 항상 따라야 하는 건 아니다. 그래도 식별자 네이밍 규칙을 따를 것을 권장한다!

- 식별자 네이밍 규칙을 따른 경우

let person = {
    name : "Kiara",
      age : 25
};

console.log(person);        //{ name: 'Kiara', age: 25 }

- 식별자 네이밍 규칙을 따르지 않은 경우

let person = {
    'My-name' : "Kiara",
      'My-age' : 25            
};

console.log(person);        //{ 'My-name': 'Kiara', 'My-age': 25 }

일반적으로 -는 연산자로 인식되기 때문에 '' 없이 My-name이나 My-age를 키로 작성한다면 Syntax Error가 발생할 것이다. 따라서 식별자 네이밍 규칙을 따르지 않을 때는 반드시 따옴표를 사용해야 한다.

🐾 프로퍼티 키 동적 생성

빈 객체를 할당받은 변수 obj와 문자열을 할당받은 변수 key를 이용하여 동적으로 프로퍼티의 키를 생성해보자.

var obj = {};
var key = "hello";

obj[key] = "world";        //객체 obj의 프로퍼티 키를 "hello"로, 값을 "world"로 저장함

console.log(obj);        //{ hello : 'world' }

식별자 네이밍 규칙을 따르지 않는 문자열을 변수 key에 저장해도 정상적으로 출력될까?

var obj = {};
var key = "hello-everyone";

obj[key] = "world";

console.log(obj);        //{ 'hello-everyone': 'world' }

객체를 출력한 결과를 보면, 프로퍼티 키가 ''를 포함하여 정상적으로 출력된 걸 확인할 수 있다.

🐾 빈 문자열

const foo = {
  '' : '' // 빈 문자열을 키와 값으로 받을 수 있다.
};
console.log(foo); // {'': ''}

🐾 암묵적 타입 변환

키에 문자열이나 심벌 값 외의 값을 사용하면 문자열로 암묵적 타입 변환이 이뤄진다.

let foo = {
    0: 1,
      1: 2,
      2: 3
};

console.log(foo); // { 0: 1, 1:2, 2:3 }

다음 코드에서 키로 사용된 숫자 리터럴 0, 1, 2,는 따옴표는 붙지 않지만 문자열로 변환된 값이다.

🐾 중복 선언 시

에러 발생 없이 나중에 선언된 프로퍼티가 이전에 선언한 프로퍼티를 덮어쓴다.

let day = {
    today : "Monday",
      today : "Tuesday"
};

console.log(day);    //{today: 'Tuesday' }

🗝️ 프로퍼티 값(property value)

: Javascript에서 사용할 수 있는 모든 값

🐾 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신된다.

let coffee = {
  type : "americano"
};

coffee.type = "latte";
console.log(coffee.type);     //latte

🐾 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 프로퍼티 값이 할당된다.

let menu = {
  coffee : "americano"
};

menu.dessert = "choco cake";         //프로퍼티 동적 생성
console.log(menu);     //{ coffee: 'americano', dessert: 'choco cake' }

🐾 프로퍼티 삭제 : delete 연산자 이용

let menu = {
  coffee : "americano"
};

menu.dessert = "choco cake"; 

delete menu.coffee;    

console.log(menu);            //{ dessert: 'choco cake' }

delete 연산자는 객체의 프로퍼티를 삭제할 수 있고, 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다.

let menu = {
  coffee : "americano"
};
delete menu.dessert;    
console.log(menu);             //{ coffee: 'americano' }

존재하지 않는 프로퍼티를 삭제하려고 하면 에러 없이 무시된다.

🗝️ 프로퍼티 접근 방식

프로퍼티 키가 식별자 네이밍 규칙을 따를 때 사용할 수 있다!!

🐾 마침표 표기법

: 마침표 프로퍼티 접근 연산자.를 사용하는 방식

let person = { 
  name : "Kiara"
};
//마침표 표기법에 의한 프로퍼티 접근
console.log(person.name);        //Kiara

let ex = { 
  1: 0
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(ex.1);            //SyntaxError
console.log(ex.'1');        //SyntaxError

프로퍼티 키가 숫자로 이뤄진 문자열의 경우에는 따옴표 표기법을 사용하면 에러가 발생한다.

🐾 대괄호 표기법

: 대괄호 프로퍼티 접근 연산자[...]를 사용하는 방식

let person = { 
  name : "Kiara"
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']);        //Kiara

대괄호 표기법을 사용할 때는 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 따옴표로 감싼 문자열이어야 한다. 쉽게 말하면 접근하고자 하는 프로퍼티의 키 앞뒤에 따옴표를 꼭 써야 한다는 뜻이다.

let person = { 
  name : "Kiara"
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person[name]);        //ReferenceError 발생

따옴표로 감싸지 않은 경우에는 식별자로 해석하여 에러가 발생한다.

let ex = { 
  1: 0
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person[1]);            //0
console.log(person['1']);        //0

그러나 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.

Ref. 모던 자바스크립트 Deep Dive

💎 원시 자료형(primitive type)

: 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담긴다.

🗝️ 특징

• 원시 데이터 값이므로 변경이 불가능하다.
• 같은 데이터는 하나의 메모리를 사용한다.

🗝️ 종류

• number : 데이터 타입이 숫자일 때
• string : 데이터 타입이 문자열일 때
• boolean : 데이터가 True 또는 False의 값을 반환할 때
• undefined : 데이터 값이 할당되지 않았을 때
• null : 데이터 값이 없을 때
• symbol : 다른 값과 중복되지 않는 고유한 심볼을 생성할 때 ( new 생성자 사용 불가능)

  🗝️ undefined vs null

• undefined : 데이터 값이 있는지 없는지 불확실한 상태

  let unknown;
  console.log(unknown); //undefined
  

//데이터 타입 확인 console.log(typeof unknown); //"undefined"

- `null` : 데이터 값이 확실히 없을 때
```javascript
let data = null;
console.log(data); //null

//데이터 타입 확인
console.log(typeof data); //"object"

🗝️ 변수 복사 방식 : Copy by value

원시 자료형의 데이터를 복사하면, 데이터의 값이 복사된다.

var num1 = 2023;
var num2 = num1;

num1 = 2022;

console.log(num2);    // 2023;

num1의 값을 2022로 변경하기 전에 num1의 값을 복사했기 때문에 num2의 값을 출력하면 변경 전의 num1의 값인 2023이 나온다.

💎 자료 참조형(reference type)

: 자료 참조형이 할당될 때에는 변수에 값을 가르키는 주소(reference)가 담긴다.

🗝️ 특징

• 참조형 데이터 값으로 가변성을 가지고 이미 생성된 값의 변경이 가능하다.
• 같은 메모리 주소를 갖는 데이터는 같은 값을 갖는다.

🗝️ 종류

• object : 연관된 데이터를 묶어서 보관하는 데이터 타입. key와 value로 구성된다.

  let objectEx = {        // key : value 순서로 구성됨
  name : "Apple",        // key = name, value = Apple
  color : "Red",        // key = color, value = Red
  count : 3        // key = count, value = 3
  };

• array : 배열 데이터
• function : 함수 데이터

🗝️ 변수 복사 방식 : Copy by reference

자료 참조형 데이터를 복사하면, 참조값(메모리 주소)를 복사한다.

var info = { 
  name : "Kiara" 
};
var copyInf = info;

info.name = "Kirakira";

console.log(copyInf);    // name : "Kirakira"

설명 수정

Transform

: HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있는 속성

- Translate

: 선택한 오브젝트의 위치를 변경하는 속성

.translate { transform: translate(50px, 100px); }
/*현재 위치에서 x축으로 50px, y축으로 100px만큼 이동함*/

예제

<div>의 위치를 x축으로 100px, y축으로 200px만큼 이동하려고 할 때 코드를 수정해보자.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 200px;
  height: 100px;
  background-color: pink;
  border: 2px solid red;
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<div>Example</div>

</body>
</html>

<div> 안에 traslate 속성을 추가해서 아래와 같이 변경하면,

div {
  width: 200px;
  height: 100px;
  background-color: pink;
  border: 2px solid red;
  transform: translate(100px,100px);
}

<div> 의 위치가 변경된 것을 확인할 수 있다.

- Skew

: 오브젝트를 x축과 y축을 기준으로 입력한 각도만큼 비트는 속성

.skew { transform: skew(20deg, 10deg); }
/* 오브젝트를 x축으로 20도, y축으로 10도 비틀기 */

예제

<div>를 x축으로 10도, y축으로 20도만큼 기울이려고 할 때 코드를 수정해보자.

<!DOCTYPE html>
<html>
    <head>
        <title>The skew() Method</title>
        <style>
            div {
                width : 300px;
                height : 100px;
                background-color : yellow;
                border : 2px solid orange;
            }
        </style>
    </head>
    <body>
        <h1>The skew() Method</h1>
        <div>This is an example of skew() Method.</div>
    </body>
</html>

<div> 안에 skew 속성을 추가해서 아래와 같이 변경하면,

div {
    width : 300px;
    height : 100px;
    background-color : yellow;
    border : 2px solid orange;
    transform : skew(10deg, 20deg);
}

<div> 의 각도가 비틀어져서 나타난 것을 확인할 수 있다.

- Rotate

: 오브젝트를 주어진 각도만큼 시계방향/반시계방향으로 회전시키는 속성

.rotate { transform: rotate(20deg); }
/* 오브젝트를 시계방향으로 20도 회전하기 */
.rotate { transform: rotate(-40deg); }
/* 오브젝트를 반시계방향으로 20도 회전하기 */

예제

클래스 example1를 시계방향으로 15도, 클래스 example2를 반시계방향으로 30도 회전시키자.

<!DOCTYPE html>
<html>
    <head>
        <title>The rotate() Method</title>
        <style>
            div {
                width : 200px;
                height : 150px;
                background-color : skyblue;
                border : 2.5px solid black;
                  margin : 50px;
            }
        </style>
    </head>
    <body>
        <h1>The rotate() Method</h1>
        <div class="example1">Example1</div>
      <br>
          <div class="example2">Example2</div>
    </body>
</html>

<style> 안에 rotate 속성을 추가해서 아래와 같이 변경하면,

<style>
    div {
        width : 200px;
        height : 150px;
        background-color : skyblue;
        border : 2.5px solid black;
        margin : 50px;
    }

    .example1 {
        transform : rotate(15deg);
    }
    .example2 {
        transform : rotate(-30deg);
    }
}

<example1> 은 우측으로 15도,<example2> 는 좌측으로 30도 기울어져 나타난 것을 확인할 수 있다.

- Scale

: 오브젝트의 크기를 변형시키는 속성

/* increase scale */
.scale { transform: scale(2, 3); }
/* width의 2배, height의 3배인 크기로 변형하기 */

/* decrease scale */
.scale { transform: scale(0.5, 0.5); }
/* width의 0.5배, height의 0.5배인 크기로 변형하기 */

예제

가로가 300px, 세로가 100px인 박스를 scale 속성을 이용하여 기존 박스에서 가로가 1.5배, 세로가 2배된 박스로 변형시키자.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <html lan = "EN">
        <link rel="stylesheet" href="index.css">
        <title>The scale() Method</title>
        <style>
            div {
                width : 300px;
                height : 100px;
                background-color : pink;
                border : 3px solid red;
                margin : 100px;
            }
        </style>
    </head>
    <body>
        <h1>The scale() Method</h1>
        <div>Example</div>
    </body>
</html>

<style> 시트 안에 있는 div 내부에 transform : scale(1.5, 2); 을 추가해주면,

기존에 설정한 width의 1.5배, height의 2배인 크기의 <div> 박스가 나타난다.

- Matrix

: 모든 Tramsform 속성을 하나로 결합한 속성

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

.matrix { transform: matrix(1, -0.3, 0, 1, 0, 0); }
/* 기존 오브젝트에서 scale(1, 0), skew(-0.3, 0), translate(0,0)을 전부 적용 */

💎 readline

콘솔을 통해 값을 입력 받는 모듈

💎 기본 구문

const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.on("line", (x) => { 
  console.log(x);
  rl.close();
}).on('close', () => {
  process.exit();
});

가장 많이 쓰이는 코드로, 입력 받은 한 줄을 그대로 출력해주는 코드다.

모듈 불러오기

const readline = require('readline');
//키워드 변수명 = require('모듈 이름'); 

변수명이나 모듈 이름은 변경해도 된다. 변수 키워드도 변경해도 되지만, 오류가 발생할 수 있는 var보다는 let이나 const를 사용하는 걸 추천합니다.

readline 인터페이스 객체 생성

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

createInterface() 메서드를 이용해 객체를 만들어 rl 변수에 저장합니다.

on 메서드를 이용하여 이벤트 실행

on 메서드를 이용하여 이벤트가 발생할 때 실행할 동작을 지정할 수 있습니다.

line : 사용자가 콘솔에 입력을 할 때 발생하는 이벤트

입력 스트림에 줄바꿈을 나타내는 \n, \r, \r\n 등의 제어 문자가 나타나거나, 사용자가 Enter 또는 Return을 누를 때 발생합니다.

close : 입력 스트림을 종료하는 이벤트

더 이상 입력받을 것이 없을 때, rl.close()를 호출하여 발생시킵니다.

on 메서드를 통해 line 이벤트와 close 이벤트를 사용한 코드는 다음과 같습니다.

/* 일반적인 함수 */
rl.on("line", function (x) {
    rl.close(); //close가 없으면 입력을 무한히 받는다.
})
    rl.on("close", function () {
  // 입력이 끝난 후 실행할 코드 
});

/* 화살표 함수 */
rl.on("line", (line) => { 
    rl.close();
});
    rl.on('close', () => {
})

💎 var, let, const의 차이점

중복 선언/재할당 가능 여부

- var : 중복 선언 O, 재할당 O

var a = 10; //변수 선언+할당
console.log(a); // 10

//중복 선언+재할당
var a = 20; 
console.log(a); // 20

//중복 선언
var a; 
console.log(a); // 20

키워드 var는 중복 선언과 재할당이 전부 가능해서 예상치 못한 값을 반환할 수도 있다.

- let : 중복 선언 X, 재할당 O

let name = "Kiara";
console.log(name); // Kiara

// 중복 선언
let name = "Kirakira"; // Uncaught SyntaxError: Identifier 'name' has already been declared

// 재할당
name = "Kirakira"; 
console.log(name); // Kirakira

키워드 let은 중복 선언은 안되지만, 재할당은 가능하다.

- const : 중복 선언 X, 재할당 X

const name; // Uncaught SyntaxError: Missing initializer in const declaration
const name = "Kiara";

키워드 const는 중복 선언과 재할당 모두 불가능하다. 키워드let과 다른 점은 선언과 초기화가 반드시 동시에 진행되어야 한다는 것이다.

// 원시값의 재할당 X (상수 키워드 const는 값을 변경할 수 없음)
const name = "Kiara";
name = "Kiara"; // Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const student = {
 name : "Kiara"
}
student.name = "Kirakira";

console.log(student); // { name : "Kirakira" }

원시값의 재할당은 불가능하지만 객체의 재할당은 가능하다.

변수 스코프 유효범위

- var : 함수 레벨 스코프

var name = "Kiara"; //전역 변수

while (true) {
  var name = "Kiara's velog"; //전역 변수로 취급됨
}

console.log(name); //Kiara's velog

console.log(name)이 Kiara가 아닌 'Kiara's velog'가 나오는 이유는 함수가 아닌 다른 블록 내에서 선언된 키워드 var 변수는 지역 변수가 아닌 전역 변수로 취급되기 때문이다.

- let/const : 블록 레벨 스코프

// 전역 변수 초기화
let name = "Kiara"; 
const color = "Blue";

while (true) {
  let name = "Kiara's velog"; // 지역 변수
  const color = "Pink";    // 지역 변수
}

console.log(name); //Kiara
console.log(color); //Blue

위와 같은 코드에서 키워드를 var에서 let과 const로 바꿨을 때, 출력값은 while문 내에서 선언된 값이 아닌 전역 변수의 값이 반환된다.

호이스팅 가능 여부

- var : 호이스팅 가능

<!-- var로 선언된 변수의 호이스팅 -->
console.log(a);      // undefined
var a = 10;      // var로 선언된 변수에 10이라는 값을 할당함
console.log(a);      // 10

값을 할당하기 전에 console.log()로 값을 참조했을 때 오류가 발생하지 않고 undefined가 나타난다.

- let/const : 호이스팅 불가능

<!-- let으로 선언된 변수의 호이스팅 -->
console.log(a);      // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 20;      
<!-- const로 선언된 변수의 호이스팅 -->
console.log(PI); //Uncaught ReferenceError: Cannot access 'PI' before initialization
const PI = 3.14;

var와 다르게 키워드 let과 const는 변수에 값을 할당하기 전에 출력을 했을 때 오류가 뜨는 것을 확인할 수 있다. 이는 호이스팅이 불가능하기 때문이다. 즉, 콘솔에 출력하는 명령어를 실행하기 전에 변수가 선언되지 않았기 때문에 정상적으로 실행되지 않는다.

💎 var 의 한계점

1. 중복 선언

2. 함수 레벨 스코프

3. 변수 호이스팅

이러한 이유들로 변수를 선언할 때 var보다는 let이나 const를 사용하여 오류 발생률을 낮춘다.

💎 변수(variables)

데이터를 저장하는 저장소나 공간으로, 변수를 선언하거나 값을 할당하고 저장된 데이터를 변경하거나 추가할 수도 있다.

- 전역 변수

: 어디서든 사용 가능한 변수, 함수 외부에서 선언한 변수

- 지역 변수

: 특정 코드 블록(함수,if문, while문 등) 내에서 선언된 변수, 함수 내부에서 선언한 변수

💎 용어 정리

식별자

: 메모리 공간을 식별하기 위한 단어 ex) 변수 이름

var random; // 식별자(변수 이름) : 'random'

키워드(var, let, const)

var name = "Kiara"; // 키워드 var로 선언된 변수 name의 값은 Kiara
let age = 25; // 키워드 let으로 선언된 변수 age의 값은 25
const PI = 3.14; // 키워드 const로 선언된 상수 PI의 값는 3.14

객체(object)

: 0개 이상의 프로퍼티로 구성된 집합으로 변경 가능한 값(mutable value)이다. 원시 값을 제외한 나머지 값(function, array, 정규 표현식 등)이 객체에 해당한다.

객체 = 프로퍼티 + 메서드

프로퍼티(property)

: 객체의 상태를 나타내는 값(data)으로, 키(key)와 값(value)으로 나뉜다.

let color = {
  favorite : "skyblue",     // 키 : favorite + 값 : "skyblue" = 프로퍼티
  hate : "yellow"            // 키 : hate + 값 : "yellow" = 프로퍼티
};

함수(function)

: 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

// 두 개의 값을 parameter로 받아서 둘의 합을 반환하는 함수
function addNum(x, y) {
    return x + y; 
}

메서드(method)

: 일반적인 함수와 비교하기 위해 함수를 호출할 때 객체가 있는 경우를 메서드라고 부른다.

let example = {
  a : function() {
    console.log('메서드 호출');
  }
}

함수와 메서드 비교는 추후에 !

참조(reference)

: 변수에 저장된 값을 읽어 들이는 것

변수 선언(variable declare)

: 키워드를 사용해 변수를 정의하는 것

var name;

변수 할당(variable assignment)

: 변수가 선언된 후에 대입 연산자(=)를 통해 값을 저장하는 것

var name;
name = "Kiara";

변수 초기화(variable initialize)

: 변수를 선언함과 동시에 값을 넣어주는 것

var name = "Kiara";

프로토타입(prototype)

• CSS(Casacading Style Sheet) : HTML과 함께 웹 페이지의 디자인을 구성하는 언어

구조

• 기본

  selector {
    property: value;
    property: value;
  }

선택자(selector)

• 전체 선택자 * : 모든 HTML 요소에 스타일을 적용함 ```css
• {
  text-align : center ; } ```
• 태그 선택자 tag name : 특정 HTML 요소에 스타일을 적용함

  p {        <!-- <p>에만 적용함 -->  
    background-color : blue ;
  }

• 클래스 선택자 . : class 속성을 지정하여 스타일을 적용함

  .food {        <!-- food 클래스에만 적용함 -->  
    font-style : italic ;
  }

• ID 선택자 # : ID 속성을 지정하여 스타일을 적용함

  #change {        <!-- change ID에만 적용함 -->  
    width : 300px ;
  }

• 그룹 선택자 : 다양한 유형의 요소를 한번에 선택할 때 쉼표,를 사용함

  h1, p, .cla {        <!-- <h1>와 <p> 그리고 클래스 cla에 적용함 -->  
    color : red ;
  }

스타일 우선순위

- 적용 방법에 따른 우선순위

1. 인라인(Inline) 스타일 : HTML 요소 내부에 위치한 스타일

   <h1 style="background-color : black">True of False?</h1>

2. 내부/외부 스타일 시트 : 태그 안에 위치에 따라 결정됨

• 내부 스타일 시트 : 안에