DocsArchives는 프로그래밍, 디자인 등 다양한 분야에서 몰라서 검색했던 지식을 정리한 아카이브입니다.
개발과 일상을 배우고 기록하는 사람들을 위한 지식 저장소.
개발과 일상을 배우고 기록하는 사람들을 위한 지식 저장소.
html
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> <!-- Include PDF.js library --> <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>
962 조회
2025.09.07 등록
모두에게 친절한 웹웹 접근성은 시각, 청각 등 다양한 사용자에게 웹을 제공하는 기술입니다. 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를 고려한 설계가 필수입니다.
1127 조회
2025.09.07 등록
외부 콘텐츠를 웹페이지에 삽입할 때 사용하는 것이 <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은 강력하지만, 과도한 사용은 속도 저하와 보안 문제를 야기할 수 있습니다. 필요한 경우에만 사용하고, 접근성을 고려하는 것이 중요합니다.
974 조회
2025.09.07 등록
검색 엔진 친화적 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와 사용자 경험에 큰 영향을 줍니다. 모든 페이지에서 필수적으로 설정해야 합니다.
924 조회
2025.09.07 등록
css
창의적인 디자인 기법최근 웹 디자인에서는 단순한 네모·원 형태를 넘어 다양한 모양의 이미지와 요소가 등장합니다. 이를 가능하게 하는 것이 clip-path와 masking입니다. clip-path 기본 예시.image { clip-path: circle(50%);}위 코드는 이미지를 원형으로 잘라냅니다. 다양한 형태 polygon()을 활용해 다각형 모양 자르기 inset()으로 사각형 일부만 보이게 하기 SVG를 이용한 복잡한 마스킹 효과 활용 사례 독특한 이미지 배치 버튼, 배너의 개성 있는 형태 창의적인 애니메이션 효과clip-path와 masking은 아직 생소할 수 있지만, 한 번 익혀두면 남들과 차별화된 디자인을 만들 수 있습니다. 현대적인 웹사이트에서 점점 더 많이 활용되는 기법입니다.
864 조회
2025.09.07 등록
화면 위계의 비밀웹사이트에는 여러 요소가 겹치는 상황이 많습니다. 모달창, 드롭다운 메뉴, 배너 등이 그 예입니다. 이때 어떤 요소가 위로 올라올지를 결정하는 속성이 바로 z-index입니다. 기본 문법.modal { position: fixed; top: 0; left: 0; z-index: 9999;}z-index 값이 큰 요소가 작은 요소보다 위에 표시됩니다. 주의할 점 z-index는 position 속성이 있어야만 적용됩니다. 부모 요소의 z-index가 자식에게 영향을 미칩니다.z-index를 올바르게 이해하지 못하면 모달창이 버튼 뒤에 숨어버리는 등의 문제가 생깁니다. 레이어 관리의 핵심은 position과 z-index의 관계를 명확히 이해하는 것입니다.
724 조회
2025.09.07 등록
HTML 수정 없이 디자인 강화:hover, :active, ::before, ::after 같은 의사 클래스와 요소는 HTML 구조를 바꾸지 않고도 다양한 효과를 줄 수 있는 도구입니다.예시 – 장식 추가h1::before { content: "★ "; color: gold;}제목 앞에 별 모양을 추가할 수 있습니다. 활용 사례 강조선, 구분선 추가 아이콘 삽입 버튼 효과 글자 강조Pseudo 클래스와 요소는 단순하지만 강력한 CSS 도구입니다. 작은 변화만으로도 사이트를 세련되게 꾸밀 수 있습니다.
724 조회
2025.09.07 등록
부드러운 인터랙션 만들기웹사이트는 단순히 정적인 화면이 아니라, 사용자와의 상호작용을 통해 더 매력적으로 보일 수 있습니다. 이를 가능하게 해주는 것이 transition과 animation입니다. Transition 예시.button { background: #3498db; transition: background 0.3s ease;}.button:hover { background: #2ecc71;}버튼에 마우스를 올렸을 때 색이 부드럽게 변합니다. Animation 예시@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}.box { animation: fadeIn 1s ease-in-out;}페이지 로딩 시 박스가 자연스럽게 나타납니다.애니메이션은 과하면 산만하지만, 적절히 사용하면 사용자 경험을 크게 향상시킵니다. 버튼 hover, 페이지 전환, 로딩 애니메이션 등에 적극 활용해 보세요.
747 조회
2025.09.07 등록
js
브라우저 안의 작은 데이터베이스웹 애플리케이션에서는 사용자의 데이터를 저장해야 하는 경우가 많습니다. 간단한 데이터는 서버가 아니라 브라우저 내부 저장소에 보관할 수 있습니다. LocalStorage 사용법// 저장localStorage.setItem("username", "hong");// 불러오기console.log(localStorage.getItem("username"));// 삭제localStorage.removeItem("username");LocalStorage는 브라우저를 껐다 켜도 데이터가 남아 있습니다. 활용 사례 로그인 상태 유지 사용자 환경 설정 저장 쇼핑몰 장바구니LocalStorage는 작지만 강력한 저장소입니다. 서버 부담을 줄이고 사용자 경험을 향상시키는 좋은 도구입니다.
857 조회
2025.09.07 등록
안정적인 웹 만들기코드를 실행하다 보면 오류가 발생할 수 있습니다. 이를 방치하면 프로그램이 멈추지만, 에러 처리를 하면 안전하게 실행을 이어갈 수 있습니다. try-catchtry { throw new Error("문제가 발생했습니다!");} catch (err) { console.error(err.message);}finallytry { console.log("작업 실행");} finally { console.log("항상 실행됨");}에러 처리는 사용자 경험을 지키는 핵심입니다. 반드시 try-catch와 에러 로그 관리 방식을 익혀야 합니다.
889 조회
2025.09.07 등록
문맥에 따라 달라지는 값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를 한 단계 깊게 다룰 수 있습니다.
730 조회
2025.09.07 등록
코드의 체계적인 관리프로젝트가 커지면 하나의 파일에 모든 코드를 담을 수 없습니다. 이때 필요한 것이 모듈 시스템입니다. 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 모두 모듈 시스템을 기반으로 동작합니다.
740 조회
2025.09.07 등록