전체 글113

• 

  특수문자 와 이모지 특수문자 몇가지 : > (grater then) & : & (ampersand) " : " (double quotes) ' : ' (apostrophe) 스페이스 : (non-breaking space) × : × ÷ : ÷ 이모지 "Smiling face with sunglasses" (😎) : 😎 or 😎 "Thumbs up" (👍) : 👍 or 👍 "Red heart" (❤️) : ❤️ or ❤️ "Crying face" (😢) : 😢 or 😒 "Winking face" (😉) : 😉 or 😉 "Rolling on the floor laughing" (🤣) : 🤣 or 🤗 "Fire" (🔥) : 🔥 or 🔥 "Praying hands" (🙏) : 🙏 or.. HTML 2023. 1. 25.

• 

  HTML Favicon 즐겨찾기 아이콘()은 브라우저의 주소 표시줄, 웹 사이트 제목 옆 또는 브라우저의 탭, 책갈피 및 기록에 표시되는 작은 아이콘이다. HTML에서 이미지 파일(16x16픽셀 또는 32x32픽셀 크기)을 .ico, .png 또는 .gif 형식으로 만들어 파비콘을 만들 수 있다. 그런 다음 HTML 문서의 이 예제에서 태그는 HTML 문서와 동일한 디렉토리에 있는 favicon.ico라는 파일에 연결된다. rel 속성은 이것이 favicon임을 지정하고 href 속성은 favicon 파일의 위치를 지정합니다. type 특성은 favicon의 파일 형식을 지정한다. HTML 2023. 1. 25.

• 

  <video> <audio> 태그 요소는 웹 페이지에 비디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다. Your browser does not support the video tag. 요소는 웹 페이지에 오디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다: Your browser does not support the audio tag. 요소와 유튜브 임베디드 코드를 사용하여 유튜브 비디오를 웹 페이지에 임베디드할 수 있다. 이 예에서는 요소를 사용하여 YouTube 비디오를 내장하고, src 속성은 비디오의 URL을 지정한다. 너비 및 높이 속성은 비디오 플레이어의 치수를 지정한다. 프레임 경계 특성은 비디오 플레이어 주변의 경계를 제거하기 위해 0으로 설정되며, 허용 특성은 재생할 비디오에 대한 사용 권한을 지.. HTML 2023. 1. 25.

• 

  HTML Drag and Drop HTML5는 드래그 앤 드롭 이벤트를 도입하여 웹 페이지에 드래그 앤 드롭 가능한 요소를 만들 수 있다. Drag me 이 예에서, 우리는 두 개의 요소, 즉 ID가 "드래그-요소"인 와 ID가 "드롭-요소"인 를 가지고 있다. 드래그 요소 div는 드래그 가능한 속성을 "true"로 설정하여 드래그할 수 있다. "drop-element" div에는 "ondrop"과 "ondragover"라는 두 개의 이벤트 수신기가 있는데, 이는 각각 요소가 "drop-element" div에 드롭될 때와 요소가 "drop-element" div 위로 끌릴 때 호출된다. 드래그(이벤트) 함수는 요소가 끌릴 때 전송될 데이터(이 경우에는 요소의 ID)를 설정하는 데 사용된다. HTML 2023. 1. 24.

• 

  HTML Web Storage 로컬스토리지 : 사용자 pc에 직접 저장됨 이 예에서는 setItem() 메서드를 사용하여 로컬 저장소에 키-값 쌍을 저장하고 getItem() 메서드를 사용하여 키와 관련된 값을 검색한다. 세션스토리지 : 브라우저 단일세션에 저장 웹 스토리지 API는 특정 키-값 쌍을 삭제하는 removeItem(), 저장소의 모든 키-값 쌍을 삭제하는 clear(), 인덱스를 통해 키를 검색하는 key()와 같은 다른 방법을 제공한다. 또한 웹 스토리지에는 일반적으로 5-10MB 정도의 제한이 있으며 저장된 데이터는 XSS 공격에 취약하므로 스토리지에서 저장 및 검색되는 모든 데이터의 유효성을 제대로 검사해야 한다. HTML 2023. 1. 24.

