HTML5 DOM API 활용 태그

⏰ 2024.11.20 (D+30)

1. DOM API : <span> 태그 활용

1. <span> 태그란?

🖥️ 용도
- 인라인 요소로, 주로 특정 부분을 스타일링하거나 JavaScript로 제어하기 위해 사용

📌 특징
- HTML의 텍스트나 다른 요소의 범위를 구분할 때 사용되며, 스타일 변경이나 내용 동적 수정 시 자주 활용됨

2. <span> 태그 활용 예시 📖

1) 텍스트 동적 변경 (JavaScript 활용) 🖱️
: textContent를 이용하여 <span> 태그 내의 텍스트를 동적으로 변경

<span id="text">JavaScript</span>
<button onclick="toggleText()">텍스트 변경</button>

<script>
    var toggle = false;
    function toggleText() {
        var spanNode = document.getElementById('text');
        spanNode.textContent = toggle ? 'JavaScript' : '자바스크립트';
        toggle = !toggle;
    }
</script>

2) 이미지 동적 추가 ⚙️
: <span> 태그에 <img> 요소를 동적으로 삽입하거나 교체 가능

<span id="image">이미지</span>
<button onclick="setImage()">이미지 교체</button>

<script>
    function setImage() {
        var spanNode = document.getElementById('image');
        var imgNode = document.createElement('img');
        imgNode.setAttribute('src', 'https://example.com/image.jpg');
        imgNode.setAttribute('alt', '이미지');
        spanNode.innerHTML = ''; // 기존 내용을 지우고
        spanNode.appendChild(imgNode); // 이미지를 추가
    }
</script>

3) 구구단 표시 🔢

<span id="gugudan"></span>
<button onclick="printGugudan()">구구단 표시</button>

<script>
    function printGugudan() {
        var spanNode = document.getElementById('gugudan');
        var table = "<table style='width:100%;'>";
        for (var i = 1; i <= 9; i++) {
            table += '<tr>';
            for (var j = 2; j <= 9; j++) {
                table += '<td>' + j + ' x ' + i + ' = ' + (i * j) + '</td>';
            }
            table += '</tr>';
        }
        table += '</table>';
        spanNode.innerHTML = table; // 구구단 표를 표시
    }
</script>

3. DOM API 메서드와 <span> 태그 📌

① getElementById: 특정 id를 가진 <span> 요소를 선택할 때 사용
② textContent: <span> 태그의 텍스트를 읽거나 수정
③ appendChild: <span> 태그에 다른 요소(예: <img>)를 동적으로 추가
④ innerHTML: <span> 태그의 콘텐츠를 HTML 형식으로 수정

⭐ 결론

✔️ <span> 태그는 텍스트 스타일링뿐만 아니라 동적 콘텐츠 수정과 JavaScript 제어를 위해 매우 유용한 요소
✔️ DOM API를 활용하여 동적 변경, 요소 추가/수정 등의 작업을 효율적으로 처리 가능

2. DOM API 활용: <fieldset> 및 <address> 태그

1. <fieldset> 태그

🖥️ 용도
- 여러 관련된 항목들을 그룹화하여 범주화할 때 사용. 주로 폼에서 사용되어 입력 필드들을 묶을 때 유용

📌 특징
- legend 태그와 함께 사용하여 그룹의 제목을 정의할 수 있음

예시 📖]

<h2>&lt;fieldset&gt;태그</h2>
<fieldset>
    <legend>당신이 좋아하는 스포츠는?</legend>
    <ul style="list-style: decimal;">
        <li>축구</li>
        <li>배구</li>
        <li>야구</li>
    </ul>
</fieldset>

✔️ fieldset : 그룹화된 항목을 정의
✔️ legend : 해당 그룹의 제목을 정의

2. <address> 태그

🖥️ 용도
- 주소나 연락처 정보를 표시할 때 사용. 일반적으로 이메일, 전화번호, 주소 등과 관련된 정보에 사용되며, 기울인 글자로 표시

예시 📖]

