본문 바로가기
반응형

전체 글415

img5 React로 구현하는 모던 UI 디자인 - 인터랙티브 카드 호버 효과 완벽 가이드 안녕하세요, 프론트엔드 개발자 여러분! 오늘은 React와 CSS를 활용해서 실무에서 바로 사용할 수 있는 고급스러운 카드 호버 효과를 구현하는 방법을 자세히 알아보도록 하겠습니다.구현하려는 디자인의 특징오늘 구현할 카드 디자인의 주요 특징을 먼저 살펴보겠습니다.부드러운 스케일 호버 효과세련된 그라데이션 오버레이인터랙티브한 아이콘 애니메이션반응형 디자인접근성을 고려한 구조상세 구현 방법 설명1. 기본 카드 구조 설정먼저 카드의 기본 구조를 만들어보겠습니다. 여기서 가장 중요한 것은 계층 구조입니다. {/* 그라데이션 오버레이 */} {/* 실제 컨텐츠 */} 2. 호버 효과 구현하기카드의 호버 효과는 transform과 transition을 조합하여 구현합니다. Tailwind C.. 2025. 1. 27.
img5 React와 Tailwind CSS로 만든 모던한 포트폴리오 웹사이트 공개 안녕하세요! 오늘은 제가 최근에 개발한 포트폴리오 웹사이트 프로젝트를 소개해드리려고 합니다. Apple스러운 미니멀 디자인과 부드러운 애니메이션이 특징인 이 프로젝트를 무료로 공개하니, 여러분들도 자유롭게 활용해보세요! 프로젝트 미리보기프로젝트 링크: sensational-kangaroo-50b175.netlify.app깃허브 링크 : https://github.com/YangMun/Portfolio-Bridge?tab=readme-ov-file주요 기능1. 랜딩 페이지깔끔하고 모던한 디자인의 메인 페이지모바일부터 데스크톱까지 완벽하게 대응하는 반응형 네비게이션핵심 서비스를 한눈에 볼 수 있는 소개 섹션2. 소개 페이지Apple 스타일의 부드러운 스크롤 애니메이션인터랙티브한 3D 효과로 시선 집중회사의 .. 2025. 1. 17.
img5 프리랜서를 위한 완벽한 포트폴리오 플랫폼 웹사이트 아이디어 프리랜서를 위한 완벽한 포트폴리오 플랫폼 기획하기: 프리랜서와 클라이언트를 이어주는 새로운 공간안녕하세요! 오늘은 프리랜서들의 작품을 효과적으로 전시하고 클라이언트와의 매칭을 도와주는 포트폴리오 플랫폼 기획에 대해 자세히 이야기해보려고 합니다. 최근 프리랜서 시장이 급격히 성장하면서, 효과적인 포트폴리오 관리와 클라이언트 매칭의 중요성이 더욱 커지고 있습니다.왜 새로운 프리랜서 플랫폼이 필요한가?현재 프리랜서 시장은 지속적으로 성장하고 있습니다. 코로나19 이후 재택근무와 유연근무가 일반화되면서, 프리랜서로 전향하는 전문가들이 늘어나고 있죠. 하지만 기존 플랫폼들은 다음과 같은 한계점을 가지고 있습니다:단순한 구인구직 중개에 그치는 경우가 많음포트폴리오를 효과적으로 전시할 수 있는 공간 부족프리랜서의 전.. 2025. 1. 16.
img5 [EP.05] 국어사전 API를 사용해 단어 검색 페이지 만들기 이번이 마지막 시간입니다. 앞 시간에 코드를 보면 제가 직접 용어들을 입력 해뒀습니다. 따라서 모든 용어가 존재하지 않는 문제가 발생합니다. 그 대안으로 국어사전에서 제공하는 API를 사용하여 단어를 검색 할 수 있도록 페이지를 만들었습니다. 해당 페이지에서 단어를 입력하면 국어사전에서 결과를 가져와 단어를 나열 해줍니다.국어사전 페이지 UI 구현하기먼저 html 구조를 작성 하겠습니다. search arrow_forward menu_book 검색어를 입력하시면표준국어대사전의 결과가 표시됩니다. .. 2025. 1. 16.
img5 [EP.04] pdf 파일을 불러와 용어를 인식 후 뜻 풀이하기 아마 다음 시간이 마지막일 것 같은데, 현재 모든 기능을 구현 해서 구글 크롬 확장 프로그램에 제출 했습니다.!! 미리 축하~~~자 이번 시간에는 pdf 파일을 불러와 해당 파일에 단어들을 인식해 앞 시간에 정의해둔 용어가 있다면 해당 용어를 나열 해주는 기능을 만들 것입니다. 문서 분석 페이지 만들기 저희는 오늘 이것을 만들겁니다 이 페이지에서 필요한 것은 1. 파일을 업로드 하게끔 만드는 버튼 2. 파일이 정상적으로 업로드 됐는지 확인하는 기능3. 파일에 단어를 인식하는 기능크게 이렇게 3개가 있습니다. 부분부분 필요한 게 더 있지만! 그것은 중요하지 않아요. 먼저 크게크게 잡고 가야 세부적으로 다룰 수 있습니다. 자 이제 시작 해봅시다.파일 업로드 기능 구현먼저 HTML을 작성 하겠습니다. .. 2025. 1. 16.
img5 [EP.03] 비즈니스 용어를 정리하고 해당 페이지의 UI를 구현하기 비즈니스 용어 페이지 만들기안녕하세요 저번 시간에 기본 구조를 만들었으니 이제 본격적으로 구현해보도록 하겠습니다.알아보니 확장 프로그램을 눌렀을 때 팝업(popup)형태가 있고 사이드 패널(sidePanel) 형태가 있더라고요. 아무래도 서비스를 실제로 제공할 것이기에 사이드 패널을 선택했습니다. 이제 구현해보도록 하겠습니다. 데이터 관리 Terms.json 생성현재는 직접 용어를 관리 할 것이기에 별도의 파일로 관리해줄 것입니다.{ "terms": [ { "term": "금일 (Today)", "description": "오늘을 뜻하는 비즈니스 용어. 주로 문서나 이메일에서 사용." }, { "term": "구두 (Verbal)", "descript.. 2024. 12. 19.
반응형

티스토리툴바