React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..

프로젝트명: Cool20 ( 쇼핑몰 ) 기간: 11월 첫째주부터 약 7주간 진행 팀원: 3 역할: 백엔드 및 기능 제작 사용 언어: HTML, CSS, JSP, JS, SQL 개발환경: VS Code, Eclipse 들어가며 수업시간에 했던 내용들을 종합하여 팀별로 나만의 쇼핑몰을 만들어보는 프로젝트를 진행했다 처음 팀 단위 프로젝트를 진행하였기에 과정이 매끄럽게 이어지지는 않았던 것 같다 1. 프로젝트 아이디어 구상 2. 프로젝트 기능 설계 3. 프로젝트 기능, 세부기능 추가 및 점검 4. 완성 1. 프로젝트 아이디어 구상(1주차) 보통 쇼핑몰 하면 가장 먼저 떠오르는 것이 있다. 바로 의류 쇼핑몰이다. 이를 만들기 위해 우리는 괜찮은 이름을 찾아보았고, 핫텐이라는 쇼핑몰에서 본따 Cool20이라는 쇼..

프로젝트를 통해 프론트엔드 부분에 대해 만들면서 학습 해나가던 중 맨땅에 헤딩 급으로 부딪힐 때 많이 도움이 되었던 사이트이다 장점1: 메뉴가 보기 편하다 웹 개발을 진행하다가 모르는 태그가 있다면 달려와서 여기서 알아보면 상당히 직관적인 해답을 얻을 수 있다 장점2: 예제 접근성 최대한 간단하게 필요한 내용만 써 둔 예제라서 그런지 활용 하기에 좋다 결론: 웹 기초 문법 학습 최적화 보통의 학습법은 선 실습 후 학습의 방법으로 하는 것이 더 효율이 좋아서 그렇게 하고 있었는데 이 사이트는 기본적으로 설명이 깔끔해서 그런지 먼저 학습을 하고 웹 개발에 들어갔을 때 더 도움이 되었던 것 같다 이런 사람들에게 추천합니다 웹 개발이 처음이고 뭘 어떻게 해야할 지 모르겠다 코드 복사해서 가져오는 건 잘하는데 아..

일단 저장해두면 굉장히 좋은 곳에 쓸 것 같은 기능이라 가져와 보았습니다 코드를 뜯어보면 동적인 애니메이션 관련 코드들에 대해 알 수 있기에 굉장히 의미있는 코드들이라고 생각합니다 seroSlide.html Welcome to Coda Let's play programming with HTML/CSS seroSlide.css body{ margin: 0; padding: 0; font-family: montserrat, sans-serif; background: black; } .animated-text{ color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2980b9; pad..

오늘은 좌측에는 검색창, 중앙에는 로고, 우측에는 부가메뉴가 있는 헤더를 만들어보려 한다 우선 다음 글에서 기본적인 틀을 나눠둔 코드를 가져오도록 하겠다 0. 코드 준비 [HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 1편) HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 time-map-installer.tistory.com 언제나 시작할 때 코드를 입력할 공간을 준비를 해 두는 것이 좋다 1. 헤더 나누기 총 세 가지 요소가 들어갈 것이기에 3등분을 해 둔다 #header { border: 1px solid red; height: 20%..

주로 HTML과 CSS를 웹페이지를 만드는 데에 많이 쓰곤 한다 그리고 이 두 파일을 연동하는 방법은 생각보다 간단하다 1. main.html 생성 2. style.css 생성 3. 안녕하세요 5. style.css에 속성 아무거나 지정 후 작동되는 지 확인 body{ color: aqua; }