본문 바로가기
반응형

분류 전체보기

 (399)
바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄) 이전 애니메이션 | HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기 HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기(var 함수 활용)(2탄)1탄 | JS/HTML/CSS 로 랜딩 애니메이션 구현 바닐라 자바스크립트로 재밌는 애니메이션 /효과 구현해보기 (1탄)결과 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 애니메이션을 구현할 수 있duklook.tistory.com 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 네비게이션 애니메이션을 구현하실 수 있는 능력을 얻을 수 있습니다. HTML            Home      About      Contact      Project      Post      Map             우선 헤더 내 위치하는 네비게이션..
HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기(var 함수 활용)(2탄) 1탄 | JS/HTML/CSS 로 랜딩 애니메이션 구현 바닐라 자바스크립트로 재밌는 애니메이션 /효과 구현해보기 (1탄)결과 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 애니메이션을 구현할 수 있게 됩니다.  영상은 약간 짤려서 나왔는데 원래 시작 화면은 하얗게 가득찬 상태에서 시작됩니다.   HTML우duklook.tistory.com미리보기이번 포스팅을 잘 따라 오시면 다음과 같은 애니메이션을 구현하실 수 있게 됩니다.    HTML HTML 마크업 구조에서 제일 중요한 부분은 style 속성의 값으로 --c와 --r 이라는 사용자 정의 CSS 변수를 지정하는 것입니다. 또한 각 div 태그 마다 .card 라는 class 속성의 값을 지정하여 향후 CSS 에서 .card 클래스 선택자에 접근하기..
바닐라 자바스크립트로 재밌는 애니메이션 /효과 구현해보기 (1탄) 0탄 보러가기 바닐라 JS/HTML/CSS 로 재미있는 애니메이션 구현하기(0탄)광원 마우스호버란?사실 그냥 마우스호버 애니메이션이라 하면 멋 없어보이니까 광원이라는 단어를 붙여서 만들어 보았습니다. hover 시 특정 애니메이션(빛의 퍼짐을 표현한 애니메이션)이 마duklook.tistory.com  결과 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 애니메이션을 구현할 수 있게 됩니다.  영상은 약간 짤려서 나왔는데 원래 시작 화면은 하얗게 가득찬 상태에서 시작됩니다.   HTML 이것이 프론트엔드다  우선  HTML 마크업을 아래와 같이 작성해줍니다. h2 는 헤딩태그로서 앞서 미리보기의 화면 중앙에 위치한 텍스트가 됩니다. banner 클래스가 부여된 div 태그는 화면의 뒷단..
[자료구조] 이진탐색트리와 연산 이진탐색트리이진탐색트리는 각 노드에 최대 두 개의 자식을 가지는 것은 이진트리와 같으나, 한 가지 눈에 띄는 차이점이 존재한다. 바로, 부모 노드의 왼쪽 자식 노드는 부모 노드보다 작은 값을 가져야 하고, 오른쪽 자식 노드는 반대로 큰 값을 가져야 한다. 즉, 다음과 같은 형태가 되어야 한다.  이 규칙은 자식 노드를 가지는 모든 부모 노드가 공통적으로 가지는 규칙 이므로 꼭 지켜주어야 한다.  이진탐색 트리 구현 |  Node Class이진탐색트리는 연결리스트하고 비교 했을 때 Node 클래스를 가지는 것은 동일하다. 다만, 트리의 Node 클래스는 head 라고 하는 참조 필드가 아닌, 왼쪽 자식 노드를 참조하는 left 와 오른쪽 자식 노드를 참조하는 right 가 있다. 즉, 다음과 같은 형식으로..
[나만의 모음집] VSCODE 사용자 코드 조각 아카이브 해당 포스트는..유용하게 사용하기 위해 만들어둔 사용자 코드 조각을 모아둡니다.  it : 테스트 it block { "Vitest It Block": { "prefix": "vit", "body": [ "it('$1', () => {", " $2", "});" ], "description": "Vitest it block" }, } vtest : 테스트 코드 작성을 위한 기초 셋팅{ "Vitest Test Suite": { "prefix": "vtest", "body": [ "import { describe, it, expect, beforeAll, afterAll..
[명령어 모음집] 다양한 명령어 혹은 팁을 모아두는 아카이브 포스트 목적 명령어/팁 들을 모아두는 포스트 입니다. 내용 수정 시 해당 날짜로 갱신되어 업로드 됨을 원칙으로 합니다.. docker# Docker 이미지 관련 명령어# Dockerfile을 사용하여 새로운 이미지를 빌드합니다. # -t 플래그로 이미지 이름과 태그를 지정합니다.docker build -t : .# Docker Hub 또는 다른 레지스트리에서 이미지를 가져옵니다.docker pull :# Docker Hub 또는 다른 레지스트리로 이미지를 업로드합니다.docker push :# 로컬에 존재하는 Docker 이미지의 목록을 표시합니다.# -a 플래그를 사용하면 모든 이미지(중간 이미지 포함)를 표시합니다.docker images -a# 로컬에서 Docker 이미지를 삭제합니다.docker ..
[복지맵 프로젝트] ~ 2024.04.29 진행사항 점검[CH03] 현재 까지 진행사항아래 시연 GIF 는 27일 경에 진행된 것인데, 각 SVG 맵에서 구분된 구역을 포커스 하면 해당 지역의 서비스 상세 내역이 아코디언 형식으로 조회할 수 있도록 목록이 렌더링되는 형태로 구현해두었다.   그리고 현재는 카카오 MAP SDK 를 사용해서 각 구/군별로 복지기관의 위치를 다중 마커로 표시하였고, 아래 이미지에는 안 나와 있지만, 현재 사용자의 좌표 또한 마커로 표시되도록 해두었다. 사용자 위치 같은 경우에는 HTTPS 에서만 지원해준다는데, 어차피 배포할 때는 HTTPS 로 할 것이므로 큰 문제는 없을 듯하다.     향후 방향성길찾기 기능길찾기 기능을 구현하려고 한다. 사용자가 서비스 목록을 알더라도 그 기관이 어디에 위치해 있는지, 현재 위치에서 얼마나 멀어져 있는지 ..
[복지맵 프로젝트] 2024.04.25 ~ 26 진행사항 점검 [CH02] 프로젝트의 컨셉현재 생각하고 있는 프로젝트의 컨셉은 사용자가 사이트에 접속을 하면 부산 행정 구역을 바로 확인할 수 있게 하고, 각 행정 구역을 클릭하면 구/군 별로 사용자가 이용할 수 있는 복지프로그램/기관 목록을 리스트 형식으로 표시하는 것이다.  이 때 사용자가 정확한 위치 정보를 확인 하고자 한다면, 이 때는 리스트의 상단에 지도보기(길찾기) 아이콘을 클릭하면 즉시, 해당 지역의 위치좌표와 마커가 표시되도록 한다. 현재 까지 구현 단계(2024.04.25 ~04.26) 위  컨셉에 따라 사용자가 루트 페이지에 접속하면 부산의 각 행정구역을 시각적으로 확인하고 선택할 수 있도록 해당 이미지를 SVG 를 사용하여 각 행정구역 별로 이벤트를 등록 가능하도록 작업하였다. 피그마로 작업하였기 때문에, 그나..
반응형

티스토리툴바