답변 3개
채택된 답변
+20 포인트
2년 전
</p>
<p><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></p>
<p>
남는시간에 해봤는데, 이런 코드는 금방 짜시지 않으신가..
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
울라프
2년 전
댓글을 작성하려면 로그인이 필요합니다.
sinbi
Expert
2년 전
https://homzzang.com/b/css-254
정렬/배치 관련 CSS 속성 모아놓은 글이니, 참고해 보세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
암튼 신경써주셔서 감사합니다. 참고할께요.