모바일청첩장 직접 만들기 with 코딩 - 4. 신부신랑이름, 어디서결혼할지, 대표사진 구현하기

안녕하세요. Teus입니다.

지난번까지 BGM을 깔아놨죠?

 

이제 BGM과 함께 처음 청첩장을 보시는분들이 맞이할 내용을 작성합니다.

 

# 1. 신부/신랑 이름 어디서 언제 결혼

이거는 어려울게 별로 없습니다.

 

일단 기본적으로 틀을 설계하고 들어갑니다.

이러한 형태로 만들려고 합니다.

 

그러기 위해서 일단 신신(신랑님 신부님)은 위아래 마진을 두고 표시하고

 

나머지는 단순하게 <p> tag를 사용해서 마무리 해 줍니다.

 

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'

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 }}>
          <p style = {{marginTop:"20px", marginBottom:"50px", fontSize : "20px", fontFamily : "MaruBuri"}}>
            신랑님 & 신부님
          </p>
          <p>2222년 2월 22일 일요일 22시 22분</p>
          <p>지옥불웨딩홀</p>
        </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 style={{ border: debug}}>
          신랑신부 계좌 정보
        </div>
        <div style={{ border: debug}}>
          카카오톡 공유하기 / 모청 주소 복사하기
        </div>
      </div>
    </>
  )
}

export default App

 

 

 

(폰트같은 경우는 나중에 수정하도록 하겠습니다)

 

# 2. 신랑/신부 대표 사진

신랑신부 사진입니다.

 

사진같은 경우는 그냥 첨부할 수도 있지만

 

저같은 경우 위아래에 화이트 그라데이션을 줄 예정입니다.

 

 

이떼 CSS를 이용할건데

<div> tag를 이용하고, 이 div tag가 absolute position을 이용해서 div tag의 위, 아래에 위치시킵니다.

 

그렇게되면 사진 위에 div tag가 올라가고

 

이 div tag가 그라데이션을 주는 방식입니다.

 

그 코드를 보면 아래와 같습니다

 

App.jsx

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

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

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 }}>
          <p style = {{marginTop:"20px", marginBottom:"50px", fontSize : "20px", fontFamily : "MaruBuri"}}>
            신랑님 & 신부님
          </p>
          <p>2222년 2월 22일 일요일 22시 22분</p>
          <p>지옥불웨딩홀</p>
        </div>
        <div className="fade-in" style={{ border: debug }}>
          <div style={{ position: 'relative', border: debug }}>
            <img src={mainphoto} width={"100%"} style={{ display: 'block' }} />
            <div style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              height: '30%',
              background: 'linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0) 100%)',
              filter: 'blur(0px)'
            }}></div>
            <div style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              height: '30%',
              background: 'linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0) 100%)',
              filter: 'blur(0px)'
            }}></div>
          </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 style={{ border: debug}}>
          카카오톡 공유하기 / 모청 주소 복사하기
        </div>
      </div>
    </>
  )
}

export default App

 

 

 

그럼 이제 보는거처럼 사진이 첨부되고, 사진 위아래로 그라데이션이 들어간 것을 확인할 수가 있게됩니다!

이제 코드를 깔끄미하게 유지하기 위해서 이번 포스팅에서 만든 부분은 Component로 별도로 빼줍니다.

Mainphoto.jsx

import mainphoto from './assets/mainphoto.jpg'
const Mainphoto = () => {
    return (
        <div style={{ position: 'relative'}}>
            <img src={mainphoto} width={"100%"} style={{ display: 'block' }} />
            <div style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              height: '30%',
              background: 'linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0) 100%)',
              filter: 'blur(0px)'
            }}></div>
            <div style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              height: '30%',
              background: 'linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0) 100%)',
              filter: 'blur(0px)'
            }}></div>
        </div>
    )
}
export default Mainphoto

 

 

Topmsg.jsx

 

const Topmsg = () => {  
    return (
        <>
            <p style = {{marginTop:"20px", marginBottom:"50px", fontSize : "20px", fontFamily : "MaruBuri"}}>
            신랑님 & 신부님
            </p>
            <p>2222년 2월 22일 일요일 22시 22분</p>
            <p>지옥불웨딩홀</p>
        </>
    )
}
export default Topmsg;

 

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}}>
          웰컴 문구
        </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