<h2>&lt;address&gt;태그</h2>
<address style="background-color: yellow; text-align: center; font-style: normal;">
    서울시 서초구 서초동 한국ICT인재개발원
</address>

✔️ address : 연락처나 주소 정보를 정의
✔️ 스타일 : 기울임꼴로 기본 설정, 여기서는 배경색과 텍스트 정렬도 추가

3. 주요 특징 📌

① <fieldset>
: 주로 폼에서 사용되는 그룹화 태그로, 관련 항목을 묶어 사용자가 보기 쉽게 만듦

② <address>
: 주소 정보를 표시하며, 기본적으로 기울임꼴로 나타남. 스타일을 커스터마이징하여 디자인을 변경 가능

⭐ 결론

✔️ <fieldset> 태그는 관련된 항목들을 그룹화하고, <legend>로 제목을 추가하여 가독성을 높이는 데 유용
✔️ <address> 태그는 주소나 연락처 정보를 표시하며, 기본적으로 기울임꼴로 표시되며, 스타일을 통해 시각적 효과를 조정할 수 있음

3. DOM API 활용: <audio> 태그

1. 기본 <audio> 태그 사용

🖥️ 용도
- 웹 페이지에 오디오를 삽입하여 직접 재생할 수 있게 함. src 속성과 controls 속성만 사용하여 오디오를 제어

📌 특징
- 브라우저에서 <audio> 태그를 지원하지 않는 경우, 대체 텍스트를 표시

예시 📖]

<h2>기본 audio(src속성과 controls만 사용) 태그</h2>
<audio src="Media/audio.mp3" controls>
    audio태그를 지원하지 않는 브라우저 입니다<br/>
    여기를 <a href="Media/audio.mp3">클릭</a> 하세요
</audio>

✔️ src : 오디오 파일의 경로
✔️ controls : 기본적인 재생, 일시정지, 음소거 등을 제공하는 제어 버튼

2. <audio> 하위 태그인 <source> 사용

🖥️ 용도
- 여러 미디어 형식의 파일을 제공하여 브라우저가 지원하는 형식으로 오디오를 재생

📌 특징
- 여러 source 태그를 포함할 수 있으며, 브라우저는 첫 번째로 지원하는 파일 형식을 재생

예시 📖]

<h2>audio 하위 태그인 &lt;source&gt;태그 사용</h2>
<audio controls>
    <source src="Media/audio.ogg" type="audio/ogg"/>
    <source src="Media/audio.mp3" type="audio/ogg"/>
</audio>

✔️ 여러 source 태그를 사용하여 지원하는 형식 중 하나가 재생됨

3. 커스텀 오디오 제어

🖥️ 용도
: JavaScript로 오디오 파일을 제어하고, 커스텀 버튼을 이용해 play, pause, stop, mute 등의 기능을 추가

예시 📖]

<h2>커스텀 오디오</h2>
<div>
    <progress value="0"></progress>
</div>
<div>
    <input type="button" value="PLAY" onclick="play();"/>
    <input type="button" value="PAUSE" onclick="pause();"/>
    <input type="button" value="STOP" onclick="stop();"/>
    <input type="button" value="MUTE" onclick="mute();"/>
    &nbsp;&nbsp;<span id="current"></span> / <span id="total"></span>
</div>

✔️ play(), pause(), stop(), mute(): 오디오 파일을 제어하는 함수
✔️ progress: 오디오의 진행 상태를 표시하는 바

JavaScript 코드 ⌨️🖱️

// 오디오 객체 생성
var audio = document.createElement('audio');
audio.setAttribute('src', 'Media/audio.mp3');

// span 및 progress 요소 가져오기
var currSpanNode = document.querySelector("#current");
var totSpanNode = document.querySelector("#total");
var progressNode = document.querySelector('progress');

// 시간 업데이트 시 실행되는 함수
audio.ontimeupdate = function() {
    totSpanNode.textContent = audio.duration;  // 총 재생 시간
    currSpanNode.textContent = audio.currentTime;  // 현재 재생 시간
    progressNode.max = audio.duration;  // 진행 바 최대값
    progressNode.value = audio.currentTime;  // 진행 상태
};

