<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.