11주차 - 자바스크립트와 객체

javascript:window.close 왜 이렇게 사용할까? 궁금궁금

자바스크립트 엔진을 사용하는 브라우저가 많아 userAgent 내용이 겹쳐 사용하지 않는다는 것은 어떤 의미인가?

자바스크립트와 객체

객체가 무엇인지 알아보고 자바스크립트 안에 포함되어 있는 개체를 살펴보자. 자바스크립트에 많은 내장 객체가 있는데 그 중에서 Array 객체를 사용하는 방법에 대해 알아보자

16-1 객체 알아보기 16-2 자바스크립트의 내장 객체 16-3 브라우저와 관련된 객체

16-1 객체 알아보기

'객체(object)'는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위

객체란?

문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체입니다. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있습니다.
브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있습니다. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있습니다.
내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 합니다. 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용할 수 있습니다.

객체의 인스턴스 만들기

자바스크립트에서 객체는 참조 형태로 사용해야 합니다. 객체 자체가 아니라 인스턴스의 형태로 만들어서 사용해야 한다. 인스턴스에 식별자를 붙여 사용한다.

인스턴스화를 반드시 해야한다는 맥락이 의미가 잘 이해되지 않는다. 객체 생성과 이를 인스턴스화 하는 개념은 의미론적으로는 이해가 가도 물리적으로 필요한 이유에 대해 이해가 되지 않는다.

프로퍼티와 메서드 이해하기

프로퍼티 : 객체의 특징이나 속성 메서드 : 객체에서 할 수 있는 동작을 표현

마침표 표기법으로 프로퍼티와 메서드 작성하기

16-2 자바스크립트의 내장 객체

Array 객체

Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룹니다.

Array 객체로 배열 만들기

Array 객체의 length 프로퍼티 사용하기

Array 객체의 메서드

표 16-1 Array 객체의 메서드

종류

설명

concat

기존 배열에 요소를 추가해 새로운 배열을 만듭니다.

every

배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환합니다.

filter

배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듭니다.

forEach

매열의 모든 요소에 대해 주어진 함수를 실행합니다.

indexOf

주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾습닌다.

join

배열 요소를 문자열로 합칩니다. 이때 구분자를 지정할 수 있습니다.

push

배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환합니다.

unshift

배열의 시작 부분에 새로운 요소를 추가합니다.

pop

배열의 마지막 요소를 꺼내 그 값을 결과로 반환합니다.

shift

배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환합닌다.

splice

배열에 요소를 추가하거나 삭제합니다.

slice

배열에서 특정한 부분만 잘라 냅니다.

reverse

배열의 배치 순서를 역순으로 바꿉니다.

sort

배열 요소를 지정한 조건에 따라 정렬합니다.

toString

배열에서 지정한 부분을 문자열로 반환합니다. 이때 각 요소는 쉼표(,)로 구분합니다.

더 자세히 알고 싶다면 여기

배열끼리 합치는 concat() 메서드

개념 : 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 준다

배열 안의 요소끼리 합치는 join() 메서드

개념: 배열 요소를 연결해서 하나의 문자열로 만들어 준다. 이때 각 요소 사이에 원하는 구분자를 넣을 수도 있으며, 기본값은 쉼표(,)로 구분

새로운 요소를 추가하는 push(), unshift() 메서드

배열에 새로운 요소를 추가하기 위한 메서드, push(), unshift() push() : 배열의 맨 끝에 요소를 추가 unshift() : 배열의 맨 앞에 요소를 추가

배열의 요소를 꺼내는 pop(), shift() 메서드

pop() : 배열에서 뒤에 있는 요소를 꺼낼 때 사용하는 메서드 shift() : 배열에서 앞에 있는 요소를 꺼낼 때 사용하는 메서드

원하는 위치에 요소를 추가•삭제하는 splice() 메서드

개념: 배열의 맨 뒤나 맨 앞 뿐만 아니라 중간 부분에 요소를 추가하거나 삭제 splice() 메서드를 실행하면 삭제한 요소로 이루어진 새로운 배열이 결괏값으로 반환된다.

1. 인수가 1개인 경우

괄호 안의 파라미터는 배열의 인덱스값을 의미한다. splice() 메서드는 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제합니다.

2. 인수가 2개인 경우

