skqhdjk2 님 Q&A에 올렸던 문제에 혹 도움이 될련지 모르겠습니다
Q&A 채택되면 더 이상 답글을 달 수가 없나 보네요 ^^;;
몰랐습니다
예전에 달았던거 같기도 하... 기억이 잘 안납니다
답글에 대한 답글은 달수가 있는데 원본에 대한 추가 답글은 달수가 없는거 같던데
여하튼 CSS관련 웹퍼블리싱 올리셨던데
@skqhdjk2 님이 볼지 안볼지는 모르겠지만 심심해서 한번 손 대봤습니다
물론 내부에 들어간 DOM 코드는 원본 참고를 안해서 DIV명칭이 틀립니다 참고만 하시면 됩니다
질문 주소 : https://sir.kr/questions/563529?vpage=1#answer_563533
<style>
/* 패널 */
.pannel_div{
display:flex;
justify-content:center;
align-items:center;
width:1500px;
height:300px;
background:#bfddfa;
}
/* 이동 버튼 */
.move_bt_left,
.move_bt_right{
display:flex;
justify-content:center;
align-items:center;
width:100px;
height:250px;
font-size:30px;
font-family:cursive;
font-weight:bold;
color:#2d2c32;
}
/* 콘텐츠 영역 */
.content{
display:flex;
justify-content:center;
align-items:center;
width:1000px;
height:250px;
}
/* 카드 박스 */
.roundBox{
position:relative;
top:-15px;
margin:0 10px;
min-width:150px;
width:150px;
height:125px;
border-top-left-radius:25px;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
background:#fff;
}
.roundBox:before{
position:absolute;
content:'';
left:0;
bottom:-40px;
width:110px;
height:50px;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
background:#fff;
}
.roundBox:after{
position:absolute;
content:'';
right:20px;
bottom:-20px;
width:32px;
height:32px;
background:#fff;
}
/* 번호 원 */
.bottomRoundDiv{
position:absolute;
right:-7px;
bottom:-47px;
z-index:5;
display:flex;
justify-content:center;
align-items:center;
width:38px;
height:38px;
border-radius:50%;
border:5px solid #bfddfa;
background:#fff;
font-size:22px;
font-family:cursive;
font-weight:bold;
color:#2d2c32;
}
/* 중앙 아이콘 */
.centerDiv{
position:relative;
z-index:1;
top:40px;
left:33px;
display:flex;
justify-content:center;
align-items:center;
width:80px;
height:80px;
border-radius:50%;
background:#f2f2f2;
font-size:35px;
}
/* 하단 텍스트 */
.bottomDiv{
position:relative;
z-index:1;
top:55px;
left:10px;
width:87px;
height:20px;
border-radius:20px;
color:#fff;
font-size:13px;
text-align:center;
}
.chk1{ background:#0066cc;}
.chk2{ background:#dfdfdf;}
.chk3{ background:#ffae88;}
.chk4{ background:#0066cc;}
.chk5{ background:#4da6ff;}
</style>
<div class="pannel_div">
<div class="move_bt_left">
<
</div>
<div class="content">
<div class="roundBox">
<div class="centerDiv">
🧑🤝🧑
</div>
<div class="bottomDiv chk1">
모집중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🧑
</div>
<div class="bottomDiv chk2">
대기중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🛠️
</div>
<div class="bottomDiv chk3">
진행중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🧑🤝🧑
</div>
<div class="bottomDiv chk4">
진행중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🚀
</div>
<div class="bottomDiv chk5">
진행중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
</div>
<div class="move_bt_right">
>
</div>
</div>

몰랐습니다
예전에 달았던거 같기도 하... 기억이 잘 안납니다
답글에 대한 답글은 달수가 있는데 원본에 대한 추가 답글은 달수가 없는거 같던데
여하튼 CSS관련 웹퍼블리싱 올리셨던데
@skqhdjk2 님이 볼지 안볼지는 모르겠지만 심심해서 한번 손 대봤습니다
물론 내부에 들어간 DOM 코드는 원본 참고를 안해서 DIV명칭이 틀립니다 참고만 하시면 됩니다
질문 주소 : https://sir.kr/questions/563529?vpage=1#answer_563533
<style>
/* 패널 */
.pannel_div{
display:flex;
justify-content:center;
align-items:center;
width:1500px;
height:300px;
background:#bfddfa;
}
/* 이동 버튼 */
.move_bt_left,
.move_bt_right{
display:flex;
justify-content:center;
align-items:center;
width:100px;
height:250px;
font-size:30px;
font-family:cursive;
font-weight:bold;
color:#2d2c32;
}
/* 콘텐츠 영역 */
.content{
display:flex;
justify-content:center;
align-items:center;
width:1000px;
height:250px;
}
/* 카드 박스 */
.roundBox{
position:relative;
top:-15px;
margin:0 10px;
min-width:150px;
width:150px;
height:125px;
border-top-left-radius:25px;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
background:#fff;
}
.roundBox:before{
position:absolute;
content:'';
left:0;
bottom:-40px;
width:110px;
height:50px;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
background:#fff;
}
.roundBox:after{
position:absolute;
content:'';
right:20px;
bottom:-20px;
width:32px;
height:32px;
background:#fff;
}
/* 번호 원 */
.bottomRoundDiv{
position:absolute;
right:-7px;
bottom:-47px;
z-index:5;
display:flex;
justify-content:center;
align-items:center;
width:38px;
height:38px;
border-radius:50%;
border:5px solid #bfddfa;
background:#fff;
font-size:22px;
font-family:cursive;
font-weight:bold;
color:#2d2c32;
}
/* 중앙 아이콘 */
.centerDiv{
position:relative;
z-index:1;
top:40px;
left:33px;
display:flex;
justify-content:center;
align-items:center;
width:80px;
height:80px;
border-radius:50%;
background:#f2f2f2;
font-size:35px;
}
/* 하단 텍스트 */
.bottomDiv{
position:relative;
z-index:1;
top:55px;
left:10px;
width:87px;
height:20px;
border-radius:20px;
color:#fff;
font-size:13px;
text-align:center;
}
.chk1{ background:#0066cc;}
.chk2{ background:#dfdfdf;}
.chk3{ background:#ffae88;}
.chk4{ background:#0066cc;}
.chk5{ background:#4da6ff;}
</style>
<div class="pannel_div">
<div class="move_bt_left">
<
</div>
<div class="content">
<div class="roundBox">
<div class="centerDiv">
🧑🤝🧑
</div>
<div class="bottomDiv chk1">
모집중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🧑
</div>
<div class="bottomDiv chk2">
대기중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🛠️
</div>
<div class="bottomDiv chk3">
진행중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🧑🤝🧑
</div>
<div class="bottomDiv chk4">
진행중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
<div class="roundBox">
<div class="centerDiv">
🚀
</div>
<div class="bottomDiv chk5">
진행중
</div>
<div class="bottomRoundDiv">
>
</div>
</div>
</div>
<div class="move_bt_right">
>
</div>
</div>

총 2명이 반응했습니다
|
댓글을 작성하시려면 로그인이 필요합니다.