위젯 최근글관련 css 질문드립니다. 채택완료
CtrlV
1년 전
조회 2,046
요즘 게시판 최근 글은 날짜를 강조하는 형식이 종종 보이던데
이런건 css로 어떻게 구현을 하나요?
예를들어 아래와 같은 형식이라면
https://imgur.com/yCfIKQi.png" width="300" />
<div class="board-date">
<span class="date-top">29span>
<span class="date-bottom">2024.02span>
div>
<div class="board-content">
게시판 타이틀입니다.
게시판 내용입니다.....
div>
혹 도움을 얻을 수 있을런지요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
다음을 참고 하셔서 원하시는 형식으로 구현하시면 되지 않을까 합니다.
</p>
<p><article id="inc02"></p>
<p><div class="r_cont"></p>
<p> <div class="s_tit"></p>
<p> <span>NEWS</span></p>
<p> <p class="pl">테스트</p>
<p> 테스트 콘텐츠를 제공합니다.</p></p>
<p> </div></p>
<p> <ul class="du_lt2"></p>
<p> </p>
<p> <li></p>
<p> <a href="/bbs/board.php?bo_table=table26&wr_id=14"></p>
<p> <div class="du_date"></p>
<p> <span class="day">11</span></p>
<p> <span class="day_02">2023-07</span></p>
<p> </div> </p>
<p> <div class="txt_wrap"></p>
<p> <p class="du_notice">[샘플경제] 테스트..</p></p>
<p> <span class="du_contents">[샘플경제] 테스트</span></p>
<p> </div></p>
<p> </a></p>
<p> </li></p>
<p> </p>
<p> <li></p>
<p> <a href="/bbs/board.php?bo_table=table26&wr_id=13"></p>
<p> <div class="du_date"></p>
<p> <span class="day">07</span></p>
<p> <span class="day_02">2018-09</span></p>
<p> </div> </p>
<p> <div class="txt_wrap"></p>
<p> <p class="du_notice">테스트 ..</p></p>
<p> <span class="du_contents">테스트..</span></p>
<p> </div></p>
<p> </a></p>
<p> </li></p>
<p> </p>
<p> <li></p>
<p> <a href="/bbs/board.php?bo_table=table26&wr_id=12"></p>
<p> <div class="du_date"></p>
<p> <span class="day">07</span></p>
<p> <span class="day_02">2018-09</span></p>
<p> </div> </p>
<p> <div class="txt_wrap"></p>
<p> <p class="du_notice">건테스트..</p></p>
<p> <span class="du_contents">테스트 ..</span></p>
<p> </div></p>
<p> </a></p>
<p> </li></p>
<p> </p>
<p> </ul></p>
<p> </div></p>
<p></article></p>
<p><style></p>
<p>#inc02 .r_cont{width:50%;padding:115px}</p>
<p>#inc02 .r_cont .s_tit span{font-size:18px;font-weight:700;color:var(--second)}</p>
<p>#inc02 .r_cont .s_tit p{margin:25px 0 60px;font-size:36px;font-weight:700;line-height:1.3;color:var(--primary)}</p>
<p>#inc02 .du_lt2 li+li{margin-top:15px}</p>
<p>#inc02 .du_lt2 a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}</p>
<p>#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}</p>
<p>#inc02 .du_lt2 .du_date .day{display:block;width:100%;font-size:20px;font-weight:900;color:var(--primary)}</p>
<p>#inc02 .du_lt2 .txt_wrap{width:420px}</p>
<p>#inc02 .du_lt2 .du_notice{font-size:17px;font-weight:900}</p>
<p>#inc02 .du_lt2 .du_contents{font-size:15px;color:#777;word-break:keep-all;font-family:'notokr-regular'}</p>
<p></style></p>
<p>대략 이런식으로 코딩을 하시면 될듯 합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
C
CtrlV
1년 전
ㅠㅠ 완전감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인