첫 번쨰 인수는 인덱스값을 의미하고, 두 번째 인수는 삭제할 요소의 개수를 의미한다.

3. 인수가 3개 이상인 경우

첫 번째 인수는 배열에서 삭제할 시작 위치를 나타내고, 두 번째 인수는 삭제할 개수를 알려준다. 그리고 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정합니다.

기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드

개념: 배열에서 요소를 꺼내는 기능을 가졌으며, pop(), shift() 메서드와 달리 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고, 실행 결과 기존 배열이 바뀌지 않는다는 특징이 있다.

slice() 메서드에서 인수 2개를 사용할 경우. 인수 2개는 꺼낼 요소의 구간을 의미한다.

Data 객체

Data 객체는 날짜와 시간 정보를 나타낼 수 있다. 그렇기 때문에 현재 날짜와 시간을 출력하거나 달력을 표시할 수 있고, 특정일까지 얼마나 남았는지 알려주는 등 사이트에서 여러가지로 응용할 수 있다.

Data 객체 인스턴스 만들기

Data 객체로 혀냊 날짜 나타내기 new Date();
Data 객체로 특정 날짜 나타내기 new Date("2020-02-25);
Data 객체로 특정 날짜와 시간 나타내기 new Date("2020-02-25T18:00:00");

자바스크립트의 날짜, 시간 입력 방식 알아보기

1. YYYY-MM-DD 형식

new Date("2020")
new Date("2020-02")
new Date("2020-02-25")

2. YYYY-MM-DDHH 형식

new Date("2020-02-25T18:00:00")
new Date("2020-02-25T18:00:00Z") // 국제 표준시

3. MM/DD/YYYY 형식

new Date("02/25/2020)

4. 이름 형식

new Date("Mon Jan 20 2020 15:00:51 GMT+0900 (대한민국 표준시)")

Date 객체의 메서드

날짜/시간 정보를 가져오는 메서드
사용자가 원하는 날짜/시간으로 설정하는 메섣
날짜/시간 형식을 바꿔 주는 메서드

표 16-2 Date 객체의 메서드

날짜/시간 정보 가져오기

구분

설명

getFullYear()

연도를 4자리 숫자로 표시합니다.

getMonth()

0~11 사이의 숫자로 월을 표시합니다. 0부터 1월이 시작되고 11은 12월입니다.

getDate()

1~31 사이의 숫자로 일을 표시합니다.

getDay()

0~6 사이의 숫자로 요일을 표시합니다. 0부터 일요일이 시작되고 6은 토요일입니다.

getTime()

1970년 1월 1일 자정 이후의 시간을 밀치 초(1/1000초)로 표시합니다.

getHours

0~23 사이의 숫자로 시를 표시합니다.

getMinutes()

0~59 사이의 숫자로 분를 표시합니다.

getSeconds

0~59 사이의 숫자로 초를 표시합니다.

getMilliseconds()

0~999 사이의 숫자로 밀리초를 표시합니다.

날짜/시간 설정하기

구분

설명

setFullYear()

연도를 4자리 숫자로 설정합니다.

setMonth()

0~11 사이의 숫자로 월을 설정합니다. 0부터 1월이 시작되고 11은 12월입니다.

setDate()

1~31 사이의 숫자로 일을 설정합니다.

setTime()

1970년 1월 1일 자정 이후의 시간을 밀치 초(1/1000초)로 설정합니다.

setHours

0~23 사이의 숫자로 시를 설정합니다.

setMinutes()

0~59 사이의 숫자로 분를 설정합니다.

setSeconds

0~59 사이의 숫자로 초를 설정합니다.

setMilliseconds()

0~999 사이의 숫자로 밀리초를 설정합니다.

날짜/시간 형씩 바꾸기

구분

설명

toLocaleString()

현재 날짜와 시간을 현지 시간(local time)으로 표시합니다.

toString

Data 객체 타입을 문자열로 표시합니다.

Math 객체

개념: 수학 계산과 관련된 메서드가 많이 포함되어 있다.

기본형 Math.프로퍼티명
Math.메서드명

Math 객체의 프로퍼티

표 16-3 Math 객체의 프로퍼티

종류

설명

오일러 상수

원주율(𝝿)(약 3.141592653589793d의 값

SQRT2

√2(약 1.4142135623730951의 값)

SQRT1_2

1/√2(약 0.7071067811865476의 값)

LN2

log{_e}{2}

LN10

log{_e}{10}

LOG2E

log{_2}{e}

LOG10E

log{_10}{e}

Math 객체의 메서드

표 16-4 Math 객체의 메서드

종류

설명

abs()

절댓값을 반환합니다

acos()

아크 코사인(arc cosine)값을 반환합니다.

asin()

아크 사인(arc sine)값을 반환합니다.

atan()

아크 탄젠트(arc tangent)값을 반환합니다.

atan2()

아크 탄젠트(arc tangent)값을 반환합니다.

ceil()

매ㅐㄱ변수의 소수점 이하 부분을 올립니다.

cos()

코사인(cosine)값을 반환합니다.

exp()

지수 함수를 나타냅니다.

floor()

매개변수의 소수점 이하 부분을 버립니다.

log()

매개변수에 대한 로그(log)값을 반환합니다.

max()

매개변수 중 최댓값을 반환합니다.

min()

매개변수 중 최솟값을 반환합니다.

pow()

매개변수의 지숫값을 반환합니다.

random()

0과 1 사이의 무작위 수를 반환합니다.

round()

매개변수의 소수점 이하 부분을 반올림합니다.

sin()

사이(sine)값을 반환합니다.

sqrt()

매개변수에 대한 제곱근을 반환합니다.

tan()

탄젠트(tangent)값을 반환합니다.

16-3 브라우저와 관련된 객체

웹 브라우저와 관련된 객체를 하나씩 살펴보자.

브라우저와 관련된 객체 알아보기

브라우저는 HTML 소스를 읽으면서 화면의 내용을 표시하고 관련된 객체를 만들어내는 과정을 거친다. 먼저 window 객체를 만들고 밑으로 하위 요소에 해당하는 객체들을 나타내게 된다. 이렇게 만들어진 객체들은 아래와 같은 계층 구조를 나타냅니다.

주로 사용하는 내장 객체에 대해 알아보자

표 16-5 자바스크립트의 내장 객체

종류

설명

window

브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있습니다.

documnet

웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨 있습니다.

navigator

현재 사용하는 브라우저의 정보가 들어 있습니다.

history

현재 창에서 사용자의 방문 기록을 저장합니다.

location

현재 페이지의 URL 정보가 담겨 있습니다.

screen

현재 사용하는 화면 정보를 다룹니다.

window 객체의 프로퍼티

window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 프로퍼티를 사용하기 위해 window.fullScreen처럼 프로퍼티 이름 앞에 'window.'를 붙입니다.

자주 사용하는 window 객체의 프로퍼티를 알아보자.

표 16-6 window 객체의 프로퍼티

종류

설명

document

브라우저 창에 표시된 웹 문서에 접근할 수 있습니다.

frameElement

현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환합니다.

innerHeight

내용 영역의 높이를 나타냅니다.

innerWidth

내용 영역의 너비를 나타냅니다.

localStorage

웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환합니다.

location

window 객체의 위치 또는 현재 URL을 나타냅니다.

name

브라우저 창의 이름을 가져오거나 수정합니다.

outerHeight

브라우저 창의 바깥 높이를 나타냅니다.

outerWidth

브라우저 창의 바깥 너비를 나타냅니다.

pageXOffset

스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같습니다.

pageYOffset

스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같습니다.

parent

현재 창이나 서브 프레임의 부모입니다.

screenX

브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다.

screenY

브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냅니다.

scrollX

스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냅니다.

scrollY

스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냅니다.

sessionStorage

웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환합니다.

window 객체의 메서드

window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련이 있습니다. 앞서 배운 alert() 문이나 prompt() 문은 window의 객체이기에 원래 window.alert와 같이 표현해야 하나 window 객체는 기본 객체이므로 'window.'를 생략해도 괜찮습니다.

표 16-7 window 객체의 메서드

종류

설명

alert()

알림 창을 표시합니다.

blur()

현재 창에서 포커스를 제거합니다.

close()

현재 창을 닫습니다.

confirm()

[확인], [취소] 버튼이 있는 확인 창을 표시합니다.

focus()

현재 창에 포커스를 부여합니다.

moveBy()

현재 창을 지정한 크기만큼 이동합니다.

moveTo()

현재 창을 지정한 좌표로 이동합니다.

open()

새로운 창을 엽니다.

postMessage()

메시지를 다른 창으로 전달합니다.

print()

현재 문서를 인쇄합니다.

prompt()

프롬프트 창에 입력한 텍스트를 반환합니다.

resizeBy()

지정한 크기만큼 현재 창의 크기를 조절합니다.

resizeTo()

동적으로 브라우저 창의 크기를 조절합니다ㅣ

scroll()

문서에서 특정 위치까지 스크롤합니다.

scrollBy()

지정한 크기만큼씩 스크롤합니다.

scorllTo()

지정한 위치까지 스크롤합니다.

sizeToContent()

내용에 맞게 창의 크기를 맞춥니다.

stop()

로딩을 중지합니다.

새 브라우저 창을 여는 open() 메서드

개념: 링크를 클릭하거나 웹 문서를 열 때 새 창이 자동으로 뜨게 하기 위한 메서드 용도: 주로 팝업 창을 띄울 때 사용한다.

창 이름 지정하기

앞선 open() 메서드의 경우 창의 이름을 지정해주지 않으 경우 창이 계속 뜨는 불상사가 일어난다. 하지만 창의 이름을 지정해주게 되면 창이 여러번 띄워지는 것을 예방할 수 있다.

팝업 창 위치 지정하기

개념: open() 메서드로 팝업 창을 표시하면 기본 위치는 화면의 왼쪽 위 구석에 나타나게 된다. 팝업 창의 위치는 open() 메서드의 left와 top 속성을 통해 설정할 수 있다.

팝업 차단 고려하기

개념: 대부분의 팝업의 경우 사용자에게 정보를 강제로 전달하게 됩니다. 그렇기 때문에 팝업창이 열리지 않게 설정되어 있는 경우도 있습니다. 팝업이 차단되어 있는지 확인하고, 이후 필요한 반환값을 확인해봅시다

브라우저 창을 닫는 close() 메서드

개념 : 창을 닫는 메서드이다. 기본형 window.close()

요새 팝업창의 경우 레이어로 표현하여 과거의 팝업창과 달리 보다 트랜디하게 표현하게 되는데 이는 17장에서 배울 수 있는 내용이므로 이후에 확인해보도록 한다.

navigator 객체

navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온•오프라인 등의 여러 정보가 담겨 있다. 이 정보는 사용자가 수정할 수 없고 읽기만 가능하다.

웹 브라우저와 렌더링 엔진

웹 브라우저의 경우 모든 사용자의 웹 브라우저에서 똑같이 동작하게 개발할 필요성이 있다. 이때 가장 먼저 생각해야 할 분야는 렌더링 엔진입니다.

CSS 속성 앞에 프리픽스를 지정 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진이 다르기 때문에 프리픽스를 통해 브라우저를 구분하는 것이다. 또한 웹 브라우저마다 내장된 자바스크립트 엔진도 서로 다르다.

userAgent 프로퍼티 알아보기

navigator 객체에서 알아둬야 할 프로퍼티는 userAgent로 사용자 에이전트 문자열을 의미합니다. userAgent에는 사용자의 웹 브라우저 버전, 자바스크립트의 엔진 종류 등 여러 정보가 들어있다. 따라서 서버에서는 그 정보를 확인하여 사용자에게 맞는 웹 페이지를 보여 줄 수 있다.

각 브라우저의 사용자 에이전트 문자열을 보게 되면 Mozilla라는 예약어로 시작하게 되는데 이는 인터넷 초창기에 넷스케이프 네비게이터 웹 브라우저를 사용해왔기 때문이다.

과거에는 userAgent를 많이 사용했으나 요즘은 자바스크립트 엔진을 사용하는 브라우저가 많아서 userAgent의 내용이 겹치므로 사용하지 않는 추세이다.

userAgent: 내가 어떤 OS를 쓰고 있고, 버전은 어떤 버전인지 웹 브라우저의 정보는 어떤 것인지 등을 담고 있다. 사용자 에이전트가 필요한 이유는 인터넷 브라우저가 어떻게 동작하는가에 관련이 있는데 인터넷 브라우저가 동작하는 과정에 대해 먼저 알아보자.

브라우저 별로 지원하는 기능을 구별하고 지원 범위등을 확인했지만 시간이 흘러 크롬이 압도적인 점유율을 차지하게 되면서 다양한 브라우저들이 1등을 따라하게 된다. 이에따라 기존에 웹 브라우저 별로 자체 엔진이 사용되던 것에서 많은 브라우저들이 크롬을 따라가게 되었다. 또한 구글의 경우 오픈소스를 지향하는 회사익기에 다른 브라우저들이 따라가기 쉬웠었던 것 같다.

사용자 에이전트는 과거에 여러 웹 브라우저에서 동일한 서비스를 제공하기 위해 만들어졌습니다. 각 브라우저 버전과 엔진을 확인하고, 브라우저별 최적화를 시키려고 만들어 둔 기능이죠. 하지만 현재에는 대부분의 브라우저들이 크롬/블링크 엔진을 사용하고 있습니다. 그래서 브라우저보단 접속한 컴퓨터 OS나, 모바일 디바이스를 구분하는 역할이 더 커지게 되었습니다.

navigator 객체 정보 살펴보기

표 16-10 navigator 객체의 주요 프로퍼티

종류

설명

battery

배터리 충전 상태를 알려 줍니다.

cookieEnabled

쿠키 정보를 무시하면 false, 허용하면 true를 반환합니다.

geolocation

모바일 기기를 이용한 위치 정보를 나타냅니다.

language

브라우저 UI의 언어 정보를 나타냅니다.

oscpu

현재 운영체제 정보를 나타냅니다.

userAgent

현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열입니다.

navigator 객체의 메서드는 대부분 일부 브라우저에서만 지원합니다.

history 객체

history 객체에는 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장됩니다. 브라우저 히스토리는 보안 문제 때문에 읽기 전용입니다.

표 16-11 history 객체의 프로퍼티와 메서드

프로퍼티

구분

설명

length

현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장됩니다.

메서드

구분

설명

back()

history 목록에서 이전 페이지를 현재 화면으로 불러옵니다.

forward()

history 목록에서 다음 페이지를 현재 화면으로 불러옵니다.

go()

history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옵니다. 예를 들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러옵니다.

location 객체

브라우저의 주소 표시줄과 관련있는 객체입니다, 즉 location 객체에는 현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.

표 16-12 location 객체의 프로퍼티와 메서드

프로퍼티

구분

설명

hash

URL 중에서 #로 시작하는 해시 부분의 정보를 담고 있습니다.

host

URL의 호스트 이름과 포트 번호를 담고 있습니다.

hostname

URL의 호스트 이름이 저장됩니다.

href

전체 URL입니다. 이 값을 변경하면 해당 주소로 이동할 수 있습니다.

pathname

URL 경로가 저장됩니다.

port

URL의 포트 번호를 담고 있습니다.

protocol

URL의 프로토콜을 저장합니다.

password

도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장합니다.

URL 중에서 ?로 시작하는 검색 내용을 저장합니다.

username

도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장합니다.

메서드

구분

설명

assign()

현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옵니다.

reload()

현재 문서를 다시 불러옵니다.

replace()

현재 문서의 URL을 지우고 다른 URL의 문서로 교체합니다.

toString()

현재 문서의 URL을 문자열로 반환합니다.

screen 객체

사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용합니다.

표 16-13 screen 객체의 프로퍼티와 메서드

프로퍼티

구분

설명

availHeight

UI 영역(예를 들어 윈도우의 작업 표시줄이나 Mac의 독)을 제외한 영역의 높이를 나타냅니다.

availWidth

UI 영역을 제외한 내용 표시 영역의 너비를 나타냅니다.

colorDepth

화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냅니다.

height

UI 영역을 포함한 화면의 높이를 나타냅니다.

orientation

화면의 현재 방향을 나타냅니다.

pixelDepth

화면에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타냅니다.

width

UI 영역을 포함한 화면의 너비를 나타냅니다.

메서드

구분

설명

lockOrientation()

화면 방향을 잠급니다.

unlockOrientation()

화면 방향 잠금을 해제합니다.

Previous10주차 - 함수와 이벤트 Next12주차 - 문서 객체 모델(DOM)

Last updated 2 years ago