프론트엔드 Archives -

2025-01-18

w3.css 표시 영역으로 스크롤 JavaScript를 사용하여 뷰로 스크롤하는 방법을 알아보자. scrollIntoView() 메서드 이 scrollIntoView() 메서드는 요소를 브라우저 창의 표시 영역으로 스크롤한다. 1단계) JavaScript 추가 id=”content”인 요소를 브라우저 창의 표시 영역으로 스크롤한다. const element = document.getElementById(“content”); element.scrollIntoView();

2025-01-17

How To – 스프레드 연산자

w3.css 스프레드 연산자 JavaScript에서 세 개의 점 연산자(…) 즉, 스프레드 연산자를 사용하는 방법을 알아보자. 스프레드 연산자 JavaScript의 스프레드 연산자(…)는 반복 가능한 항목(배열과 같음)을 더 많은 요소로 확장한다. 이를 통해 기존 배열의 전체 또는 일부를 다른 배열로 빠르게 복사할 수 있다. 1단계) JavaScript 추가 첫 번째와 두 번째 항목을 numbers변수에 할당하고 나머지는 배열에 넣는다. const numbersOne = [1, 2, 3]; const numbersTwo = [4, 5, 6]; const numbersCombined = […numbersOne, …numbersTwo]; 스프레드 연산자는 종종 배열에서 필요한 것만 추출하는 데 사용된다….

2025-01-16

How To – 숫자형 배열 정렬

w3.css 숫자형 배열 정렬 JavaScript에서 숫자형 배열을 정렬하는 방법을 알아보자. 숫자로 배열 정렬하기 다음을 사용하여 배열을 숫자형으로 정렬할 수 있다. 1단계) JavaScript 추가 const points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a – b}); 배열을 내림차순으로 정렬할 수도 있다. const points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return b – a});

2025-01-15

How To – 두 숫자 사이의 난수

w3.css 두 숫자 사이의 난수 JavaScript에서 두 숫자 사이의 난수를 얻는 방법을 알아보자. 난수 이 JavaScript 함수는 항상 최소값(포함)과 최대값(제외) 사이의 난수를 반환한다. 1단계) JavaScript 추가 function getRndInteger(min, max) { return Math.floor(Math.random() * (max – min) ) + min; } 이 JavaScript 함수는 항상 min과 max 사이의 난수를 반환한다(둘 다 포함): function getRndInteger(min, max) { return Math.floor(Math.random() * (max – min + 1) ) + min; }

2025-01-14

How To – 기본 매개변수 설정

w3.css 기본 매개변수 설정 JavaScript 함수에 대한 기본 매개변수 값을 설정하는 방법을 알아보자. 기본 매개변수 JavaScript의 함수가 누락된 인수(선언된 값보다 작음)로 호출되면 누락된 값은 정의되지 않은 값으로 설정된다. 때때로 이것은 허용되지만 때로는 매개변수에 기본값을 할당하는 것이 더 좋다. 1단계) JavaScript 추가 function myFunction(x, y) { if (y === undefined) { y = 2; } } ECMAScript 2015는 함수 선언에서 기본 매개변수 값을 허용한다. function myFunction (x, y = 2) { // function code }

2025-01-13

How To – JavaScript 지수화

w3.css JavaScript 지수화 JavaScript 지수연산(**)을 사용하는 방법을 알아보자. 지수연산자 지수 연산자( **)는 첫 번째 피연산자를 두 번째 피연산자만큼 거듭제곱한다. 1단계) JavaScript 추가 let x = 5; let z = x ** 2; // result is 25 x ** y는 Math.pow(x, y)와 동일한 결과를 생성한다. let x = 5; let z = Math.pow(x,2); // result is 25 지수화 과제 지수 대입 연산자( **=)는 변수의 값을 오른쪽 피연산자의 거듭제곱으로 늘린다. 예제 let x = 5; x **= 2; // result 25

2025-01-12

How To – 문자열 길이 구하기

w3.css 문자열 길이 구하기 JavaScript에서 문자열의 길이를 찾는 방법을 알아보자. 문자열 길이 해당 length속성은 문자열의 길이를 반환한다. 1단계) JavaScript 추가 var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”; var len = txt.length;

2025-01-11

How To – JavaScript HTML 애니메이션

w3.css JavaScript HTML 애니메이션 JavaScript를 사용하여 애니메이션을 만드는 방법을 알아보자. 기본 웹 페이지 JavaScript를 사용하여 HTML 애니메이션을 만드는 방법을 보여 주기 위해 간단한 웹 페이지를 사용해 보자. 1단계) HTML 추가 <!DOCTYPE html> <html> <body> <h1>My First JavaScript Animation</h1> <div id =”myContainer”> <div id =”myAnimation”>My animation will go here</div> </div> </body> <html> 요소 스타일링 애니메이션이 가능하려면 애니메이션 요소가 “부모 컨테이너”를 기준으로 애니메이션되어야 한다. 컨테이너 요소는 style = “position: relative”로 생성되어야 한다. 애니메이션 요소는 style = “position: absolute”로 생성되어야 한다. 2단계) CSS…

2025-01-10

How To – 구문 강조기 만들기

w3.css 구문 강조기 만들기 구문 강조 도구를 만들고 사용하는 방법을 알아보자. 구문 강조기 색상을 추가하면 코드 조각을 더 쉽게 읽을 수 있다. 1단계) HTML 추가 HTML 코드를 포함하는 <div> <div id=”myDiv”> &lt;!DOCTYPE html&gt;<br> &lt;html&gt;<br> &lt;body&gt;<br> <br> &lt;h1&gt;Testing an HTML Syntax Highlighter&lt;/h2&gt;<br> &lt;p&gt;Hello world!&lt;/p&gt;<br> &lt;a href=”https://www.w3schools.com”&gt;Back to School&lt;/a&gt;<br> <br> &lt;/body&gt;<br> &lt;/html&gt; </div> 2단계) JavaScript 추가 “w3CodeColor”라는 함수를 만들고 DIV 요소를 매개변수로 사용하여 호출한다. w3CodeColor(document.getElementById(“myDiv”)); function w3CodeColor(elmnt) { // click “Try it Yourself” to see the JavaScript… }

2025-01-09

How To – JavaScript를 사용한 미디어 쿼리

w3.css JavaScript를 사용한 미디어 쿼리 미디어 쿼리는 CSS3에서 도입되었으며, 반응형 웹 디자인의 핵심 요소 중 하나다. 미디어 쿼리는 뷰포트의 너비와 높이를 결정하여 모든 기기(데스크톱, 랩톱, 태블릿, 휴대폰 등)에서 웹 페이지가 보기 좋게 보이도록 하는 데 사용된다. window.matchMedia() 메서드는 지정된 CSS 미디어 쿼리 문자열의 결과를 나타내는 MediaQueryList 객체를 반환한다. matchMedia() 메서드의 값은 min-height, min-width, orientation 등과 같은 CSS @media 규칙 의 미디어 기능 중 하나일 수 있다. JavaScript로 미디어 쿼리 사용 뷰포트가 700픽셀 이하이면 배경색을 노란색으로 변경합니다. 700보다 크면 분홍색으로 변경한다….