본문 바로가기
반응형

분류 전체보기

 (399)
[푸드피커] AWS S3 + CloudFront 를 활용한 정적사이트 배포(ReactJS) 들어가기 전전체적인 과정 요약이번 포스트를 통해 S3 버킷을 생성 해보고, 수동으로 배포하는 테스트를 거친 후, Cloud Front 를 통해 S3 버킷에 저장된 데이터를 읽어와서 HTTPS를 적용한 정적 웹 사이트를 배포해볼 것입니다. 그리고 다음 연계 포스트에서는 해당 배포를 Github Actions 를 사용하여 자동화해볼 것입니다. 아래 이미지를 보면 빨간색 점선으로 표시된 영역이 오늘 수행할 작업입니다.시작에 앞서 몇 가지 주요 개념에 대하여 정리해보고 넘어가는 시간을 가져볼까 합니다. [더보기] 를 눌러서 참고해보세요. 도메인과 관련한 기초 개념더보기DNS(Domain Name System)는 도메인 이름을 IP 주소로 변환해주는 시스템입니다. DNS 레코드는 다양한 유형이 있으며, 각기 다른..
certbot 인증서 관련 명령어 모음집 포스트 목적배포 시 사용한 Certbox 을 이용한 SSL 인증서가 곧 만료된다고 하여  이참에 참고할 만한 명령어를 모아두고자 작성되었습니다.Certbot 설치운영체제에 따라 Certbot을 설치하는 명령어가 다릅니다. 일반적으로 다음과 같은 명령어를 사용합니다Ubuntu/Debian sudo apt updatesudo apt install certbotsudo apt install python3-certbot-nginx # Nginx 플러그인sudo apt install python3-certbot-apache # Apache 플러그인 CentOS/RHELsudo yum install certbotsudo yum install python3-certbot-nginx # Nginx 플러그인sudo..
CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작 [이전 애니메이션] 3D 카드 회전 애니메이션 HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다. HTML 우선 HTML 을 아래와 같이 구성해줍니다.   부연설명을 해보자면, 3D 효duklook.tistory.com 미리보기해당 과정을 따라오시면 아래와 같은 놀라운 자석 애니메이션을 구현하실 수 있는 능력을 가지게 됩니다. 이번에 자바스크립트에서 투자되는 코드가 비중이 큰 편입니다. 요소를 동적으로 생성하고, 생성된 각 요소에 각도 변환을 이용한 자석 효과를 표현하기 위한 조치가 필요하기 때문입니다.  [버전1] gap 과 자석의 수를 적당히 [버전2] 빼곡한 버전, 웅장함을 느낄 ..
[푸드피커] 기능 구현 정리본 오늘의 명언 들어가기 전프로젝트를 진행하면서 구현한 기능들을 향후 재참고 하기 위한 혹은 포트폴리오를 위해 정리해두는 모음 형식의 포스트 입니다. 해당 기능 구현 목록은 2024.05.24 ~ 이후로 재개발에 들어가면서 변경된 혹은 추가된 로직에 대한 구현을 담고 있습니다. 참고로, 사용된 코드는 실제 프로젝트 코드와는 차이가 있을 수 있습니다. 해당 기능들이 프로젝트에서 구현된 모든 기능을 대변하지는 않습니다. 혹시나 이 글을 참고하시는 분이 있으시다면, 이러한 방식으로 작성하기도 하는구나 용도로 보시면 좋을 것 같습니다. 최대한 신경써서 작성하지만 제가 아는 수준에서 작성되는 만큼 코드의 퀄리티는 장담하지 못 합니다. 따라서 사용하시는 부분이 있다면, 직접 검증하셔서 필요한 부분만 재사용해도 좋을 것..
HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기 미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다. HTML 우선 HTML 을 아래와 같이 구성해줍니다.   부연설명을 해보자면, 3D 효과를 적용하고, 카드의 중심축이 되어 실제 회전 효과를 구현하는데 사용되는 .container 요소와 각 카드를 표현하는 .card 요소들을 만들어줍니다.  그리고, 각 카드의 각도를 계산하는데 사용할 CSS 변수인 --i 에 각각 1 ~ 8 까지 값들을 순서대로 할당해 줍니다. CSSCSS 초기화 및 초기 설정이번에는 기초 셋팅으로 기본설정된 값을 초기화하고, container 요소를 수직-수평으로 중앙정렬 해보겠습니다.* { margin:0; padding:0; box-s..
HTML,CSS,JS 로 간단한 무한 슬라이드 만들기 3탄 이전 애니메니션 ※ 이 부분은 작성 예정입니다(사정상 순서가 뒤로 미뤄졌습니다.) HTML/CSS/JS 로 초간단 무한 슬라이드 갤러리 만들기 [2탄] (1탄 이후 작성예정)이전 애니메이션 | 1탄(작성중) HTML+CSS+JS로 초간단 무한 슬라이드 만들기 [1탄] (작성예정) duklook.tistory.com 미리보기HTMLCSSJSduklook.tistory.com 미리 보기이번에 구현하는 애니메이션은 이전 시간에 이어서 무한 슬라이드 입니다. 이전과 다른 점이 있다면, 이전 방식은 첫 번째 슬라이드의 이미지를 확대하는 방식이었다면, 이번 슬라이드는 가운데 슬라이드 카드를 기준으로 게단식으로 깊이감이 생기는 애니메이션 입니다. 진짜 별거 없으니 잠깐 시간내셔서 알고 가세요. 분명 쓰이는 곳이 많을..
HTML+CSS+JS로 초간단 무한 슬라이드 만들기 [1탄] 이전 애니메이션 HTML+CSS+JS 를 이용한 써클 프로그래스 애니메이션을 만들어 봅시다이전 애니메이션 CSS +JS 를 이용한 톡톡 튀는 폭죽(스파크) 애니메이션 만들기이전 애니메이션 | 로딩 스피너 HTML/CSS 를 이용한 로딩 스피너 만들기3탄 | 마우스 호버 시 따라다니는 언더라인 만duklook.tistory.com 미리보기이번에 만들 슬라이드의 핵심은 첫 번째 자리에 오는 슬라이드가 확대 되면서 커다란 영역을 차지하도록 해주는 겁니다. 그리고 슬라이드1 부터 4 까지 진행 후 다시 1로 돌아갈 때, 자연스럽게 다시 슬라이드 4에서 슬라이드 1로 이어지도록 해주는 것이 포인트 입니다. HTML우선 마크업은 다음과 같이 해줍니다. 각 .item 이 부여한 div 태그가 슬라이드1~5 까지 총 ..
HTML+CSS+JS 를 이용한 써클 프로그래스 애니메이션을 만들어 봅시다 이전 애니메이션 CSS +JS 를 이용한 톡톡 튀는 폭죽(스파크) 애니메이션 만들기이전 애니메이션 | 로딩 스피너 HTML/CSS 를 이용한 로딩 스피너 만들기3탄 | 마우스 호버 시 따라다니는 언더라인 만들기 바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄)2탄 | HTML/CSS 만duklook.tistory.com 미리보기이 포스트를 따라오시면 아래와 같은 프로그래스 애니메이션을 구현하실 수 있는 능력을 가지게 됩니다.   HTML우선 마크업을 만들어 줍니다. 필요한 마크업은 프로그래스의 트리거 역할을 하는 button 과 프로그래스 역할을 하는 div, span 이 필요 합니다. 크게 건드릴 부분은 없으므로 이대로 적어 줍니다.충전하기 0%  CSSCSS 초기화CSS 에서는..
반응형

티스토리툴바