// 재생, 일시정지, 멈추기, 음소거 함수
function play() {
    audio.play();
}

function pause() {
    audio.pause();
}

function stop() {
    if (audio.played) {
        audio.currentTime = 0;  // 재생 시간을 0으로 설정
        audio.pause();
    }
}

function mute() {
    audio.muted = !audio.muted;  // 음소거 상태 토글
}

주요 특징 📌

① <audio>: 웹 페이지에서 오디오 파일을 직접 재생하기 위한 태그
② <source>: 다양한 형식의 오디오 파일을 제공하고, 브라우저가 지원하는 파일 형식으로 자동으로 재생
③ 커스텀 오디오 제어: JavaScript를 사용하여 오디오의 재생 상태, 시간, 음소거 등을 제어

🌟 결론

✔️ 기본 <audio> 태그는 빠르고 쉽게 오디오를 삽입할 수 있게 도와주며, controls 속성으로 기본적인 오디오 제어가 가능
✔️ <source>를 사용하면 다양한 오디오 형식을 제공할 수 있어 호환성 높일 수 있다⬆️
✔️ JavaScript로 커스텀 오디오 제어를 구현하면 더 세밀한 오디오 제어가 가능하며, 사용자에게 더 나은 경험을 제공

4. DOM API 활용: <video> 태그 정리

1) 기본 <video> 태그 사용

✅ 목적
: <video> 태그를 사용하여 비디오 파일을 웹 페이지에 삽입

☑️ 속성

• controls: 비디오 컨트롤(재생, 일시정지, 볼륨 조절 등) 제공
• src: 비디오 파일 경로 지정

예제 📖]

<video src="Media/video.mp4" controls style="width:200px;height:200px">
    video태그를 지원하지 않는 브라우저 입니다<br/>
    여기를 <a href="Media/video.mp4">클릭</a> 하세요
</video>

2) <source> 태그 사용

✅ 목적
: 여러 형식의 비디오 파일을 제공하여 브라우저가 지원하는 형식으로 자동 선택

☑️ 속성

• src: 미디어 파일 경로
• type: 미디어 파일의 MIME 타입 지정

예제 📖]

<video controls style="width:200px;height:200px">
    <source src="Media/video.3gp" type="video/3gp"/>
    <source src="Media/video.mp4" type="video/mp4"/>
</video>

3) 커스텀 비디오 제어

✅ 역할
: JavaScript를 사용하여 사용자 정의 인터페이스 제공

☑️ 사용한 DOM 요소 및 기능
① <video>: 비디오 재생 및 제어
② <progress>: 비디오 진행 상태 표시
③ <input type="range">: 볼륨 조절
④ <span>: 현재 재생 시간과 전체 시간 표시

예제 📖]

<video hidden style="width:300px;height:300px" src="Media/video.mp4" id="video"></video>
<div>
    <progress value="0"></progress>
</div>
<div>
    <input type="button" value="PLAY" onclick="play();"/>
    <input type="button" value="PAUSE" onclick="pause();"/>
    <input type="button" value="STOP" onclick="stop();"/>
    <input type="button" value="MUTE" onclick="mute();"/>
    <input type="range" id="volume" value="1" min="0" max="1" step="0.1" style="width:80px"/>
    &nbsp;&nbsp;<span id="current"></span> / <span id="total"></span>
</div>

4) 주요 스크립트

- 비디오 객체 생성 및 참조:

var video = document.querySelector('#video');
var currSpanNode = document.querySelector("#current");
var totSpanNode = document.querySelector("#total");
var progressNode = document.querySelector('progress');
var volume = document.querySelector('#volume');

- 비디오 상태 업데이트:

• 현재 재생 시간과 진행률 업데이트

video.ontimeupdate = function () {
    totSpanNode.textContent = video.duration;
    currSpanNode.textContent = video.currentTime;
    progressNode.max = video.duration;
    progressNode.value = video.currentTime;
};

