html 페이지 | DocsArchives

html

전체 31 / 1 페이지

1. iframe 사용<iframe src="http://홈페이지주소/test.pdf" style="width:800px; height:700px;" frameborder="0"></iframe>2. embed 사용<embed src="/assets/test.pdf" type="application/pdf" />3. 구글뷰어이용<iframe src="http://docs.google.com/gview?url=http://홈페이지주소/test.pdf&embedded=true" style="width:800px; height:700px;" frameborder="0"></iframe>4.PDF.js 사용 - worker<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PDF.js Example - All Pages</title> <style> #pdf-viewer { width: 100%; height: 100vh; overflow: auto; } canvas { display: block; margin: 10px auto; } </style></head><body> <div id="pdf-viewer"></div>  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.min.js"></script> <script> const url = 'YOUR_PDF_URL'; // Load the PDF.js library const pdfjsLib = window['pdfjs-dist/build/pdf']; // Specify the workerSrc property pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.worker.min.js'; // Load the PDF document const loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(pdf => { console.log('PDF loaded'); const viewer = document.getElementById('pdf-viewer'); // Loop through each page for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) { // Fetch the page pdf.getPage(pageNum).then(page => { console.log(`Page ${pageNum} loaded`); const scale = 1.5; const viewport = page.getViewport({ scale }); // Prepare canvas using PDF page dimensions const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Append the canvas to the viewer container viewer.appendChild(canvas); // Render the PDF page into the canvas context const renderContext = { canvasContext: context, viewport }; page.render(renderContext).promise.then(() => { console.log(`Page ${pageNum} rendered`); }); }); } }).catch(error => { console.error('Error loading PDF: ', error); }); </script></body></html>5.PDF.js 사용 - viewer<p align="middle"><iframe src="/pdfjs/web/viewer.html?file=http://홈페이지주소/test.pdf"></iframe></p>

935

2025.09.07

접근성을 위한 ARIA 속성 사용 html

모두에게 친절한 웹웹 접근성은 시각, 청각 등 다양한 사용자에게 웹을 제공하는 기술입니다. HTML5만으로는 한계가 있어 ARIA(Accessible Rich Internet Applications) 속성을 활용하면 보조 기술과의 호환성을 높일 수 있습니다. ARIA 속성 예시<button aria-label="검색">????</button><nav aria-label="주요 메뉴"> <ul> <li><a href="/">홈</a></li> <li><a href="/about">소개</a></li> </ul></nav><div role="alert"> 오류가 발생했습니다!</div>aria-label: 요소에 대한 설명 제공 role: 요소의 역할 정의 (alert, navigation, button) 실무 활용 사례 스크린리더 친화적인 메뉴 제작 동적 콘텐츠 변경 알림 웹 애플리케이션 버튼과 모달 대체ARIA 속성을 적절히 사용하면 모든 사용자에게 친절한 웹사이트를 만들 수 있습니다. 단순히 보이는 것뿐 아니라 접근성과 UX를 고려한 설계가 필수입니다.

1106

2025.09.07

아이프레임(iframe)과 외부 콘텐츠 삽입 html

외부 콘텐츠를 웹페이지에 삽입할 때 사용하는 것이 <iframe> 태그입니다. 지도, 동영상, 광고 등 다양한 활용이 가능합니다.기본 사용법<iframe width="560" height="315" src="https://www.youtube.com/embed/HudTGfYF0Ug?si=JL0tu-F9AKXvw1f2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>src: 외부 콘텐츠 URL width, height: 크기 지정 allowfullscreen: 전체 화면 허용 실무 활용 사례 유튜브 동영상 삽입 구글 지도 표시 외부 웹 앱 연동 접근성 팁 title 속성으로 콘텐츠 설명 제공<iframe src="..." title="유튜브 소개 영상"></iframe>iframe은 강력하지만, 과도한 사용은 속도 저하와 보안 문제를 야기할 수 있습니다. 필요한 경우에만 사용하고, 접근성을 고려하는 것이 중요합니다.

952

2025.09.07

메타 태그와 SEO 최적화 html

