index.css

/* 전체 설정 */
/* 이서윤체 폰트 적용을 위한 코드 */
    @font-face {
     font-family: "LeeSeoyun";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff")
        format("woff");
        font-weight: normal;
        ont-style: normal;
    }

body{
    font-family: "LeeSeoyun";
    margin: 0;
    /* 웹사이트 전체에서 이 프로젝트가 가운데로 오도록 */
    display : flex;
    justify-content : center;
    background-image : url("./background.png")
}


/* 사진 넣는 곳 스타일 */
.container {
    /* 390이 핸드폰너비랑 비슷함 */
    width : 390px;
    background-color: #ff9d73;
    /* body 태그 만큼을 높이로 가져간다는 뜻 */
    height: 100%;
}

.09o88kkkkkkkkkkkkkkkkkkkkkkkkkk k kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjiujkphotos {
    margin-top: 30px;
}

.photo-frame {
    background-color: white;
    margin: 15px 20px;
    height: 200px;
    background-size: cover;
    /* 요소를 자기 자신의 원래 위치를 기준으로 배치 relative */
    position: relative;
    cursor: pointer;
}

    /* 사진 삽입 */
        #image1 {
            background-image : url('./hyeyoung/img1.jpg');
            clip-path:calc(100px 100px 100px 100px);
        }

        #image2 {
            background-image : url('./hyeyoung/img2.jpg');
        }

        #image3 {
                background-image : url('./hyeyoung/img3.jpg');
        }

        /* #image4 {
                background-image : url('./hedgehog/img4.jpg');
        } */

    /* 비디오 삽입 */
    .video{
        width:100%;
        height:100%;
    }

    /* 사진에 글씨 꾸미기 */
    .photo-description {
        color:white;
        background-color:black;

        /* 가로 너비는 내부 콘텐츠에 딱 맞게 */
        width: fit-content;
        padding: 0 20px;
        margin-bottom: 10px;
        border-radius: 10px;
        text-align:center;
        /* absolute 자신의 가장 가까운 부모 요소를 기준으로 배치 */
        position: absolute;
        bottom: 0;

        /* 가운데정렬 */
        transform: translate(-50%);
        left: 50%;

        /* 처음에 설명이 안보이게 하기 위한 설정 */
        opacity: 0;

    }

    /* 동적 효과 삽입 */
    .showText{
        opacity: 1;
    }

    .hideText{
        opacity: 0;
        transition: opacity 0.5s linear;
    }
/* footer에 대한 스타일 */
.footer {
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.f-title{
    color: white;
    font-size:25px;
    font-weight: 900;
}

.f-date {
    color: white;
    font-size:15px;
    font-weight: 500;
}