ITeus

안녕하세요. Teus입니다. 지난번 Gallery가 만들어 졌지만 작은 크기의 사진만 볼 수 있고, 이 사진을 크게 볼 방법이 없었죠? 이번에는 사진을 눌렀을 때 사진을 확대해서 보여줄 수 있는 Modal을 구현해 보겠습니다. # 1. ModalModal을 들어본 적이 없더라도, 아래 이미지를 보면 뭔지 바로 알 수 있습니다.Modal이 특별해 보이지만 그저 뒤에있는 화면을 overly라고 해서 음영처리를 하고 내부의 Contents를 보여주는것 뿐 입니다. Modal을 modal-overlay와 modal-content로 나누면 이해가 편합니다. # 2. Modal on Gallery이제 Modal을 Gallery에 적용해 봅시다. 먼저 modal을 사용하기 위해서 modal.jsx를 통해서 modal..

안녕하세요. Teus입니다. 지난번까지 해서 드디어 캘린더를 추가해서 모바일 청첩장이 컴퓨터 한 화면에 안들어올 정도가 되었습니다. 이번에는 모바일 청첩장에서 중요한 사진을 보여줄 수 있는 이미지갤러리를 추가하겠습니다.# 1. 이미지갤러리이미지갤러리는 기본적으로는 6장만 보여주고 사용자가 원한다면 펼치기를 통해서 추가적인 사진을 확인할 수 있게 해줍니다.대표사진 삭제사진 설명을 입력하세요.이제 위 설계도에 맞게 코드를 작성합니다. Gallery.jsximport { useEffect, useState } from "react";//src/assets/images에 있는 모든 이미지를 한번에 불러오기 위한 방법입니다.const imagePaths = import.meta.glob('./assets/imag..

안녕하세요. Teus입니다. 지난번까지 해서 웰컴문구를 추가하고 지금까지 만든 모든 Components에 fade-in 효과를 적용 하였습니다. 이번에는 모바일 청첩장에서 빠질 수 없는 캘린더 입니다. # 1. 캘린더일반적인 App의 캘린더의 경우 날짜를 선택하는 기능이 있습니다. 하지만 모바일 청첩장 같은 경우 캘린더의 날짜를 고르기 보다 날짜를 시각적으로 표시해 주는 역할을 합니다. 그래서 table tag와 css를 사용해서 만들어 보도록 하겠습니다. 일단 어떻게 그릴지 설계부터 하고 갑니다.  일단 text를 이용해서 위에 날짜를 표기하고 아래에는 Table을 이용해서 달력을 표기한 다음 결혼식 당일 날짜에는 별도의 marking을 통해서 강조를 해 줍니다. 아래부분에는 해당 날짜까지 얼마의 기간..

안녕하세요. Teus입니다. 지난번 까지 대표사진의 그레디언트 음영까지 추가가 완료 되었습니다. 이번에는 웰컴문구를 추가하고 지금까지 만든 Components에 fade-in 효과(스르륵 올라오는 효과)를 넣어보겠습니다. # 1. 웰컴 문구웰컴문구는 별거 없습니다. 모바일 청첩장 보면 `환영합니다` 같은 멘트있죠? 그래서 아래와같이 작성해 보도록 하겠습니다.   이 부분 같은 경우는 div tag안에 text만 적절하게 배치하면 되기때문에 어려울게 없습니다. 아래 코드를 보면 쉬울거에요 App.jsximport reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import './App.css'import { useEffect, useR..

안녕하세요. Teus입니다.지난번까지 BGM을 깔아놨죠? 이제 BGM과 함께 처음 청첩장을 보시는분들이 맞이할 내용을 작성합니다. # 1. 신부/신랑 이름 어디서 언제 결혼이거는 어려울게 별로 없습니다. 일단 기본적으로 틀을 설계하고 들어갑니다.이러한 형태로 만들려고 합니다. 그러기 위해서 일단 신신(신랑님 신부님)은 위아래 마진을 두고 표시하고 나머지는 단순하게 tag를 사용해서 마무리 해 줍니다. App.jsximport reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import './App.css'import { useEffect, useRef, useState } from 'react';import Audiocomp fro..

안녕하세요. Teus입니다. 지난번까지, 어떻게 모바일 청첩장 페이지를 구성할지 다뤘습니다. 이제 이 페이지 레이아웃의 Components를 하나씩 채워보겠습니다. 이번에는 가장 최 상단에 위치하는 오디오 입니다. ​# 1. 오디오영역 Components모바일 청첩장에 BGM이 빠질 수 없죠? 다들 결혼식 하면 생각날 아주 따스한 음악으로 깔아 주지용. 이제 이 BGM을 모바일 청첩장 프로젝트에 추가해 보도록 하겠습니다. 오디오영역 Components 같은 경우는 오디오 버튼이 존재하고 해당 버튼을 누르면 Audio가 나오고, 버튼을 다시 누르면 Audio가 종료되는 형태로 동작합니다. 아래와 같이 간단하게 설계할 수 있겠네요. 일단 Audio 버튼을 만들기 위한 Audio icon을 구글에 검색하면 다..