icle
HTML DOM Document querySelectorAll() Method
Example
문서에서 class="example"를 가진 모든 요소를 가져옵니다.
<body>
<h2 class="example">A heading with class="example"</h2> <!-- red 배경색 적용됨 -->
<p class="example">A paragraph with class="exa
YPE html>
<html lang="en">
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first di
부분)입니다.
display속성을 flex로 설정하면 플렉스 컨테이너는 유연해집니다.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<me... y
flex-direction속성은 컨테이너가 플렉스 아이템을 쌓을 방향을 정의합니다.
Example
column값은 수직으로(상단에서 하단으로) 플렉스 아이템을 배치합니다.
<st... 2</div>
<div>3</div>
</div>
</body>
Example
column-reverse값은 수직 방향(하단에서 상단으로)으로 플렉스 아이템을 배치합니... >2</div>
<div>3</div>
</div>
</body>
Example
row값은 수평(좌측에서 우측으로)으로 플렉스 아이템을 배치합니다.
<style>
CSS Advanced - CSS Media Queries - Examples
description : CSS (Cascading Style Sheets) Advanced - CSS (Cascading Style Sheets) Media Queries - Examples
author : 오션
email : shlim@repia.com... of the article
CSS Advanced - CSS Media Queries - Examples
CSS Media Queries - More Examples
미디어 쿼리를 사용하는 몇 가지 예제를 더 살펴 보겠습니다.
미디어 쿼리는 다양한 기기에 맞춤형 스타일 시트를 제공하는 데
e article
Javascript HTML DOM classList Property
Example
<div> 요소에 “mystyle” 클래스를 추가합니다.
<head>
<st... alue , 요소의 클래스 명 리스트를 포함하는 DOMTokenList
More Examples
Example
<div> 요소에 다수의 클래스를 추가합니다.
<head>
<style>
.mystyle {
width: 500px;
h... lass"> 로 변경되고 CSS가 적용됨*/
</script>
</body>
Example
<div> 요소에서 클래스를 제거합니다.
<head>
<style>
에 대해 한 번씩 함수(콜백 함수, a callback function)를 호출합니다.
Example
let txt = "";
let numbers = [45, 4, 9, 1... (value parameter)만을 사용합니다. 다음과 같이 다시 작성할 수 있습니다.
Example
let txt = "";
let numbers = [45, 4, 9, 1... 서드는 기존 배열을 변경하지 않습니다.
다음 예제에서는 각 배열 값에 2를 곱합니다.
Example
let numbers1 = [45, 4, 9, 16, 25];
let n... e 매개변수만 사용하는 경우, index 및 array 매개변수를 생략할 수 있습니다.
Example
let numbers1 = [45, 4, 9, 16, 25];
let n
lace) 작업을 할 수 있습니다.
Syntax
/pattern/modifiers;
Example
var patt = /w3schools/i;
예제 설명:
/w3schools/i는 ... earch() 메서드는 문자열에서 지정된 값을 검색하고 일치 항목의 위치를 반환합니다.
Example
문자열에[서 “W3schools”를 검색하기 위해 string을 사용합니다.
<!DOC...
Using String search() With a Regular Expression
Example
정규식을 사용하여 문자열에서 “w3schools”를 대소문자를 구분하지 않으며 검색합니다... , 여러 줄의 매칭을 합니다.
Example of i modifier
<script>
function myFunction()
cle==== HTML DOM Document querySelector() Method
Example
<script>
function myFunction() {
document.querySelector(".example").style.backgroundColor = "red";
}
</script... 정된 선택자가 유효하지 않은 경우, SYNTAX_ERR 예외가 발생합니다.
More Examples
문서의 첫 번째 <p> 요소를 가져옵니다.
Example
<body>
<p>This is a p element.</p> // dodgerblue backgroundColor 적용
또한 2초의 지속 시간을 가진 너비 속성에 대한 transition 효과를 지정합니다.
Example
div {
width: 100px;
height: 100px;
backgro... 사용자가 <div>요소에 마우스를 올릴 경우 너비 속성에 대한 새로운 값을 지정합니다.
Example
<title>The transition Property</title>
<styl... effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier ... 지속 시간 설정으로
너비와 높이 속성에 대한 transition 효과를 추가합니다.
Example
<style>
div {
width: 100px;
he
클릭할 때 발생합니다.
Syntax
HTML에서:
<body>
<P>This example demonstrates how to assign an "onclick" event to ... ript>
</body>
JavaScript에서
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to... addEventListener() 메서드를 사용하여
<body>
<p>This example uses the addEventListener() method to attach a "c... 드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
More Examples
Example
현재 요일, 날짜 및 시간을 표시하려면 <button> 요소를 클릭합니
links. These are quick links to other Wikis. For example this is a link to Wikipedia's page about Wikis: W... links. These are quick links to other Wikis.
For example this is a link to Wikipedia's page about Wikis: [... nt formats for maximum browser compatibility.
For example consider this embedded mp4 video:
{{video.mp4|A f... the video and be either a jpg or png file. In the example above a video.jpg file would work.
Lists
Dokuwik
<input> 요소는 type 속성에 따라 여러 가지 방법으로 표시될 수 있습니다.
Example
<body>
<h2>The input Element</h2>
<form ac... .
미리 선택된 옵션을 정의하려면, 선택한 속성을 아래의 예제처럼 옵션에 추가합니다.
Example
<body>
<h2>Pre-selected Option</h2>
<p>You... isible Values:
보여지는 값의 개수를 지정하려면 size 속섣을 사용합니다.
Example
<body>
<h2>Visible Option Values</h2>
<p>U... ons:
사용자가 하나 이상의 값을 선택하게 하려면 multiple 속성을 사용합니다:
Example
<body>
<h2>Allow Multiple Selections</h2>
lements
그리드 레이아웃은 하나 이상의 자식 요소가 있는 부모 요소로 구성됩니다.
Example
<style>
.grid-container {
display: g... lay 속성이 grid 또는 inline-grid로 설정되면 그리드 컨테이너가 됩니다.
Example
<style>
.grid-container {
display: g... ake a block-level grid container.
</p>
</body>
Example
<style>
.grid-container {
display: i... 있습니다.
grid-column-gap
grid-row-gap
grid-gap
Example
grid-column-gap 속성은 컬럼(세로 열) 사이의 간격을 설정합니다.
<s
제에서는 lang 속성을 사용하여 language 프로퍼티의 값을 가져옵니다(get).
Example
// Create an object
let person = {
firstName: ... 에서는 lang 속성을 사용하여 language 프로퍼티의 값을 설정합니다( set).
Example
// Create an obejct
let person = {
firstName: ... aScript Function or Getter?
다음 2 예제의 차이점은 무엇입니까?
Example 1
// Create an object;
let person = {
firstNam... .innerHTML = person.fullName(); // Emile Darwin
Example 2
// Create an object;
let person = {
firstNam
