모바일청첩장 직접 만들기 with 코딩 - 5. 웰컴 문구 추가하기, Fade-in 추가하기.

 

안녕하세요. Teus입니다.

 

지난번 까지 대표사진의 그레디언트 음영까지 추가가 완료 되었습니다.

 

이번에는 웰컴문구를 추가하고

 

지금까지 만든 Components에 fade-in 효과(스르륵 올라오는 효과)를 넣어보겠습니다.

 

# 1. 웰컴 문구

웰컴문구는 별거 없습니다. 모바일 청첩장 보면 `환영합니다` 같은 멘트있죠?

 

그래서 아래와같이 작성해 보도록 하겠습니다.

 

 

 

이 부분 같은 경우는 div tag안에 text만 적절하게 배치하면 되기때문에 어려울게 없습니다.

 

아래 코드를 보면 쉬울거에요

 

App.jsx

import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'


import { useEffect, useRef, useState } from 'react';
import Audiocomp from './Audiocomp'
import Topmsg from './Topmsg';
import Mainphoto from './Mainphoto';

function App() {
  const debug = process.env.NODE_ENV === 'development'?"solid":"none";

  


  return (
    <>
      <div className='main-frame'>
        <div style={{ border: debug, textAlign: 'right' }}>
          <Audiocomp/>
        </div>
        <div style={{ border: debug }}>
          <Topmsg/>
        </div>
        <div className="fade-in" style={{ border: debug }}>
          <Mainphoto/>
        </div>
        <div style={{ border: debug}}>
          <h1>INVITATION</h1>
          소중한 분들을 모십니다.<br/>
          지금까지 함께 뛰어온<br/> 던전의 탐험, 파티의 우정<br/>레이드의 마지막에 여러분을 초대합니다
          <div style = {{marginBottom:"10px", marginTop : "20px"}}>
            <b>아버지 · 어머니</b> 의 장남 <span style = {{fontFamily:"MaruBuriBold"}}>신랑</span><br/>
          </div>
          <div style = {{marginBottom:"10px", marginTop : "10px"}}>
            <b>아버지 · 어머니</b> 의 차녀 <span style = {{fontFamily:"MaruBuriBold"}}>신부</span>
          </div>
        </div>
        <div style={{ border: debug}}>
          달력
        </div>
        <div style={{ border: debug}}>
          이미지 갤러리
        </div>
        <div style={{ border: debug}}>
          결혼식 장소
        </div>
        <div style={{ border: debug}}>
          신랑신부 계좌 정보
        </div>
        <div style={{ border: debug}}>
          카카오톡 공유하기 / 모청 주소 복사하기
        </div>
      </div>
    </>
  )
}

export default App

 

 

그러면 이제 아래처럼 어느정도 모바일 청첩장의 모습을 갖추어 갑니다!

 

 

글씨체는 못본 걸로 치면 되겠습니다🙄

 

# 2. fade-in 효과 넣기

fade-in 효과는 아래를 보면 쉽게 이해할 수 있습니다

https://youtu.be/0ibOfpr2g5k?si=wnxCfbiK5oj0jL45

 

 

보는것처럼 스르륵 올라온다(표현이 개떡같지만, 뭔지 아시겠죠?)

 

이제 모바일청첩장이 켰을 때 모든 Components가 위와같은 효과와 함께 표시되게 만들어 보려고 합니다.

 

먼저 fade-in을 적용하기 위해서 className이 fade-in일 경우에 대한 css를 준비합니다.

 

App.css

#root {
  margin: 0 auto;
  text-align: center;
  border-style : solid;
}

.main-frame {
  display: flex;
  flex-direction: column;
  color : black;
  background-color: rgb(251, 251, 251);
  font-family: MaruBuriLight;
  width: 100%;
  max-width: 390px;
}

@media (max-width: 1400px) {
  .main-frame {
    width: 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1.5s ease-in-out;
}

 

@keyframe같은 경우는 뒤에 나오는 fadeIn이라는 변수가

 

CSS의 애니메이션을 정의하는 규칙이라고 알려주는 역할을 합니다.

 

그래서 fade-in 이라는 class는 fadeIn에서 정의된 from, to 규칙을 가지고

 

이 규칙이 1.5초에 걸쳐서 효과를 내구며, 뒤에있는 `ease-in-out`같은 경우는

 

이런 fade-in 효과가 어떤 타이밍으로 보여질지를 정의해줍니다.

(이를 timing-function이라고 하더라구요)

 

그리고 이제 App.jsx의 파일에서 div tag들의 className을 `fade-in`으로 변경해 줍니다.

 

그리고 겸사겸사 welcome문구도 별도의 components로 빼줍니다.

 

App.jsx

import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'


import { useEffect, useRef, useState } from 'react';
import Audiocomp from './Audiocomp'
import Topmsg from './Topmsg';
import Mainphoto from './Mainphoto';
import Invitation from './Invitation';

function App() {
  const debug = process.env.NODE_ENV === 'development'?"solid":"none";

  


  return (
    <>
      <div className='main-frame'>
        <div style={{ border: debug, textAlign: 'right' }}>
          <Audiocomp/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Topmsg/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Mainphoto/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Invitation/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          달력
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          이미지 갤러리
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          결혼식 장소
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          신랑신부 계좌 정보
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          카카오톡 공유하기 / 모청 주소 복사하기
        </div>
      </div>
    </>
  )
}

export default App

 

Invitation.jsx

const Invitation = () => {
    return (
        <>
            <h1>INVITATION</h1>
            소중한 분들을 모십니다.<br/>
            지금까지 함께 뛰어온<br/> 던전의 탐험, 파티의 우정<br/>레이드의 마지막에 여러분을 초대합니다
            <div style = {{marginBottom:"10px", marginTop : "20px"}}>
                <b>아버지 · 어머니</b> 의 장남 <span style = {{fontFamily:"MaruBuriBold"}}>신랑</span><br/>
            </div>
            <div style = {{marginBottom:"10px", marginTop : "10px"}}>
                <b>아버지 · 어머니</b> 의 차녀 <span style = {{fontFamily:"MaruBuriBold"}}>신부</span>
            </div>
        </>
    )
}
export default Invitation

 

https://blog.naver.com/ajtw0812/223737370880

모바일청첩장 직접 만들기 with 코딩 - 5. 웰컴 문구 추가하기, Fade-in 추가하기.

 

이러면 이제 좀더 미려한 효과가 입혀진 모바일청첩장을 확인할 수가 있습니다