- 제어 함수 정의:

• 재생:

function play() {
    video.hidden = ''; // 비디오 보이기
    video.play();
}

• 일시 정지:

function pause() {
    video.pause();
}

• 정지 (custom stop):

function stop() {
    if (video.played) {
        video.currentTime = 0;
        video.pause();
        video.hidden = 'block'; // 비디오 숨기기
    }
}

• 음소거 토글:

function mute() {
    video.muted = !video.muted;
}

• 볼륨 조절:

volume.oninput = function () {
    video.volume = volume.value;
};

5) 주요 속성과 메소드

☑️ 속성:
① src: 재생할 비디오 경로
② currentTime: 현재 재생 위치
③ duration: 비디오 총 길이
④ muted: 음소거 상태
⑤ volume: 볼륨 (0~1)

✅ 메소드:
① play(): 재생
② pause(): 일시 정지
③ load(): 비디오 새로고침
④ 정지는 기본 메소드가 없어 currentTime과 pause()를 조합해 구현

5. Canvas 태그 활용

1. 기본 개념

• <canvas>: HTML5에서 제공하는 태그로, 그래픽을 그리기 위한 공간을 제공
• 가로, 세로 크기는 반드시 속성으로 지정해야 함
• JavaScript의 CanvasRenderingContext2D 객체를 사용해 다양한 도형, 텍스트, 이미지를 그릴 수 있음

2. 주요 기능 및 코드 예시

2.1 선과 도형 그리기 (📁 Canvas19_1.html)

<canvas id="canvas" style="background-color: yellow;" width="200" height="200"></canvas>
<script>
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');

    // 선 그리기
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(50, 50);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 50);
    ctx.stroke();
    ctx.closePath();

    // 사각형 그리기
    ctx.fillStyle = 'rgba(255,0,0,0.5)'; // 반투명 빨간색
    ctx.fillRect(100, 100, 50, 50);
</script>

2.2 텍스트 출력과 그림자 설정 (📁 Canvas19_2.html)

<canvas id="canvas" style="background-color: yellow;" width="200" height="200"></canvas>
<script>
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');

    // 기준선 표시
    ctx.strokeStyle = 'red';
    ctx.moveTo(50, 20);
    ctx.lineTo(50, 180);
    ctx.stroke();

    // 텍스트 스타일 설정
    ctx.font = '25px 굴림체';
    ctx.fillStyle = 'blue';

    // 그림자 설정
    ctx.shadowColor = 'rgba(192,192,192,0.8)';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 1;

    // 텍스트 정렬과 출력
    ctx.textAlign = 'start';
    ctx.fillText('HTML5_START', 50, 50);

    ctx.textAlign = 'end';
    ctx.fillText('HTML5_END', 50, 80);

    ctx.textAlign = 'center';
    ctx.fillText('HTML5_CENTER', 50, 110);

    ctx.textAlign = 'left';
    ctx.fillText('HTML5_LEFT', 50, 140);

    ctx.textAlign = 'right';
    ctx.fillText('HTML5_RIGHT', 50, 170);
</script>

2.3 선과 이미지 처리 (📁 Canvas19_3.html)

<!-- 선 그리기 -->
<canvas id="canvas" style="background-color: yellow;" width="550" height="450"></canvas>

<!-- 이미지 그리기 -->
<canvas id="canvasImg" style="border:1px green solid" width="300" height="300"></canvas>

<script>
    // 선 그리기
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = 'red';
    ctx.moveTo(60, 313);
    ctx.lineTo(120, 166);
    ctx.lineTo(180, 76);
    ctx.lineTo(240, 256);
    ctx.lineTo(300, 70);
    ctx.lineTo(360, 200);
    ctx.lineTo(420, 120);
    ctx.lineTo(480, 70);
    ctx.stroke();

    // 이미지 출력
    var canvasImg = document.querySelector('#canvasImg');
    ctx = canvasImg.getContext('2d');
    var img = new Image(); // <img> 생성
    img.src = '../Images/1.jpg'; // 이미지 경로 설정

    img.onload = function () {
        // 이미지 크기 조정 후 출력
        ctx.drawImage(img, 0, 0, 50, 50);
    };