검색 엔진 친화적 HTML웹페이지가 검색 엔진에 잘 노출되려면 메타 태그(Meta Tag) 사용이 필수입니다. 메타 태그는 페이지 정보, 문자셋, 뷰포트 등 브라우저와 검색 엔진에 중요한 데이터를 제공합니다. 기본 메타 태그<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="HTML 기초부터 SEO 최적화까지 배우는 블로그"> <meta name="keywords" content="HTML, CSS, 웹개발, SEO"> <title>웹 개발 블로그</title></head>charset: 문자 인코딩 설정 viewport: 모바일 화면 대응 description: 검색 결과 설명 keywords: 핵심 키워드(현재 SEO에서는 참고용) 실무 활용 사례 블로그 포스트: description과 title 최적화 e커머스: 상품 페이지 SEO 강화 반응형 웹: 모바일 뷰포트 최적화메타 태그는 눈에 보이지 않지만, SEO와 사용자 경험에 큰 영향을 줍니다. 모든 페이지에서 필수적으로 설정해야 합니다.

901

2025.09.07

리스트 태그 활용 html

순서 있는 데이터 표현웹에서는 목록 형태로 정보를 전달하는 경우가 많습니다. HTML에서는 순서가 있는 목록(<ol>), 순서 없는 목록(<ul>), **정의 목록(<dl>)**을 제공하여 구조화된 데이터를 쉽게 표현할 수 있습니다. 기본 사용법<h3>할 일 목록</h3><ul> <li>HTML 공부</li> <li>CSS 연습</li> <li>JavaScript 실습</li></ul><h3>단계별 과정</h3><ol> <li>계획 수립</li> <li>개발 진행</li> <li>테스트 및 배포</li></ol><h3>용어 정의</h3><dl> <dt>HTML</dt> <dd>웹 문서의 구조를 정의하는 마크업 언어</dd> <dt>CSS</dt> <dd>웹 문서의 스타일을 지정하는 언어</dd></dl>실무 활용 사례 블로그 글에서 요약 목록 작성 가이드 페이지에서 단계별 설명 제공 FAQ 페이지에서 질문-답변 구조 접근성 팁 목록 안에 중요한 콘텐츠가 포함되면 <strong> 등으로 강조 화면 읽기 프로그램이 목록의 시작과 끝을 알 수 있도록 <ul>/<ol> 사용리스트 태그를 적절히 활용하면 정보 전달력이 높아지고, 구조화된 콘텐츠를 제작할 수 있습니다.

676

2025.09.07

테이블 작성 및 접근성 개선 html

데이터 표현의 기본HTML에서 **테이블(<table>)**은 데이터를 행과 열로 정리해 표시하는 가장 직관적인 방법입니다. 단순히 보기 좋게 만드는 것뿐만 아니라 접근성과 SEO까지 고려해야 합니다. 기본 테이블 구조<table border="1"> <caption>회원 정보</caption> <thead> <tr> <th>이름</th> <th>이메일</th> <th>가입일</th> </tr> </thead> <tbody> <tr> <td>홍길동</td> <td>[email protected]</td> <td>2025-09-06</td> </tr> <tr> <td>김철수</td> <td>[email protected]</td> <td>2025-08-30</td> </tr> </tbody></table><caption>: 테이블 제목, 접근성과 SEO에 도움 <thead>: 헤더 영역 <tbody>: 데이터 영역 <th>: 열 제목, 화면 읽기 프로그램이 데이터를 이해할 수 있도록 도움 실무 활용 사례 관리자 페이지: 회원 리스트, 주문 내역 통계 페이지: 매출, 방문자 수 등 데이터 표시 교육 콘텐츠: 시험 성적, 학습 진행 상황 접근성 팁 scope="col" 또는 scope="row" 속성으로 스크린리더 지원 테이블이 크면 스크롤 가능한 영역으로 처리<th scope="col">이름</th><th scope="row">홍길동</th>테이블은 단순한 데이터 표시 도구가 아니라 구조화된 정보를 전달하는 방법입니다. 접근성과 시맨틱을 고려해 작성하면 사용자와 검색 엔진 모두에게 친절한 테이블이 됩니다.

701

2025.09.07

앵커와 내비게이션 구조 설계 html

