이미지 슬라이드쇼에 타이머 추가하기
이전에 이미지 전환 기능을 구현한 적이 있었는데, 이번에는 자동 재생을 위해 타이머를 추가해보았습니다. 코드를 살펴보겠습니다.
CSS 코드:
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
.container { width:400px; height:500px; position:relative;
float: left;margin-right:60px; background:url(img/loader_ico.gif) n ...
9월 14일 00:48에 게시됨
YARL로 URL 다루기: 설치부터 객체 활용까지
YARL 설치 방법
YARL(Yet Another URL Library)은 Python에서 URL을 쉽게 다루기 위한 라이브러리입니다. 다음 두 가지 방법으로 설치할 수 있습니다.
pip을 이용한 간편 설치
터미널에서 다음 명령어를 실행하면 최신 버전의 YARL이 자동으로 설치됩니다.
pip install yarl
이 명령은 PyPI에서 YARL과 함께 필요한 의존성(dependency) 패키지들을 함께 내려받아 설치 ...
8월 1일 14:19에 게시됨
pdf.js와 JSP를 활용한 PDF 미리보기 구현 방법
pdf.js와 JSP를 통한 웹 기반 PDF 미리보기 가이드
본 문서에서는 pdf.js 라이브러리를 JSP 환경과 결합하여 웹 페이지에서 PDF 파일을 표시하는 방법을 설명합니다.
1. 사전 준비물
pdf.js 공식 웹사이트에서 라이브러리 다운로드: http://mozilla.github.io/pdf.js/
다운로드한 zip 파일(pdfjs-2.2.228-dist.zip)을 압축 해제하여 pdfjs 폴더 생성 (build 및 ...
7월 30일 06:40에 게시됨
HTML 기본 이해: 웹 콘텐츠 구조화
웹 페이지, 웹 애플리케이션 및 모바일 애플리케이션 사용자 인터페이스를 구축하는 데에는 HTML, CSS, JavaScript 세 가지 핵심 기술이 사용됩니다. 이들은 프론트엔드 개발의 기반을 이룹니다.
HTML이란 무엇인가?
HTML(HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. 물리학자 팀 버너스-리에 의해 제안되고 개발되었으며, HTM ...
7월 17일 00:32에 게시됨
플라스크 웹 프레임워크 기본 가이드
1 플라스크 소개
# 현재 파이썬 생태계에서 유명한 웹 프레임워크
-django: 대규모 프로젝트에 적합한 포괄적인 프레임워크
-Flask: 경량화된 핵심 기능에 집중한 마이크로 프레임워크
-다양한 확장 기능을 통해 필요한 기능을 추가할 수 있음
----- 동기 프레임워크 ----- django 3.x 버전부터 비동기 프레임워크로 전환
---- 비동기 프레임 ...
7월 11일 16:09에 게시됨
JavaScript DOM 노드 조작 기본 원리와 실제 적용
let nodeListToArray = Array.from(targetElement.childNodes);
ES6의 Array.from() 정적 메서드를 사용하면 더 간결하게 변환할 수 있습니다. let nodeListToArray = Array.from(targetElement.childNodes);
모든 노드는 parentNode 속성을 가지며, 이는 DOM 트리에서 부모 요소를 가리킵니다. childNodes의 모든 노드는 동일한 부모 요소를 공유하므로, parentNode 속 ...
7월 6일 06:44에 게시됨
모바일 디버깅을 위한 vConsole 활용 가이드
소개
웹 애플리케이션 개발 과정에서 console.log를 사용하여 정보를 출력하거나 API 응답, 성능 등을 확인할 수 있습니다.
하지만 모바일 기기에서는 이러한 콘솔 로그를 직접 볼 수 없는 문제가 있습니다.
이럴 때 alert를 사용하여 정보를 표시할 수 있지만, 이 방법은 불편할 뿐만 아니라 JS 스레드를 차단하여
후속 코드 실행에 문제를 일 ...
7월 5일 00:30에 게시됨
Django에서 사용자 정의 비밀번호 재설정 확인 페이지 구현하기
Django에서 사용자가 비밀번호를 잊어버렸을 때 재설정할 수 있도록 사용자 정의 페이지를 구현하는 방법을 알아보겠습니다.
1. 로그인 페이지에 비밀번호 찾기 링크 추가
로그인 폼 아래에 '비밀번호를 잊으셨나요?' 링크를 추가하여 사용자가 비밀번호 재설정 절차를 시작할 수 있도록 합니다.
<div class="form-group text-center">
<button type="submit ...
6월 30일 05:32에 게시됨
CSS 사용자 정의 속성 활용법 (--변수명)
CSS 사용자 정의 속성, 일명 CSS 변수는 현재 많은 CSS 전처리/후처리 프로그램에서 관련된 빠른 컴파일 기능을 제공하고 있습니다.
기본 사용법은 무엇이 있을까요? 간단한 예제를 통해 살펴보겠습니다. 요구사항: 중앙에 정렬된 5개의 블록 요소를 생성하되, 홀수와 짝수 요소는 동일한 높이이지만 다른 너비를 갖도록 합니다.
먼저 결과물을 살펴보겠습니다:
HTML 구조: ...
6월 16일 19:42에 게시됨
자바스크립트 기초 구조
자바스크립트 기본 구조
문자 집합
대소문자 구분
자바스크립트는 대소문자를 구분합니다. 예를 들어, 변수명 'myVar'와 'myvar'는 서로 다른 변수로 취급됩니다.
공백, 줄 바꿈 및 형식 제어 문자
자바스크립트는 공백, 탭, 줄 바꿈 등을 무시합니다. 하지만 문자열 리터럴 내에서는 이러한 문자들이 의미를 가집니다.
유니코드 이스케이프
자바스크립트에서는 \uXXXX 형 ...
6월 5일 20:10에 게시됨