해당 표를 div 으로 css 짜주실수 있나요?
본문
위에 나온 표시 처럼
왼쪽에는 이미지, 오른쪽에는 두줄의 Text,
Table 말고 div 으로 만들어서 반응형까지 되게 짜주실수 있을까요?
답변 3
<style>
body {
width:700px;
margin: 0 auto;
padding-top: 100px;
}
.board-wrap {
display: flex;
flex-wrap: wrap;
gap:20px;
}
.new {
display: inline-block;
width: 20px;
height: 20px;
margin-right:5px;
background: #ff0000;
color:#fff;
text-align: center;
}
.thumbnail-box {
width:200px;
height: 100px;
background: #eee;
text-align: center;
}
.thumbnail-box p {
margin-top: 40px;
}
.text-box-header {
border-bottom:solid 1px #ddd;
padding-bottom: 10px;
margin-bottom: 10px;
}
.member {
display: inline-block;
width: 20px;
height: 20px;
background: #ff0000;
color:#fff;
text-align: center;
}
.line {
width:1px;
height: 15px;
display: inline-block;
background: #ddd;
margin: 0 5px;
}
.text-box-body {
display: flex;
flex-wrap: wrap;
border-bottom:solid 1px #ddd;
padding-bottom: 10px;
}
.text-box {
align-self: center;
}
@media (max-width:768px) {
body{
width:100%;
margin :0 auto;
}
.thumbnail-box {
width:100px;
}
span {
font-size:13px;
}
}
</style>
<body>
<div class="board-wrap">
<div class="board-wrap__ thumbnail-box">
<p>이미지입니다.</p>
</div>
<div class="board-wrap__ text-box">
<div class="text-box__ text-box-header">
<span class="text-box-header__ new">N</span>
<strong class="text-box-header__ title">공지사항 테스트입니다.</strong>
</div>
<div class="text-box__ text-box-body">
<span class="text-box-body__ member">M</span>
<span class="text-box-body__ line"></span>
<span class="text-box-body__ category">공지</span>
<span class="text-box-body__ line"></span>
<span class="text-box-body__ comment">0 Comments</span>
<span class="text-box-body__ line"></span>
<span class="text-box-body__ hits">1 hits</span>
<span class="text-box-body__ line"></span>
<span class="text-box-body__ date">60분 전</span>
</div>
</div>
</div>
남는시간에 해봤는데, 이런 코드는 금방 짜시지 않으신가..
혹시 저보다 더 쉽게 하실수 있는 분이 있을까 해서 질문해 보았습니다. 테이블로 만들어도 되는데,, div으로 더 쉽게 할수 있을까 하는,...
암튼 신경써주셔서 감사합니다. 참고할께요.
여긴 질문과 답변하는곳입니다.
일시키지 마세요 ㅋㅋㅋㅋㅋㅋ
답변을 작성하시기 전에 로그인 해주세요.