사용자가 길을 잃지 않게 만드는 HTML웹사이트에서 사용자가 원하는 정보를 쉽게 찾도록 돕는 것이 **내비게이션(Navigation)**의 핵심입니다. HTML에서는 <a>와 <nav> 태그를 활용해 사이트 구조를 명확하게 설계할 수 있습니다. 기본 앵커 사용법 앵커(<a> 태그)는 페이지 내 이동이나 외부 링크 연결에 사용됩니다.<a href="https://example.com">홈페이지 이동</a><a href="#section2">페이지 섹션 2로 이동</a>href="#"처럼 단순히 페이지 상단으로 이동하거나, id 속성과 함께 내부 링크로 연결할 수 있습니다.내비게이션 구조HTML5에서는 <nav> 태그로 내비게이션 영역을 명확히 구분합니다.<nav> <ul> <li><a href="/">홈</a></li> <li><a href="/about">소개</a></li> <li><a href="/services">서비스</a></li> <li><a href="/contact">연락처</a></li> </ul></nav>검색 엔진과 보조기기는 <nav>를 통해 페이지의 구조와 중요한 링크를 빠르게 이해할 수 있습니다.실무 활용 사례 메인 메뉴: 헤더에 사이트 주요 메뉴 구성 사이드바: 블로그 카테고리 목록 제공 푸터 링크: 사이트 맵, 개인정보처리방침, 이용약관 등 접근성 팁 <ul>과 <li>를 사용하여 목록 구조를 명확히 작성 스크린리더가 메뉴 항목을 쉽게 읽도록 aria-label 속성 활용<nav aria-label="주요 메뉴"> <ul> <li><a href="/">홈</a></li> ... </ul></nav>앵커와 내비게이션 설계는 사용자가 웹사이트를 편리하게 탐색하게 하는 핵심 요소입니다. 시맨틱 태그와 접근성을 고려하면 UX와 SEO를 동시에 향상시킬 수 있습니다.

832

2025.09.07

이미지 최적화와 <picture> 태그 html

반응형 웹 이미지웹에서 이미지는 콘텐츠 전달의 핵심입니다. 하지만 이미지를 무분별하게 사용하면 페이지 로딩 속도가 느려지고 사용자 경험이 떨어집니다. HTML에서는 <img>와 <picture> 태그로 최적화된 이미지 제공이 가능합니다. 기본 이미지 삽입<img src="image.jpg" alt="상품 이미지" width="600">alt 속성은 시각장애인을 위한 설명과 SEO에도 필수입니다. <picture> 태그로 반응형 이미지 제공<picture> <source media="(max-width: 600px)" srcset="image-small.jpg"> <source media="(max-width: 1200px)" srcset="image-medium.jpg"> <img src="image-large.jpg" alt="반응형 상품 이미지"></picture>사용자의 화면 크기에 따라 최적화된 이미지를 자동으로 선택합니다. 이미지 최적화 팁 WebP, AVIF와 같은 최신 포맷 사용 용량 줄이기 (압축, 크기 조정) lazy-loading 적용 (loading="lazy")<img src="image.jpg" alt="상품 이미지" loading="lazy">실무 활용 사례 반응형 웹: 모바일, 태블릿, PC에서 최적 이미지 제공 e커머스: 상품 썸네일, 상세 이미지 블로그: 글 속 이미지 최적화이미지 최적화와 <picture> 태그 활용은 속도와 사용자 경험을 동시에 만족시키는 핵심 기법입니다. SEO와 모바일 환경을 고려하면 반드시 적용해야 합니다.

600

2025.09.07

오디오·비디오 태그 활용 html

멀티미디어 콘텐츠 삽입현대 웹에서는 텍스트와 이미지뿐만 아니라 오디오와 비디오 콘텐츠도 필수입니다. HTML5에서는 <audio>와 <video> 태그를 통해 멀티미디어를 간단히 삽입할 수 있습니다. 기본 사용법<audio controls> <source src="audio.mp3" type="audio/mpeg"> 브라우저가 오디오 태그를 지원하지 않습니다.</audio><video controls width="600"> <source src="video.mp4" type="video/mp4"> 브라우저가 비디오 태그를 지원하지 않습니다.</video>controls 속성은 재생, 일시정지, 볼륨 조절 등 기본 컨트롤을 제공합니다. 추가 속성 autoplay: 페이지 로드 시 자동 재생 loop: 반복 재생 muted: 음소거 상태로 시작 poster: 비디오 로딩 전 표시할 이미지<video controls autoplay muted loop poster="thumbnail.jpg" width="600"> <source src="video.mp4" type="video/mp4"></video>실무 활용 사례 제품 소개 페이지: 동영상으로 제품 기능 시연 음악 사이트: 오디오 스트리밍 재생 교육 플랫폼: 강의 영상 삽입 접근성 고려 <track> 태그를 사용해 자막 제공 오디오/비디오에 대한 텍스트 대체 설명 제공<track kind="subtitles" src="subtitles.vtt" srclang="ko" label="한국어">오디오·비디오 태그를 적절히 활용하면 사용자 경험을 풍부하게 만들 수 있습니다. HTML5에서 제공하는 속성을 잘 활용하면 별도의 플러그인 없이도 멀티미디어 콘텐츠를 구현할 수 있습니다.