• 

  Web Workers API 웹쓰레드 웹 워커 API는 웹 페이지가 메인 스레드와 별도로 백그라운드에서 스크립트를 실행할 수 있도록 하여 웹 페이지의 성능과 응답성을 향상시킬 수 있다. 이것은 특히 사용자 인터페이스를 동결하지 않고 이미지 처리, 데이터 조작 및 대량 계산과 같은 장기 실행 또는 계산 비용이 많이 드는 작업을 실행하는 데 유용하다. worker.js라는 새 JavaScript 파일을 만든다. self.addEventListener("message", function(e) { var data = e.data; // Perform a long-running task here var result = performLongRunningTask(data); // Send the result back to the main thread s.. HTML 2023. 1. 24.

• 

  HTML SSE API SSE(Server-Sent Events)는 웹 페이지가 서버로부터 실시간으로 업데이트를 받을 수 있도록 하는 기술이다. 채팅, 알림 및 대시보드와 같은 양방향 실시간 애플리케이션을 구축하는 간단하고 효율적인 방법이다. 이 예에서는 이벤트를 인수로 처리할 서버 측 스크립트의 URL을 전달하여 새 EventSource 개체를 만든다. 그런 다음 스크립트는 서버로부터 수신된 메시지를 처리하도록 메시지 수신기를 설정한다. 서버 측에서는 이벤트를 전송하는 스크립트, 즉 PHP 스크립트 또는 HTTP 요청을 처리할 수 있는 다른 서버 측 언어를 사용해야 한다. 이 스크립트는 스크립트가 요청될 때마다 현재 서버 시간이 포함된 메시지를 클라이언트에 보낸다. SSE는 HTTP를 통해 작동하며 클라이언트에서 서버로 단일.. HTML 2023. 1. 24.

• 

  페이지에 스크립트 추가 및 테스트 My First Web Page My First Paragraph Try it 방법1 : html "demo" element의 innerHTML로 집어넣기 document.getElementById("demo").innerHTML = 1 + 2; 방법2 : html body에 쓰기 document.write(2 + 3); 방법3 : 브라우저 콘솔창에 쓰기 console.log(3 + 4); 방법4 : 브라우저 메시지박스로 띄우기 alert(5 + 6); Javascript 2023. 1. 24.

• 

  자료형 주석처리 대소문자 구별 및 카멜케이스(소문자로 시작) 사용한다. 주석 // 단일라인 주석 /* 멀티라인1 멀티라인2 */ let(변수) , const(상수) 선언 var가 function-scouped로 전역적으로 hoisting이 일어나서 변수 선언이전에도 해당 변수를 사용할 수 있었으며 여러 문제를 야기한다. var colorCode = "red"; let, const는 block-scoped단위로 hoisting이 일어난다. 앞으로 var대신에 let, const 문으로 변수를 선언한다. let colorCode = "red"; JavaScript의 타입 1. 원시 값 (일반적인 변수) 타입 값(범위) 예 Boolean true or false const const1 = true; let value.. Javascript 2023. 1. 24.

• 

  연산자 산술 연산자(예: +, -, *, /, %) 비교 연산자(예: ==, ===, !=, !==, >, =, y); // true console.log(x < y); // false // Logical operators(논리연산자) let p = true; let q = false; console.log(p && q); // false console.log(p || q); // true console.log(!p); // false // Assignment operators(할당연산자) let m = 5; m += 2; // m = m + 2 console.log(m); // 7 // Conditional (ternary) operator(3항 연산자) let age = 25; let canDrive = (.. Javascript 2023. 1. 24.

• 

  함수 자바스크립트 함수는 프로그램 전체에 걸쳐 정의되고 재사용될 수 있는 코드 블록이다. 함수는 0개 이상의 매개 변수를 입력으로 사용할 수 있으며 값을 반환하거나 반환하지 않을 수 있다. 다음은 자바스크립트에서 함수를 정의하기 위한 기본 구문이다. function functionName(parameter1, parameter2, ...) { // function body // statements to be executed } function sayHello(name) { console.log("Hello, " + name); } sayHello("John"); // Output: "Hello, John" ECMAscript 6에 소개된 함수 표현식의 약어인 화살표 함수 표현식을 사용할 수도 있다. let s.. Javascript 2023. 1. 24.

• 

  {} Object 자바스크립트에서 객체는 속성의 집합이며, 여기서 속성은 이름(또는 키)과 값 사이의 연관성이다. 객체는 여러 가지 방법으로 정의할 수 있지만 가장 일반적인 방법은 접미사 {} 집합인 객체리터럴 표기법을 사용하는 것이다. 다음은 객체 리터럴 표기법을 사용하여 객체를 정의하는 방법의 예이다. let person = { name: "John", age: 30, occupation: "Developer" }; 위의 예에서 person은 name, age, occ upattion의 세 가지 속성을 가진 개체이며, 각 속성은 해당 속성과 관련된 값을 가진다. 점 표기법 또는 대괄호 표기법을 사용하여 객체의 속성에 액세스할 수 있다: console.log(person.name); // Output: "John" co.. Javascript 2023. 1. 24.

• 

  문자열 함수 자바스크립트에서 문자열은 텍스트를 표현하는 데 사용되는 연속된 문자이다. 문자열은 작은따옴표 또는 큰따옴표로 묶는다. 다음은 자바스크립트에서 문자열을 만드는 방법의 예이다. let message = "Hello, World!"; 자바스크립트는 문자열을 조작하는 데 사용할 수 있는 다음과 같은 많은 내장 메서드를 제공한다: length: returns the number of characters in a string toUpperCase(): returns the string in uppercase toLowerCase(): returns the string in lowercase indexOf(substring): returns the index of the first occurrence of the s.. Javascript 2023. 1. 24.

• 

  백틱(`)과 템플릿 리터럴 JavaScript 템플릿 리터럴은 ECMA스크립트 6(ES6)에 도입된 새로운 기능으로 보다 강력하고 유연한 구문으로 문자열을 만들 수 있다. 템플릿 리터럴은 작은따옴표나 큰따옴표 대신 백틱(`)으로 묶는다. 템플릿 리터럴의 주요 이점 중 하나는 문자열에 식을 ${}(으)로 묶어서 포함할 수 있다는 것이다. let name = "John"; let age = 30; console.log(`My name is ${name} and I am ${age} years old.`); // Output: "My name is John and I am 30 years old." 템플릿 리터럴을 사용하면 이스케이프 문자()를 사용하지 않고 여러 줄의 문자열을 만들 수 있다. let text = `This is a m.. Javascript 2023. 1. 24.

• 

  Number Methods 자바스크립트는 숫자 작업을 위한 다양한 메서드를 제공한다. 다음 예제에서 살펴보자. let num = 0; // toString(): 문자열로 변환 num = 123; console.log(num.toString()); // Output: "123" //toFixed(n): 소수점 자리 수 고정 num = 3.14159; console.log(num.toFixed(2)); // Output: "3.14" //toExponential(n): 지수로 변환 num = 1000; console.log(num.toExponential(2)); // Output: "1.00e+3" //parseInt(string, radix): 문자열을 숫자로 변환 num = "123"; console.log(parseInt(nu.. Javascript 2023. 1. 24.

• 

  배열 javaScript 배열은 단일 변수에 여러 값을 저장하는 데 사용된다. 배열은 숫자, 문자열 및 개체와 같은 서로 다른 데이터 유형의 값을 저장할 수 있다. let numbers = [1, 2, 3, 4, 5]; 배열 생성자를 사용하여 배열을 생성할 수도 있다. 그러나 new Array()보다 [] 방식을 권장한다. let numbers = new Array(1, 2, 3, 4, 5); 배열은 인덱스를 사용하여 배열 요소에 액세스할 수 있다. console.log(numbers.length); // Output: 5 console.log(numbers[0]); // Output: 1 console.log(numbers[2]); // Output: 3 배열에서 사용되는 내장 메서드 push(element.. Javascript 2023. 1. 24.

• 

  Math , 난수 난수 Math.random(): 0과 1사이의 난수 발생 Math.floor(Math.random() * 100) + 1; - 1부터 100사이의 난수가 리턴됨 - 100대신에 원하는 범위의 최대값을 넣으면 난수를 구할 수 있음 Math 매서드 종류 및 설명 Math.abs(x): returns the absolute value of x console.log(Math.abs(-5)); // Output: 5 Math.sqrt(x): returns the square root of x console.log(Math.sqrt(16)); // Output: 4 Math.pow(x, y): returns x raised to the power of y console.log(Math.pow(2, 3)); // O.. Javascript 2023. 1. 24.

• 

  if else 조건문 자바스크립트는 특정 조건에 따라 다른 처리를 하기위해 조건문을 사용한다. let age = 19; if (age >= 21) { console.log("You are old enough to drink!"); } else if (age >= 19) { console.log("You are old enough to vote!"); } else { console.log("You are not old enough to drink or vote!"); } 이 예에서 다른 if 블록 내부의 코드는 가변 연령 값이 19보다 크거나 같으나 21보다 작은 경우에만 실행된다. 연령이 19세 미만이면 마지막 블록의 코드가 실행된다. 여러 개의 다른 if 문을 연결하여 하나의 if-else 블록에서 여러 조건을 확인할 수 .. Javascript 2023. 1. 24.

• 

  switch 조건문 switch 문은 식의 값을 여러 개의 경우와 비교하고 일치하는 경우 블록 내의 코드가 실행된다. 각 블록의 하단에는 break문을 사용해 다른 블록으로 실행을 막아야 한다. let day = 'Monday'; switch (day) { case 'Monday': console.log('Today is Monday'); break; case 'Tuesday': console.log('Today is Tuesday'); break; case 'Wednesday': console.log('Today is Wednesday'); break; default: console.log('Today is another day'); } let x = 3; switch(true){ case x > 0 && x < 5: c.. Javascript 2023. 1. 24.

• 

  for do while 반복문 for 반복문 for (let i = 1; i Javascript 2023. 1. 24.