</script>

3. Canvas API 주요 메서드 및 속성

메서드 / 속성	설명
beginPath()	새로운 경로(Path)를 시작합니다.
moveTo(x, y)	그리기 시작점 좌표를 설정합니다.
lineTo(x, y)	현재 위치에서 지정한 좌표로 선을 그립니다.
stroke()	경로를 따라 선을 그립니다.
fillStyle	채우기 색상을 설정합니다. (예: rgba(255,0,0,0.5))
fillRect(x, y, width, height)	사각형을 채워 그립니다.
strokeStyle	선의 색상을 설정합니다. (예: 'red')
lineWidth	선의 두께를 설정합니다. (예: 5)
shadowColor	그림자 색상을 설정합니다. (예: 'rgba(192,192,192,0.8)')
shadowOffsetX / shadowOffsetY	그림자의 X, Y 축 오프셋을 설정합니다.
shadowBlur	그림자 흐림 효과의 강도를 설정합니다.
font	텍스트 스타일을 설정합니다. (예: '25px 굴림체')
textAlign	텍스트 정렬 방식을 설정합니다. (예: 'start', 'end', 'center', 'left', 'right')
fillText(text, x, y)	텍스트를 지정한 좌표에 채워 그립니다.
drawImage(image, x, y, width, height)	이미지를 캔버스에 그립니다. 크기 조정 가능.

6. HTML5에 새롭게 추가된 요소와 속성 요약

1) 새로운 태그

태그 이름	설명	예시
<mark>	텍스트에 하이라이트 효과를 적용	<mark>중요 단어</mark>
<progress>	작업 진행률을 표시	<progress value="50" max="100"></progress>
<datalist>	자동완성 옵션을 제공	<input type="search" list="items"/><datalist id="items"><option value="검색어"/></datalist>
<figure>	이미지를 그룹화하고 설명을 추가	<figure><img src="image.jpg" /><figcaption>이미지 설명</figcaption></figure>
<template>	HTML 콘텐츠를 숨겨서 재사용 가능하게 제공 (렌더링되지 않음)	<template><li>아이템</li></template>

2) 새롭게 추가된 속성

속성 이름	설명	예시
multiple	파일 선택에서 여러 파일을 선택할 수 있게 함	<input type="file" multiple />
accept	허용된 파일 형식을 제한 (파일 업로드 시)	<input type="file" accept="image/png,image/jpeg" />
autofocus	페이지 로딩 시 자동으로 포커스를 설정	<input type="text" autofocus />
contenteditable	요소의 내용을 편집 가능하게 만듦	<p contenteditable="true">편집 가능한 내용</p>
hidden	요소를 숨김 (렌더링되지 않음)	<input type="button" value="버튼" hidden />
required	입력 필드를 필수로 만듦 (폼 제출 시 필수 항목)	<input type="text" name="name" required />
placeholder	입력 필드에 안내 텍스트를 표시	<input type="text" placeholder="아이디 입력" />

3) 코드 예시 📖

(1) <mark> 태그 예시

<p>글 중 <mark>중요 단어</mark>에 하이라이트 효과를 적용합니다.</p>

(2) <progress> 태그 예시

<progress value="50" max="100" style="width:300px;">50%</progress>

(3) <datalist> 태그 예시

<label for="search">검색어</label>
<input type="search" id="search" list="suggestions" />
<datalist id="suggestions">
    <option value="HTML"></option>
    <option value="CSS"></option>
    <option value="JavaScript"></option>
</datalist>

(4) <figure> 태그 예시

<figure>
    <img src="image.jpg" alt="이미지 설명" width="200" />
    <figcaption>이미지 설명</figcaption>
</figure>

(5) <template> 태그 예시

<template>
    <li>템플릿 아이템</li>
</template>