반응형
Development/Web
[프론트엔드] 움직이는 3D 카드 효과 만들기
[프론트엔드] 움직이는 3D 카드 효과 만들기
2025.03.13본 포스팅은 아래 코딩애플님의 동영상 '바로 쿠팡 취업가능한 포트폴리오 만들기'를 참고하여 작성하였습니다.https://youtu.be/YDCCauu4lIk?si=hYyzxZVK5CIwoprZ 0. 준비카드로 사용할 이미지 1장(images/3vx2.webp)HTML 파일(index.html) 1. 카드 이미지 파일 출력 2. 마우스 움직임에 따라 카드 이미지 회전 container영역에 마우스의 좌표(e.offsetX, e.offsetY)에 따라서 transform 속성을 줘서 카드 이미지를 회전시킨다.transform: 요소의 변형을 정의하는 CSS 속성입니다. 회전, 이동, 크기 조절, 기울임 등의 효과를 적용할 수 있습니다.perspective(350px): 3D 변형 효과를 줄 ..
[Ubuntu] Wordpress 플러그인 설치/삭제 시 FTP 정보 입력 창이 나올 때(Connection Information)
[Ubuntu] Wordpress 플러그인 설치/삭제 시 FTP 정보 입력 창이 나올 때(Connection Information)
2023.10.17이슈 상황 플러그인을 설치하려고 하는데, 위와 같이 Connection Information창이 출력되면서 FTP 정보를 묻는다. Connection Information To perforam the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact you web host. 해결법 1. 권한 설정 변경 워드프레스 경로의 디렉토리, 파일들의 권한이 제대로 설정되어있지 않은 경우다. sudo chown -R www-data:www-data /var/www/html..
[Ubuntu] 워드프레스(Wordpress), LAMP(Linux, Apache, MySQL, PHP) 스택 설치
[Ubuntu] 워드프레스(Wordpress), LAMP(Linux, Apache, MySQL, PHP) 스택 설치
2023.10.16LAMP 스택 설치 sudo apt update sudo apt install apache2 mysql-server php php-mysql php-curl php-gd php-mbstring php-xml php-xmlrpc MySQL 데이터베이스 및 유저 생성 sudo mysql -u root -p CREATE DATABASE wordpress; CREATE USER '유저 이름'@'localhost' IDENTIFIED BY '비밀번호'; GRANT ALL PRIVILEGES ON wordpress.* TO '유저 이름'@'localhost'; FLUSH PRIVILEGES; EXIT; WordPress 다운로드 cd /var/www/html wget https://wordpress.org/late..
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
2023.10.16Certbot 설치 해당 명령어는 Apache 웹서버를 기준으로 합니다. sudo apt update sudo apt install certbot sudo certbot --apache -d example.com WordPress 설정 업데이트 1. 워드프레스 대시보드 로그인 2. 설정 -> 일반 -> WordPress Address (URL)'과 'Site Address (URL)'을 https://example.com으로 변경 SSL 강제 설정 /var/www/html/(워드프레스 경로) .htaccess 파일에 다음 코드를 추가 Apache 재시작 sudo systemctl restart apache2 SSL 갱신 자동화 sudo crontab -e 0 0 1 * * /usr/bin/certbot ..
SPA(Single Page Application), MPA(Multi Page Application)
SPA(Single Page Application), MPA(Multi Page Application)
2022.11.20서론 전통적인 Web Application의 Page life cycle은 MPA(Multi Page Application)였다. 쉽게 말하면 웹 브라우저에서 특정 페이지에 대한 요청을 서버로 보내면, 서버는 데이터를 웹 브라우저에 응답한다. 이때 페이지를 이동할 때마다 전체 페이지가 다시 불러와지면서 화면이 깜빡거리게 되는데, 사용자 입장에서는 답답한 경험을 제공할 수 도 있다. (데이터가 많을 경우 페이지를 불러오는 동안 흰 화면을 보고 있어야 한다던가.. 여러 가지 부분에서) 그래서 요즘은 SPA(Single Page Application) 방식으로 개발된 Web Application을 심심치 않게 볼 수 있을 것이다. 다른 페이지로 이동하지 않더라도 하나의 페이지에서 서버와 통신을 통해 사용자에게..
[React] Create React App 을 이용해서 React 설치
[React] Create React App 을 이용해서 React 설치
2022.11.20React 앱 설치 방법 npx create-react-app 예전에는..? Webpack이나 Babel 같은 모듈을 설치하고, 설정해야 React 앱을 시작할 수 있었다. Webpack 이란? 오픈 소스 코드 자바스크립트 모듈 번들러로써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화해주는 라이브러리. Babel 이란? 최신 자바스크립트 문법을 지원하지 않는 브라우저를 위하여, 최신 문법을 구형 브라우저에서도 사용 가능하도록 변환해주는 라이브러리 // 아래와 같은 문법을 구형 브라우저에서는 [1, 2, 3].map((n) => n+1); // 이런식으로 변환 시켜준다. [1, 2, 3].map(function(n) { return n+1; }); npx 란? 노드 패키지 실..
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
2022.04.24프로젝트 생성 및 디렉토리 구성 자 심리테스트 만들기를 본격적으로 시작해보자. 가장 먼저 프로젝트를 생성하자. 필자는 GUIDE라는 이름의 프로젝트를 생성하였고 위와 같이 디렉토리를 구성하였다. GUIDE index.html script.js style.css 이름 설명 index.html 메인 페이지 script.js 페이지에서 기능을 동작하게 하기 위한 자바스크립트 파일 style.css 페이지를 꾸미기 위한 css파일 사실 아주 간단한 프로젝트기 때문에 따로 파일을 분리할 필요가 뭐가 있겠냐고 생각할 수 도 있지만. 필자는 깔끔한 것을 좋아하기 때문에 코드양이 적더라도 분리하였다. 기본적인 html의 소스코드다. 설명할 것도 딱히 없지만, 굳이 설명하자면 link 태그를 통해 style.css 파일..
0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론
0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론
2022.04.23시작하기 앞서.. 친구들끼리 MBTI 테스트 혹은 심리테스트를 웹페이지에서 진행하고, 결과물을 공유해서 서로의 성향을 비교해 재미를 느껴본 경험은 다들 한 번쯤 있을 것이다. 예시) 코인 투자 성향 심리 테스트 https://cjwoov-invesetment-type.netlify.app/ 글을 쓰게된 계기도 나도 그런 테스트를 한 번 만들어보고 싶었고 경험을 공유하면 좋을 것 같아서 글을 남긴다. 사전 지식 해당 과정은 HTML, CSS, JavaScript 언어를 사용한다. HTML, CSS, JavaScript에 대한 많은 지식도 필요 없으며 아주 기본적인 개념만 알고 있으면 된다. 그렇게 어렵게 만들지 않을 것이기 때문에... 준비물 Visual Studio Code : 소스코드 작성을 위한 에디..