React - html, css album page clone

html과 css만 이용해서 간단한 페이지를 따라서 만들어봤습니다

 

먼저 참고한 사이트는 material ui 사이트의 album page입니다

(링크 : https://mui.com/getting-started/templates/album/)

 

이미지 부분 처리가 잘못되어있는것 같은데 일단 정상이라고 가정하고(?)

 

한번 만들어봤습니다

 

album

import React from 'react'
import { AiFillCamera } from 'react-icons/ai'
import './album.css'

function Album() {
    // example : https://mui.com/getting-started/templates/album/
    return (
        <>
            <header className='header-album'>
                <AiFillCamera size={25} style={{ margin: '0 20px 0 20px' }} />
                Album layout
            </header>
            <div className='div-head-text'>
                <p>
                    Album layout
                </p>
                <p>
                    Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.
                </p>
                <span>
                    <button className='btn-main'>
                        MAIN CALL TO ACTION
                    </button>
                    <button className='btn-main-secondary'>
                        SECONDARY ACTION
                    </button>
                </span>
            </div >

            <div className='div-image-container'>
                {Array.from({ length: 9 }, (_, index) => index).map((e) => (
                    <div key={e} className='div-card'>
                        <img src='https://source.unsplash.com/random' />
                        <div className='div-card-text'>
                            <p>
                                Heading
                            </p>
                            <p>
                                This is a media card. You can use this section to describe the content.
                            </p>
                            <div>
                                <button style={{marginRight: '10px'}}>
                                    VIEW
                                </button>
                                <button>
                                    EDIT
                                </button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            <footer>
                <p>Footer</p>
                <p>Something here to give the footer a purpose</p>
                <p>
                    Copyright &copy;
                    <a href='/'>Your Website</a>
                    2022
                </p>
            </footer>
        </>
    )
}

export default Album

album css

.header-album{
    height: 65px;
    width: 100vw;
    background: #1976D2;
    color: white;
    line-height: 65px;
    font-size: 20px;
    box-shadow: 0 0 2px rgb(0,0,0,0.4)
}

.div-head-text{
    max-width: 720px;
    width: 100%;
    text-align: center;
    margin: 60px auto 20px auto;
}

.div-head-text > p:nth-child(1){
    font-size: 40px;
    font-weight: 400;
}

.div-head-text > p:nth-child(2){
    font-size: 24px;
    margin: 0 10% 0 10%;
    color: grey; 
}

.div-head-text > span:nth-child(3){
    display: block;
    margin-top: 40px;
    font-size: 14px;
}

.btn-main{
    background: #1976D2;
    color: white;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    padding: 6px 12px 6px 12px;
    margin-right: 20px
}

.btn-main:hover{
    background: #1976d2d5
}

.btn-main-secondary{
    background: white;
    color: #1976D2;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    padding: 6px 12px 6px 12px;
    margin-right: 20px
}

.btn-main-secondary:hover{
    background-color: rgba(0, 0, 0, 0.062);
}

.div-image-container{
    max-width: 720px;
    width: 100%;
    text-align: center;
    margin: auto;
}

.div-card{
    display: inline-block;
    width: 240px;
    border-radius: 10px;
    border: 1px solid #e4e4e4;
    margin: 10px;
    box-shadow: 0 1.5px #e4e4e4;
}

.div-card > img{
    height: 180px;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.div-card-text{
    padding: 10px 20px 10px 20px;
    text-align: start;
}

.div-card-text > p:nth-child(1){
    font-size: 24px;
}

.div-card-text > p:nth-child(2){
    font-size: 14px;
}

.div-card-text > div > button{
    background-color: transparent;
    border: none;
    font-size: 12px;
    padding: 2px 6px 2px 6px;
    color: #1976D2;
}

.div-card-text > div > button:hover{
    background-color: #1976d20a;
}

footer{
    margin: 30px 0 30px 0;
    text-align: center;
}

footer > p:nth-child(1){
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

footer > p:nth-child(2), p:nth-child(3){
    color: grey;
    margin: 0;
    font-weight: 300;
}

< Album page clone >

 

간단한(?) UI구성인데도 일부 삽질때문에 한시간 조금 넘게 걸렸던것 같습니다

 

숙련도를 올려서 앞으로는 시간을 조금 더 단축해야될것 같습니다..