<script src="https://kit.fontawesome.com/bc43dde373.js" crossorigin="anonymous"></script>

<!--                5. 스토리카드 중단 캐러셀 div -->
                <div class="storycards_middle_carousel">
                    <!--                6. 스토리카드 캐러셀 이미지 div -->
                    <div class="storycards_middle_carousel_image">
                        <!--                7. 스토리카드 중단 이미지 넘기기 아이콘 div -->
                        <div class="storycards_middle_next">
                            <i class="fa-solid fa-circle-chevron-right btn_next"></i>
                        </div>
                        <!--                7. 스토리카드 중단 이미지 되돌리기 아이콘 div -->
                        <div class="storycards_middle_prev">
                            <i class="fa-solid fa-circle-chevron-left btn_prev"></i>
                        </div>
                        <!--                7. 스토리카드 중단 태그 유저 아이콘 div -->
                        <div class="storycards_middle_taguser">
                            <!--                        8. 유저 아이콘 i -->
                            <i class="fa-solid fa-circle-user s28"></i>
                        </div>
                        <!--                7. 스토리카드 중단 음소거 아이콘 div -->
                        <div class="storycards_middle_muteicon">
                            <!--                        8. 음소거 아이콘 i -->
                            <i class="fa-solid fa-circle-xmark s28"></i>
                        </div>
                    </div>
                </div>
/* 스토리카드 미들 캐러셀 div */
.storycards_middle_carousel {
    width: 614px;
    height: 767.5px;
}

.storycards_middle_carousel_image {

    width: 614px;
    height: 767.5px;
    background-image: url("https://i.ytimg.com/vi/jXfglu23oOs/maxresdefault.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
}

/* 스토리카드 미들 넘기기 버튼 div */
.storycards_middle_next {
    width: 46px;
    height: 62px;
    padding: 16px 8px;
    /* 하위 아이템을 수평, 수직 가운데 정렬하는 코드 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*    강제 위치조정 */
    position: absolute;
    top: 335px;
    right: 0;
    color: #dbdbdb;
}

/* 스토리카드 미들 되돌리기 버튼 div */
.storycards_middle_prev {
    width: 46px;
    height: 62px;
    padding: 16px 8px;
    /* 하위 아이템을 수평, 수직 가운데 정렬하는 코드 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*    강제 위치조정 */
    position: absolute;
    top: 335px;
    left: 0;
    color: #dbdbdb;
}

/* 스토리카드 넘기기, 되돌리기 아이콘 공통 속성 */
.btn_next, .btn_prev {
    font-size: 30px;
}

/* 스토리카드 뮤트 아이콘 div */
.storycards_middle_muteicon {
    width: 44px;
    height: 44px;
    margin: 0 16px 16px 0;
    /* 하위 아이템을 수평, 수직 가운데 정렬하는 코드 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
}

/* 스토리카드 태그 유저 아이콘 div */
.storycards_middle_taguser {
    width: 44px;
    height: 44px;
    margin: 0 0 16px 16px;
    /* 하위 아이템을 수평, 수직 가운데 정렬하는 코드 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* 뮤트아이콘, 태그유저 크기 */
.s28 {
    font-size: 28px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.