위젯 최근글관련 css 질문드립니다.
본문
요즘 게시판 최근 글은 날짜를 강조하는 형식이 종종 보이던데
이런건 css로 어떻게 구현을 하나요?
예를들어 아래와 같은 형식이라면
<li class=board>
<div class="board-date">
<span class="date-top">29</span>
<span class="date-bottom">2024.02</span>
</div>
<div class="board-content">
게시판 타이틀입니다.<br/>
게시판 내용입니다.....
</div>
</li>
내용부분은 실제 클래스가 들어가서 살짝 달라지겠지만 대충 이런 틀이던데
혹 도움을 얻을 수 있을런지요?
답변 1
다음을 참고 하셔서 원하시는 형식으로 구현하시면 되지 않을까 합니다.
<article id="inc02">
<div class="r_cont">
<div class="s_tit">
<span>NEWS</span>
<p class="pl">테스트
테스트 콘텐츠를 제공합니다.</p>
</div>
<ul class="du_lt2">
<li>
<a href="/bbs/board.php?bo_table=table26&wr_id=14">
<div class="du_date">
<span class="day">11</span>
<span class="day_02">2023-07</span>
</div>
<div class="txt_wrap">
<p class="du_notice">[샘플경제] 테스트..</p>
<span class="du_contents">[샘플경제] 테스트</span>
</div>
</a>
</li>
<li>
<a href="/bbs/board.php?bo_table=table26&wr_id=13">
<div class="du_date">
<span class="day">07</span>
<span class="day_02">2018-09</span>
</div>
<div class="txt_wrap">
<p class="du_notice">테스트 ..</p>
<span class="du_contents">테스트..</span>
</div>
</a>
</li>
<li>
<a href="/bbs/board.php?bo_table=table26&wr_id=12">
<div class="du_date">
<span class="day">07</span>
<span class="day_02">2018-09</span>
</div>
<div class="txt_wrap">
<p class="du_notice">건테스트..</p>
<span class="du_contents">테스트 ..</span>
</div>
</a>
</li>
</ul>
</div>
</article>
<style>
#inc02 .r_cont{width:50%;padding:115px}
#inc02 .r_cont .s_tit span{font-size:18px;font-weight:700;color:var(--second)}
#inc02 .r_cont .s_tit p{margin:25px 0 60px;font-size:36px;font-weight:700;line-height:1.3;color:var(--primary)}
#inc02 .du_lt2 li+li{margin-top:15px}
#inc02 .du_lt2 a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
#inc02 .du_lt2 .du_date{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;width:90px;height:90px;border-radius:5px;font-size:13px;font-weight:700;color:#999;text-align:center;background:#f2f2f2;transition:all .3s}
#inc02 .du_lt2 .du_date .day{display:block;width:100%;font-size:20px;font-weight:900;color:var(--primary)}
#inc02 .du_lt2 .txt_wrap{width:420px}
#inc02 .du_lt2 .du_notice{font-size:17px;font-weight:900}
#inc02 .du_lt2 .du_contents{font-size:15px;color:#777;word-break:keep-all;font-family:'notokr-regular'}
</style>
대략 이런식으로 코딩을 하시면 될듯 합니다.
ㅠㅠ 완전감사합니다.
답변을 작성하시기 전에 로그인 해주세요.