본문 바로가기

Webstoryboy

Category

Explanation

전체 글

 (864)
[jQuery] .slice() .slice() 선택된 요소에서 조건의 범위로 재선택합니다. .slice() 선택된 요소에서 조건의 범위로 재선택합니다. 문법(Syntax) $("선택자").slice("시작"); $("선택자").slice("시작","끝"); 정의(Definition) 선택된 요소에서 조건의 범위로 시작점과 끝점을 선택합니다. Sample1 .slice(start,end) 선택한 요소에 범위를 지정하여 선택합니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다. .has() 메서드는 선택된 요소의 자식 요소에서..
[jQuery] .not() .not() 선택된 요소에서 조건에 맞지(반대) 않는 것을 선택합니다. .not() 선택된 요소에서 조건에 맞지(반대) 않는 것을 선택합니다. 문법(Syntax) $("선택자").not("선택자"); 정의(Definition) 선택된 요소에서 조건에 맞지(반대) 않는 것을 선택합니다. Sample1 .not("selector") 선택한 요소에 해당 하지 않는 것을 선택합니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다. .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니..
[jQuery] .map() .map() 선택된 요소에서 함수를 사용하여 새로운 집합을 만듭니다. .map() 선택된 요소에서 함수를 사용하여 현재 매치되는 각각의 요소들을 새로운 제이쿼리 객체를 만들 수 있습니다. 문법(Syntax) $("선택자").map("콜백함수"); 정의(Definition) 이것은 jQuery.map()를 대신해서 사용 할 수 있으며, .get() 메서드와 같이 사용합니다. map() 메서드는 각 요소의 속성들을 가져 올 수 있습니다. 이것은 아래의 예제를 통해 확인 할 수 있습니다. Sample1 .map(callback) : 콜백함수의 this는 현재 DOM를 참조합니다. 함수는 각각의 데이터 값을 가지고 오며, 데이터 값은 배열에 저장됩니다. 만약 null이나 undefined 값이 나온다면 각각의 ..
[jQuery] .last() .last() 선택된 요소에서 마지막 번째 요소를 찾습니다. .last() 선택된 요소에서 마지막 번째 요소를 찾습니다. 문법(Syntax) $("선택자").last(); 정의(Definition) 선택된 요소에서 마지막 번째 자식 요소를 찾습니다. 비교(Compare) .last()는 선택한 요소의 마지막 번째 요소를 선택하는 메서드입니다. :last()는 선택한 요소의 마지막 번째 요소를 선택하는 선택자입니다. .last-child()는 마지막 번째 자식 요소를 선택하는 선택자입니다. Sample1 .last()는 형제 요소 중에 마지막 번째 자식을 선택합니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된..
[jQuery] .is() .is() 선택한 요소에서 주어진 선택자가 있는지 판별합니다. .is() 선택한 요소에서 주어진 선택자가 있는지 판별합니다. 문법(Syntax) $("선택자").is("선택자"); $("선택자").is("변수"); $("선택자").is("함수"); 정의(Definition) 선택한 요소에서 주어진 선택자가 있는지 판별하여 있으며 true를 반환합니다. Sample1 선택한 요소 중에 원하는 선택자가 있으면 활성화합니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다. .has() 메서드는 선택된..
[jQuery] .has() .has() 선택한 요소에서 주어진 선택자가 있으면 선택한 요소를 선택합니다. .has() 선택한 요소에서 주어진 선택자가 있으면 선택한 요소를 선택합니다. 문법(Syntax) $("선택자").has("선택자"); 정의(Definition) 선택된 요소에서 선택자(태그, 아이디, 클래스)가 있으면 선택한 요소를 선택합니다. Sample1 선택한 요소 중에 원하는 선택자가 있으면 선택한 요소를 선택하는 예제입니다. Sample1 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. 첫 번째 자식입니다. 첫 번째 자식입니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .first() 메서드는 선택된 요소에서 첫번째 자식 ..
[jQuery] .first() .first() 선택된 요소에서 첫 번째 요소를 찾습니다. .first() 선택된 요소에서 첫 번째 요소를 찾습니다. 문법(Syntax) $("선택자").first(); 정의(Definition) 선택된 요소에서 첫 번째 자식 요소를 찾습니다. 비교(Compare) .first() 선택한 요소의 첫 번째 요소를 선택하는 메서드입니다. :first() 선택한 요소의 첫 번째 요소를 선택하는 선택자입니다. .first-child() 첫 번째 자식 요소를 선택하는 선택자입니다. Sample1 .first() 형제 요소 중에 첫 번째 자식을 선택합니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나..
[jQuery] .filter() .filter() 선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드입니다. .filter() 선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드입니다. 문법(Syntax) $("선택자").filter("선택자"); $("선택자").filter(변수); $("선택자").filter(함수); 정의(Definition) 선택된 요소에서 선택자(태그, 아이디, 클래스)를 통해 선택합니다. 선택된 요소에서 변수를 통해 선택합니다. 선택된 요소에서 함수를 통해 선택합니다. 비교(Compare) .filter()는 선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드입니다. Sample1 선택자, 클래스를 통해 선택하는 예제입니다. 결과 탐색(Traversing) .eq() 메서드는 선택한..
[jQuery] .eq() .eq() 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다. .eq() 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다. 문법(Syntax) $("선택자").eq("숫자"); 정의(Definition) 선택한 요소의 형제 중 숫자를 통해 선택합니다. 음수를 설정하면 끝을 기준으로 선택합니다. 비교(Compare) .eq() 선택한 요소를 메서드를 통해 선택합니다. :eq() 선택한 요소를 선택자를 통해 선택합니다. Sample1 .eq(index) 형제 요소 중에 숫자를 통해 선택할 수 있습니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .firs..
[jQuery] .siblings() .siblings() 선택한 요소의 형제 요소를 모두 찾습니다. .siblings() 선택한 요소를 제외한 형제 요소를 모두 찾습니다. 문법(Syntax) $("선택자").siblings(); $("선택자").siblings("선택자"); 정의(Definition) 선택한 요소의 형제 요소를 선택합니다. 선택한 요소의 형제 요소 중 선택자(태그,아이디,클래스)를 통해 선택합니다. Sample1 선택한 요소를 제외한 형제 선택자를 선택합니다. 결과 탐색(Traversing) .children() 메서드는 선택한 요소의 모든 자식을 선택합니다. 첫번째 자식입니다. 첫번째 자식입니다. .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다. .find() 메서드는 선택한 요소에..
[jQuery] .prevUntil() .prevUntil() 선택한 요소의 이전에 위치한 요소를 조건에 맞을 때까지 찾습니다. .prevUntil() 선택한 요소의 이전에 위치한 요소를 조건에 맞을 때까지 찾습니다. 문법(Syntax) $("선택자").prevUntil(); $("선택자").prevUntil("선택자"); $("선택자").prevUntil("선택자","조건"); 정의(Definition) 선택한 요소의 이전 형제 요소를 선택합니다. 선택한 요소의 이전 형제 요소 중 선택자(태그,아이디,클래스)를 통해 선택합니다. 선택한 요소의 이전 형제 요소 중 선택자부터 조건까지 선택합니다. 비교(Compare) .prev() : 선택한 요소의 이전 요소를 선택합니다. .prevAll() : 선택한 요소의 이전 모든 요소를 선택합니다. ...
[Javascript] 이벤트 이벤트 이벤트란 마우스를 오버하거나 키보드를 입력할 때 발생하는 모든 동작을 말합니다. 함수는 조건에 맞으면 실행하지만 이벤트는 이벤트 발생시 실행하는 실행문입니다. 이벤트 자바스크립트에는 다음과 같은 이벤트가 있습니다. 애니메이션 이벤트 클립보드 이벤트 드래그 이벤트 포커스 이벤트 URL 이벤트 인풋 이벤트 키보드 이벤트 마우스 이벤트 페이지 전환 이벤트 PopState 이벤트 Progress 이벤트 storage 이벤트 터치 이벤트 트랜지션 이벤트 UI 이벤트 휠 이벤트 이벤트에서 쓰는 용어 이벤트 리스너 : 이벤트 속성에 연결된 함수를 나타냅니다. 디폴트 이벤트 : 요소가 가지고 있는 기본적인 이벤트를 나타냅니다. 이벤트 모델 : 이벤트를 연결하는 방법을 나타냅니다. Mouse Event 종류 설명..
[Javascript] 문서 객체 문서 객체 문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 문서와 관력된 객체입니다. 문서 객체 문서 객체 속성 종류 설명 createElement() 요소 노드를 생성합니다. createTextNode() 텍스트 노드를 생성합니다. appendChild() 객체에 노드를 추가합니다. setAttribute() 객체의 속성을 설정합니다. getAttribute() 객체의 속성을 가져옵니다. getElementById() ID 속성을 가져옵니다. getElementsByName() 객체의 속성 이름을 가져옵니다. getElementsByTagName() 태그를 선택합니다. removeChild() 객체의 자식 노드를 제거합니다...
[Javascript] location 객체 location 객체 location 객체는 현재 사용 중인 URL에 대한 정보를 제공하는 객체입니다. location 객체 location 객체는 브라우저 주소 창에 대한 속성과 메서드를 제공하는 객체입니다. location.속성 location 객체 메서드 종류 설명 location.assign() 새로운 문서를 로드합니다. location.reload() 현재 문서를 새로 고침합니다. location.replace() 현재 문서를 새로운 것으로 변경합니다. location 객체 속성 종류 설명 location.hash() URL의 해시값(#값)을 반환합니다. location.host() URL에 호스트 이름과 포트 번호를 반환합니다. location.hostname() URL에 포함된 호스트 이름을..
[Javascript] history 객체 history 객체 history 객체는 사용자가 방문한 사이트 정보를 제공하는 객체입니다. history 객체 history 객체는 사용자가 방문한 사이트 정보를 제공하는 객체입니다. history.속성 history 객체 속성 종류 설명 length history 기능으로 이동 가능한 URL 개수를 반환합니다. history 객체 메서드 종류 설명 history.back() 이전 방문한 페이지로 이동합니다. history.forward() 다음 방문한 페이지로 이동합니다. history.go(숫자) history에 저장되어 있는 페이지 중 숫자 페이지로 이동합니다 Sample1 브라우저 주소와 관련된 예제입니다. 결과 이전페이지 다음페이지 1단계 이전페이지 2단계 이전페이지 html 이전페이지 다음페..
[Javascript] screen 객체 screen 객체 screen 객체는 사용자의 화면과 관련된 정보를 제공하는 객체입니다. screen 객체 screen 객체는 사용자의 화면과 관련된 정보를 제공하는 객체입니다. screen.속성 screen 객체 속성 종류 설명 screen.availHeight() 작업표시줄을 제외한 화면의 사용 가능한 높이 값을 반환합니다. screen.availWidth() 작업표시줄을 제외한 화면의 사용 가능한 너비 값을 반환합니다. screen.colorDepth() 화면의 표현 가능한 컬러 색상 수를 반환합니다. screen.pixelDepth() 화면의 픽셀당 비트 수를 반환합니다. screen.height() 화면의 높이 값을 반환합니다. screen.width() 화면의 너비 값을 반환합니다. Sampl..
[Javascript] navigator 객체 navigator 객체 navigator 객체는 브라우저에 대한 정보를 가지고 있는 객체입니다. navigator 객체 navigator 객체는 브라우저와 관련된 정보를 컨트롤 합니다. 브라우저에 대한 버전, 정보, 종류 등 관련된 정보를 제공합니다. navigator.속성 navigator 객체 속성 종류 설명 navigator.appCodeName 브라우저의 코드명을 반환합니다. navigator.appName 브라우저의 이름을 반환합니다. navigator.appVersion 브라우저의 버전을 반환합니다. navigator.cookieEnabled 브라우저의 쿠키 사용 가능 여부를 반환합니다. navigator.language 브라우저에서 사용되는 언어를 반환합니다. navigator.onLine ..
[Javascript] window 객체 window 객체 브라우저 객체는 브라우저에 내장된 객체를 말하며, window 객체는 브라우저 객체의 최상위 객체입니다. window 객체에는 document, screen, location, history, navigator 객체를 포함하고 있으며, 이를 브라우저 객체 모델(BOM: Browser Object Model)이라고 합니다. window 객체 window 객체 속성(Properties) 종류 설명 closed 브라우저 창이 열려 있는지 닫혀 있는지에 대한 정보의 값을 불린값으로 반환합니다. console 디버깅을 목적으로 브라우저에서 객체의 정보를 반환합니다. document 브라우저에 대한 문서 정보를 표현합니다. event 브라우저에 이벤트 정보를 표현합니다. frames 브라우저에 구..
[Javascript] 정규 표현 객체 정규 표현 객체 정규 표현 객체(RegExp)는 입력 요소에 테이터를 규칙에 맞게 작성했는지 판단해서 알려주는 객체입니다. 정규 표현식(RegExp) 객체 var 변수 = / 패턴 / 플래그; var 변수 = new RegExp("패턴","플래그"); 정규 표현 메서드 종류 설명 search() String 객체의 메서드 항목을 검색하고 위치를 반환합니다. replace() String 객체의 메서드 항목을 검색하고 해당 문자를 바꿉니다. test() 정규 표현식과 일치한 문자열이 있으면 true를 반환합니다. exec() 정규 표현식과 일치하는 문자열을 반환합니다. match() 정규 표현식과 일치하는 문자열을 반환합니다. 정구 표현 검색 옵션 종류 설명 * 0회 이상 일치하는 문자를 검사할 때 사용합..
[Javascript] 수학 객체 수학 객체 수학 객체(Math Object)는 수학과 관련된 기능과 속성을 제공하는 객체입니다. 수학 객체 자바스크립트에서는 수학과 과련된 객체를 제공합니다. 수학 관련 객체 메서드를 이용하면 수학과 관련된 작업들을 처리 할 수 있습니다. Math 객체 속성 종류 설명 Math.E 오일러의 상수, 2.718281828459045 Math.LN2 2의 자연로그, 0.6931471805599453 Math.LN10 10의 자연로그, 2.302585092994046. Math.LOG2E 밑이 2인 로그 E, 1.4426950408889634 Math.LOG10E 밑이 10인 로그 E, 0.4342944819032518 Math.PI 원의 둘레와 지름의 비율, 3.141592653589793 Math.SQRT1..
[Javascript] 배열 객체 Array 객체 배열 객체(Array Object)는 여러 개의 데이터를 저장하기 위한 객체입니다. Array 객체 생성 var 변수 = new Array(); Array 객체 속성 속성 설명 length 배열 요소의 개수를 알아냅니다. Array 객체 메서드 함수 설명 concat() 여러 개의 배열을 새 배열로 반환합니다. copyWithin() 두 배열의 조합으로 구성된 새 배열을 반환합니다. entries() 배열의 각 인덱스에 대한 키와 값을 반환합니다. every() 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. fill() 배열의 시작 인덱스부터 끝 인덱스까지 하나의 값으로 채웁니다. filter() 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합..
[Javascript] 날짜 객체 날짜 객체 날짜 객체(Data Object)는 날짜와 관련된 객체입니다. 날짜 객체 생성 var 참조 변수 = new Data(); UTC(협정 세계표준시)와 GMT(그리니치 표준시) UTC(협정 세계표준시)는 1972년 1월 1일부터 시행된 국제 표준시이며, GMT(그리니치 표준시)는 런던을 기점으로 하고, 웰링턴에 종점으로 설정되는 협정 세계시의 기준시간대입니다. UTC와 GMT는 초의 소숫점 단위에서만 차이가 나기 때문에 일상에서는 혼용되어 사용되며, 기술적인 표기에서는 UTC가 사용됩니다. 초 계산 1분 = 1000(msc) 1분(60초) = 1000 * 60 //60,000(msc) 1시간(60분) = 1000 * 60 * 60 //3,600,000(msc) 1일(60분*24) = 1000 * ..
[Javascript] 숫자 객체 숫자 객체 숫자 객체(Number Object)는 숫자와 관련된 객체입니다. 자바스크립트를 이용하여 숫자를 표시하거나, 표현 가능한 수의 속성과 표기법에 대한 메서드를 제공합니다. 숫자 객체 생성 var 변수 = new Number; 숫자 객체 속성 종류 설명 MAX_SAFE_INTEGER 표현할 수 있는 안전한 최대 정수값을 나타냅니다. MAX_VALUE 표현할 수 있는 가장 큰 수를 나타냅니다. MIN_SAFE_INTEGER 표현할 수 있는 안전한 최소 정수값을 나타냅니다. MIN_VALUE 표현할 수 있는 가장 작은 수를 나타냅니다. NEGATIVE_INFINITY 음의 무한대 수를 나타냅니다. NaN 숫자가 아닌 경우를 나타냅니다. POSITIVE_INFINITY 양의 무한대 수를 나타냅니다. 숫..
[Javascript] 문서 객체 문자 객체 문자객체(String Object)는 문자와 관련된 객체입니다. 문자 객체 생성 var 변수 = new String(문자형 데이터) String 객체의 속성 종류 설명 length 문자열의 길이를 가져옵니다. String 객체의 메서드 종류 설명 charAt() 문자열에서 인덱스 번호에 해당하는 문자를 반환합니다. charCodeAt() 문자열에서 인덱스에 대한 유니코드를 나타내는 0부터 65535 사이의 정수를 반환합니다. codePointAt() 문자열에서 인덱스에 대한 유니코드 포인트 값인 아닌 정수를 반환합니다. concat() 여러 개의 문자열을 새 문자열로 반환합니다. endsWith() 문자열에서 특정 문자열로 끝나는지를 확인합니다. includes() 하나의 문자열이 다른 문자열..
[Javascript] 객체 객체 자바스크립트는 객체 기반 언어입니다. 객체는 데이터와 연산 작업을 담고 있는 기본적인 기능이라고 생각하면 됩니다. 객체는 기능 또는 속성을 가지고 있으며, 우리 주변의 모든 사물들을 객체라고 표현 할 수 있습니다. 객체 객체(object)란 데이터와 연산 작업을 담고 있는 기본적인 기능이며, 메서드(Method)와 속성(Attribute)으로 이루어져 있습니다. 객체.메서드(); 객체가 할 수 있는 동작 값 객체.속성; 객체의 기본 데이터 값 Sample1 객체를 생성하는 방법 예제입니다. 결과 100 200 100 200 100 200 100 200 100 200 100 200 100 200 100 200 자바스크립트 100 200 자바스크립트 자바스크립트가 실행되었습니다. 자바스크립트가 실행되었..
[Javascript] 내장 함수 내장 함수 자바스크립트에서 기본적으로 제공하는 함수입니다. 내장 함수 함수 설명 eval() 문자형 데이터를 큰따옴표가 없는 스크립트 코드로 처리합니다. isFinite() 유한수인지 체크해서 논리값으로 돌려줍니다. isNaN() 데이터에 숫자가 아닌 문자를 포함하면 true를 반환합니다. parseFloat() 문자형 데이터를 실수형 데이터로 바꿉니다. parseInt() 문자형 데이터를 정수형 데이터로 바꿉니다. String() 문자형 데이터로 바꿉니다. Number() 숫자형 데이터로 바꿉니다. Boolean() 논리형 데이터로 바꿉니다. Sample1 내장 함수를 사용하는 기본 예제입니다. 결과 변수 값 1.23456 정수형 데이터[parseInt()] : 1 실수형 데이터[parseFloat()..
[Javascript] 함수의 사용형태 함수의 사용형태 함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다. 함수의 사용형태 함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다. 기본적인 함수 함수를 사용하는 가장 기본적인 형태입니다. 익명 함수 익명 함수는 변수에 함수를 선언하는 방법입니다. 매개변수가 있는 함수 변수를 통해 함수의 값을 전달하는 함수입니다. 리턴값이 있는 함수 결과 값이 있는 함수입니다. 재귀 함수 함수 정의문 내에 함수를 다시 호출하여 실행하는 함수입니다. 콜백 함수 함수를 변수에 저장하고 변수를 함수의 인수로 사용하여 매개변수에 전달하는 함수입니다. 내부 함수 내부 함수는 함수 안에 함수를 선언하는 함수를 말합..
[Javascript] 함수 함수 함수는 프로그램이 있어 가장 중요한 영역입니다. 함수는 실행문을 저장하여 사용할 수 있으며, 함수의 형태는 다양하기 때문에 다양한 함수의 사용방법을 익히고 해석 할 수 있어야 합니다. 함수 함수는 하나의 실행문을 저장하고 변수는 하나의 데이터를 저장하여 사용합니다. 함수는 스크립트 실행문을 보관하는 역할을 하기 때문에 반복 사용되는 코드를 구조화하거나 재활용을 목적으로 사용합니다. 함수에서 쓰는 용어 매개변수 : 함수에 자료를 넘기기 위한 변수 리턴 값 : 함수를 실행하고 나오는 결과 값 콜백함수 : 함수에 매개변수로 함수를 전달할 때 사용하는 함수 호출 : 함수 내부를 실행시킬 때 호출이라고 표현 Sample1 함수를 사용하는 이유에 관한 예제입니다. html
[Javascript] continue문 continue문 break문과 continue문은 반복문을 제어하는 명령어입니다. continue문 코드 실행 중에 continue을 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다. for(초깃값; 조건식; 증감식){ continue; 실행문 } var 변수 = 초깃값; while(조건식){ continue; 실행문; 증감식; } Sample1 break문와 continue문을 이용한 예제입니다. html
[Javascript] break문과 continue문 break문 break문과 continue문은 반복문을 제어하는 명령어입니다. break문 break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다. for(초깃값; 조건식; 증감식){ break; 실행문 } var 변수 = 초깃값; while(조건식){ break; 실행문; 증감식; } Sample1 break문와 continue문을 이용한 예제입니다. html
1 ··· 24 25 26 27 28 29
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바