JavaScript

JavaScript 스크롤 정도에 비례한 애니메이션 효과

구글링을 통해 얻은 코드들이 수학적으로 모두 틀려서 다시 만들어낸 코드.. 웹 페이지에서 스크롤에 비례한 애니메이션 효과를 구현하는 코드에 대하여 설명하겠다. 동작 구현 파일 작성 먼저 내장 함수 offsetTop을 사용하여 요소의 Y축 상대 위치 값을 불러온다. 다음으로 내장 함수 window.pageYOffSet을 사용하여 웹 페이지가 세로 방향으로 스크롤 된 px값을 불러온다. 값들이 정확하게 준비가 되었다면, 전체 웹 페이지의 […]

JavaScript 스크롤 정도에 비례한 애니메이션 효과 더 읽기"

PHP & JavaScript 게시판 사이트 제작 3

저번 글에서는 글 목록 및 글쓰기 기능을 구현하는 코드에 대하여 설명하였다. 이번 글에서는 글 페이지 및 글 수정, 삭제를 구현하는 코드에 대하여 설명하겠다. 글 페이지에는 댓글 쓰기, 수정, 삭제 기능도 포함되어있다. 모든 디자인은 부트스트랩을 사용했다. 1. 댓글 DB 생성 및 설정 댓글 작성 시 댓글 정보가 저장되는 DB를 생성한다. 댓글 내용은 300자로 제한한다. 2. 함수 추가 작성

PHP & JavaScript 게시판 사이트 제작 3 더 읽기"

PHP & JavaScript 게시판 사이트 제작 2

저번 글에서는 회원가입 및 로그인 기능을 구현하는 코드에 대하여 설명하였다. 이번 글에서는 글 목록 및 글쓰기 기능을 구현하는 코드에 대하여 설명하겠다. 모든 디자인은 부트스트랩을 사용했다. 1. Header 파일 작성 로그인 이후 상단 바에 사용자 정보와 로그아웃 버튼을 출력한다. (로그아웃 코드는 저번 글을 참고) 로그인 정보 없이 접근하면 로그인 폼으로 돌아간다. 2. 글 DB 생성 및 설정

PHP & JavaScript 게시판 사이트 제작 2 더 읽기"

PHP & JavaScript 게시판 사이트 제작 1

약 2년 전에 만들었던 게시판 사이트 소스 코드를 살펴보았는데, 소스 코드가 뒤죽박죽 섞여있고 기초적인 부분에서도 부족한 점이 많이 보여 이참에 다시 작성하기로 했다. 이번 글에서는 회원가입 및 로그인 기능을 구현하는 코드에 대하여 설명하겠다. 모든 디자인은 부트스트랩을 사용했다. 1. 부트스트랩 및 jQuery 스크립트 태그 추가 파일 최상단 또는 Head 파일에 다음과 같이 작성하여 부트스트랩 및 jQuery를

PHP & JavaScript 게시판 사이트 제작 1 더 읽기"

PHP & JavaScript 엑셀 파일 다운로드 및 업로드 구현 (PhpSpreadsheet 사용)

PHP 환경에서 엑셀 파일을 다뤄야 할 때, 보통 PHPExcel을 많이 사용하는데 이는 이미 서비스가 2019년에 종료되었으며 공식 문서도 PhpSpreadsheet를 권고한다고 명시되어있다. (현재 PhpSpreadsheet는 PHP 8 이상부터 지원되므로 참고) PhpSpreadsheet를 사용한 간단한 목록의 엑셀 파일 다운로드 및 업로드(후 데이터 수정) 기능을 구현하는 코드에 대하여 설명하겠다. 1. PhpSpreadsheet 설치 웹 서버에 PhpSpreadsheet를 사용하는 데 필요한 PHP 확장

PHP & JavaScript 엑셀 파일 다운로드 및 업로드 구현 (PhpSpreadsheet 사용) 더 읽기"

PHP & JavaScript 날짜 입력 버튼 및 jQuery Datepicker 적용

날짜 데이터로 검색할 때 오늘, 어제, 3일 전, 한 달 전, 당월의 날짜를 버튼으로 입력하고 입력한 날짜 클릭 시 jQuery Datepicker를 사용해서 날짜를 달력 형태로 수정할 수 있는 폼을 구현하는 코드에 대하여 설명하겠다. 1. jQuery 및 jQuery UI 스크립트 태그 추가 파일 최상단 또는 Head 파일에 다음과 같이 작성하여 jQuery와 jQuery UI를 사용하기 위해 추가한다.

PHP & JavaScript 날짜 입력 버튼 및 jQuery Datepicker 적용 더 읽기"

PHP & JavaScript Naver SmartEditor 2.0 적용

게시판같이 글을 업로드하는 페이지를 만들 때 Naver에서 제공하는 SmartEditor를 적용하면 더욱 간편하게 글 작성 폼을 제공할 수 있다. SmartEditor를 사용해서 글 작성 및 업로드를 구현하는 코드에 대하여 설명하겠다. 1. SmartEditor 설치 여기에서 SmartEditor를 설치한다. 2.9.0 이상은 사진 업로드가 제한되므로 이전 버전을 설치하는 것을 추천한다. 설치 후 웹 서버에 폴더를 업로드한다. 2. jQuery 및 SmartEditor 스크립트

PHP & JavaScript Naver SmartEditor 2.0 적용 더 읽기"

PHP & JavaScript Drag and Drop 구현 (Dropzone 사용)

Dropzone에 대한 심화 정보는 국내에 많이 없어서 디버깅이 진짜 어려웠다… 잊기 전에 이미지 Drag and Drop 업로드 및 수정, 삭제, 다운로드 모두 구현하는 코드에 대하여 설명하겠다. 1. DB생성 및 설정 설명을 위해 다음과 같이 간단한 DB를 생성해 구현했지만 실제로 사용할 것이라면 컬럼만 추가해도 무방하다. 2. jQuery 및 Dropzone 스크립트 태그 추가 파일 최상단 또는 Head

PHP & JavaScript Drag and Drop 구현 (Dropzone 사용) 더 읽기"

위로 스크롤