위젯 최근글관련 css 질문드립니다.

위젯 최근글관련 css 질문드립니다.

QA

위젯 최근글관련 css 질문드립니다.

본문

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

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

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

이 질문에 댓글 쓰기 :

답변 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>

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

답변을 작성하시기 전에 로그인 해주세요.
전체 59,452
QA 내용 검색

회원로그인

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