654

2025.09.07

폼(Form) 요소와 입력값 검증 html

사용자 데이터를 안전하게 받는 방법웹사이트에서 사용자와 상호작용할 때 가장 많이 사용하는 HTML 요소가 바로 폼(Form) 입니다. 로그인, 회원가입, 게시글 작성 등 대부분의 웹 서비스는 폼을 통해 데이터를 입력받습니다. 폼의 기본 구조 폼은 <form> 태그 안에 다양한 입력 요소(input, select, textarea 등)를 넣어 구성합니다.<form action="/submit" method="post"> <label for="username">사용자 이름:</label> <input type="text" id="username" name="username" required> <label for="email">이메일:</label> <input type="email" id="email" name="email" required> <label for="password">비밀번호:</label> <input type="password" id="password" name="password" required> <button type="submit">회원가입</button></form>위 예시에서 required 속성은 입력을 필수로 만들고, type="email"은 이메일 형식을 자동으로 검증합니다.입력값 검증폼 검증은 사용자가 올바른 데이터를 입력했는지 확인하는 과정입니다. HTML5에서는 기본적인 검증을 제공하지만, JavaScript를 통해 더 세밀한 검증도 가능합니다.<script> const form = document.querySelector("form"); form.addEventListener("submit", (e) => { const username = document.getElementById("username").value; if (username.length < 3) { alert("사용자 이름은 최소 3자 이상이어야 합니다."); e.preventDefault(); // 제출 막기 } });</script>실무 활용 사례 로그인 폼: 이메일과 비밀번호 형식 검증 회원가입 폼: 비밀번호 강도 체크, 중복 확인 게시판 입력: 글자 수 제한, 금지어 필터링 접근성 고려폼 레이블 <label>을 반드시 사용하여 스크린리더 사용자도 입력 필드를 쉽게 이해할 수 있게 합니다. for 속성과 id를 연결하면 시각적 레이블뿐 아니라 접근성까지 확보할 수 있습니다.폼과 입력값 검증은 웹 개발의 필수 요소입니다. HTML5 속성과 JavaScript를 적절히 활용하면, 사용자가 편리하게 입력하고 동시에 안전하게 데이터를 받을 수 있습니다.

658

2025.09.07

시맨틱 태그 사용하기 html

구조를 살리는 HTML 작성법웹 개발에서 HTML은 단순히 화면에 콘텐츠를 표시하는 도구가 아닙니다. HTML을 올바르게 작성하면 검색 엔진 최적화(SEO)와 접근성 향상에도 도움이 됩니다. 그 핵심이 바로 시맨틱 태그(Semantic Tag) 의 활용입니다. 시맨틱 태그란? 시맨틱(Semantic)은 “의미 있는”이라는 뜻을 가지고 있습니다. 따라서 시맨틱 태그란 단순히 레이아웃을 꾸미는 용도가 아니라, 콘텐츠의 의미와 구조를 명확히 설명하는 HTML 태그를 말합니다. 예를 들어, div만 사용해서 웹페이지를 만들 수도 있지만, 이렇게 작성하면 구조를 파악하기 어렵습니다.<div class="top"></div><div class="menu"></div><div class="content"></div><div class="bottom"></div>하지만 시맨틱 태그를 사용하면 훨씬 명확해집니다.<header></header><nav></nav><main></main><footer></footer>검색 엔진과 보조기기도 이 구조를 이해하기 쉬워집니다.주요 시맨틱 태그 정리 <header>: 페이지나 섹션의 머리글을 표현합니다. <nav>: 내비게이션 메뉴를 표시합니다. <main>: 문서의 주요 콘텐츠 영역입니다. <article>: 독립적인 콘텐츠 단위를 나타냅니다. 블로그 글, 뉴스 기사 등에 적합합니다. <section>: 주제별로 묶은 콘텐츠 블록입니다. <aside>: 본문과 직접적인 관련은 없지만 부가적인 정보를 제공할 때 사용합니다. <footer>: 페이지나 섹션의 바닥글을 표현합니다. 저작권, 연락처 등이 들어갑니다.코드 예시<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <title>시맨틱 태그 예시</title></head><body> <header> <h1>내 블로그</h1> </header> <nav> <ul> <li><a href="/">홈</a></li> <li><a href="/about">소개</a></li> <li><a href="/contact">연락하기</a></li> </ul> </nav> <main> <article> <h2>첫 번째 글</h2> <p>이것은 시맨틱 태그를 활용한 예시입니다.</p> </article> <aside> <p>관련 글: HTML 기본 구조</p> </aside> </main> <footer> <p>© 2025 내 블로그</p> </footer></body></html>이렇게 작성하면, 사람뿐만 아니라 검색 엔진 크롤러도 페이지의 구조를 더 잘 이해할 수 있습니다. 실무에서의 장점 SEO 향상: 검색 엔진은 시맨틱 태그를 분석하여 콘텐츠의 중요도를 판단합니다. 접근성 개선: 화면 읽기 프로그램(Screen Reader)이 태그의 의미를 기반으로 콘텐츠를 전달합니다. 유지보수 용이: 시맨틱 태그만 봐도 페이지의 구조를 직관적으로 이해할 수 있습니다.HTML에서 시맨틱 태그를 제대로 활용하는 것은 단순히 “보이는 것”을 넘어서, 웹사이트의 품질을 높이는 핵심 습관입니다. 시맨틱 태그를 습관적으로 사용하면 검색엔진, 보조기기, 개발자 모두에게 친절한 코드를 만들 수 있습니다.

763

2025.09.07

로컬 스토리지 js

브라우저 안의 작은 데이터베이스웹 애플리케이션에서는 사용자의 데이터를 저장해야 하는 경우가 많습니다. 간단한 데이터는 서버가 아니라 브라우저 내부 저장소에 보관할 수 있습니다. LocalStorage 사용법// 저장localStorage.setItem("username", "hong");// 불러오기console.log(localStorage.getItem("username"));// 삭제localStorage.removeItem("username");LocalStorage는 브라우저를 껐다 켜도 데이터가 남아 있습니다. 활용 사례 로그인 상태 유지 사용자 환경 설정 저장 쇼핑몰 장바구니LocalStorage는 작지만 강력한 저장소입니다. 서버 부담을 줄이고 사용자 경험을 향상시키는 좋은 도구입니다.

837

2025.09.07

에러 처리 js

안정적인 웹 만들기코드를 실행하다 보면 오류가 발생할 수 있습니다. 이를 방치하면 프로그램이 멈추지만, 에러 처리를 하면 안전하게 실행을 이어갈 수 있습니다. try-catchtry { throw new Error("문제가 발생했습니다!");} catch (err) { console.error(err.message);}finallytry { console.log("작업 실행");} finally { console.log("항상 실행됨");}에러 처리는 사용자 경험을 지키는 핵심입니다. 반드시 try-catch와 에러 로그 관리 방식을 익혀야 합니다.

868

2025.09.07

this 키워드 js

문맥에 따라 달라지는 값JavaScript에서 this는 함수가 어떻게 호출되었는가에 따라 값이 달라집니다.console.log(this); // 전역 객체객체의 메서드 안에서 호출하면 다른 값이 됩니다.const obj = { name: "홍길동", sayName() { console.log(this.name); }};obj.sayName(); // 홍길동또한 bind, call, apply로 강제로 바꿀 수도 있습니다.function greet() { console.log(this.name);}const user = { name: "철수" };greet.call(user); // 철수this는 혼란스럽지만, 제대로 이해하면 JavaScript를 한 단계 깊게 다룰 수 있습니다.

710

2025.09.07

모듈 시스템 js

코드의 체계적인 관리프로젝트가 커지면 하나의 파일에 모든 코드를 담을 수 없습니다. 이때 필요한 것이 모듈 시스템입니다. ES6 모듈// math.jsexport function add(a, b) { return a + b;}// main.jsimport { add } from "./math.js";console.log(add(2, 3));이렇게 export와 import를 통해 기능을 나누어 관리할 수 있습니다. 장점 코드 재사용성 증가 유지보수 편리 네임스페이스 충돌 방지모듈 시스템은 현대 JavaScript 개발에서 필수입니다. React, Vue, Node.js 모두 모듈 시스템을 기반으로 동작합니다.

720

2025.09.07

html

전체 검색

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴

홈으로 전체메뉴