해당 표를 div 으로 css 짜주실수 있나요?

해당 표를 div 으로 css 짜주실수 있나요?

QA

해당 표를 div 으로 css 짜주실수 있나요?

본문

1539628143_1687316167.6705.png

 

위에 나온 표시 처럼

왼쪽에는 이미지, 오른쪽에는 두줄의 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으로 더 쉽게 할수 있을까 하는,...
암튼 신경써주셔서 감사합니다. 참고할께요.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT