Mingg's Diary

2025-01-13

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보다 크면 분홍색으로 변경한다….

2025-01-08

How To – 드래그 가능한 HTML 요소 만들기

w3.css 드래그 가능한 DIV 요소 JavaScript와 CSS를 사용하여 드래그 가능한 HTML 요소를 만드는 방법을 알아보자. 드래그 가능한 DIV 요소 만들기 1단계) HTML 추가 <!– Draggable DIV –> <div id=”mydiv”> <!– Include a header DIV with the same name as the draggable DIV, followed by “header” –> <div id=”mydivheader”>Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> 2단계) CSS 추가 유일하게 중요한 스타일은 position: absolute고 나머지는 여러분에게 달려 있다. #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; border: 1px solid #d3d3d3;…

2025-01-07

How To – 일반적인 장치 중단점

w3.css 일반적인 장치 중단점 일반적인 장치 중단점에 미디어 쿼리를 사용하는 방법을 알아보자. 일반적인 장치 중단점 높이와 너비가 다른 수많은 화면과 기기가 있으므로 각 기기에 대한 정확한 중단점을 만드는 것은 어렵다. 간단하게 하기 위해 다섯 가지 공통 그룹을 타겟팅할 수 있다. 1단계) HTML 추가 /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {…} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {…} /* Medium…

2025-01-06

How To – 닫을 수 있는 목록 항목

w3.css 닫을 수 있는 목록 항목 JavaScript로 목록 항목을 닫는 방법을 알아보자. 닫을 수 있는 목록 항목을 만드는 방법 목록 항목 오른쪽에 있는 “x” 기호를 클릭하면 목록 항목이 닫히거나 숨겨진다. 1단계) HTML 추가 <ul> <li>Adele</li> <li>Agnes<span class=”close”>x</span></li> <li>Billy<span class=”close”>x</span></li> <li>Bob<span class=”close”>x</span></li> <li>Calvin<span class=”close”>x</span></li> <li>Christina<span class=”close”>x</span></li> <li>Cindy</li> </ul> 2단계) CSS 추가 * { box-sizing: border-box; } /* Style the list (remove margins and bullets, etc) */ ul { list-style-type: none; padding: 0; margin: 0; } /* Style the list items */…

2025-01-05

How To – 인용문 슬라이드쇼

w3.css 인용문 슬라이드쇼 CSS와 JavaScript를 사용하여 인용문 슬라이드쇼를 만드는 방법을 알아보자. 인용문 슬라이드쇼 만들기 1단계) HTML 추가 <!– Slideshow container –> <div class=”slideshow-container”> <!– Full-width slides/quotes –> <div class=”mySlides”> <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q> <p class=”author”>- John Keats</p> </div> <div class=”mySlides”> <q>But man is not made for defeat. A man can be destroyed but not defeated.</q> <p class=”author”>- Ernest Hemingway</p> </div> <div class=”mySlides”> <q>I…

2025-01-04

How To – 섹션 카운터

w3.css 섹션 카운터 CSS를 사용하여 “섹션 카운터”를 만드는 방법을 알아보자. 섹션 카운터를 만드는 방법 섹션 카운터는 흥미로운 숫자를 표시하여 사람들에게 사업이 얼마나 잘 진행되고 있는지 알려주는 데 사용된다. 1단계) HTML 추가 <div class=”row”> <div class=”column”> <div class=”card”> <p><i class=”fa fa-user”></i></p> <h3>11+</h3> <p>Partners</p> </div> </div> <div class=”column”> <div class=”card”> <p><i class=”fa fa-check”></i></p> <h3>55+</h3> <p>Projects</p> </div> </div> <div class=”column”> <div class=”card”> <p><i class=”fa fa-smile-o”></i></p> <h3>100+</h3> <p>Happy Clients</p> </div> </div> <div class=”column”> <div class=”card”> <p><i class=”fa fa-coffee”></i></p> <h3>100+</h3> <p>Meetings</p> </div> </div> </div> 2단계)…