SIR
목록으로

위젯 최근글관련 css 질문드립니다. 채택완료

CtrlV
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 2,223
답변 1
목록

요즘 게시판 최근 글은 날짜를 강조하는 형식이 종종 보이던데

이런건 css로 어떻게 구현을 하나요?

예를들어 아래와 같은 형식이라면

yCfIKQi.png 

<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>
내용부분은 실제 클래스가 들어가서 살짝 달라지겠지만 대충 이런 틀이던데

혹 도움을 얻을 수 있을런지요?

#그누보드5

답변 1개

채택된 답변
+20 포인트

다음을 참고 하셔서 원하시는 형식으로 구현하시면 되지 않을까 합니다.

Copy 
<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>

대략 이런식으로 코딩을 하시면 될듯 합니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

ㅠㅠ 완전감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고