[1일 1코딩][HTML-CSS] 공지사항 리스트

 

 

마켓컬리 UI 본따와서 공지사항 만들기

선택자 사용

.main .infoContainer

tbody td:nth-last-child(1)

 

html

 <div class="main">
            <div class="infoContainer">
                <div class="titleArea">
                    <h3 style="font-size: 22px; font-weight: 500;" >공지사항</h3>
                    <span style="font-size: 13px; color:rgb(135, 133, 133);" >
                        TREND_EATER의 새로운 소식과 유용한 정보를 한곳에서 확인하세요
                    </span>
                </div>
                <!-- 테이블로 게시판 만들기!! -->
                <div>
                    <table>
                        <thead>
                           <tr>
                                <th>번호</th>
                                <th>제목</th>
                                <th>작성자</th>
                                <th>작성일</th>
                                <th>조회</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td width="50" nowrap="" align="center">1441 </td>        
                                <td style="padding-left:10px; text-align:left; color:#999">
                                    <a href="view.php?id=notice&amp;no=1591"><b>[마켓컬리] KURLY BIRTH WEEK 럭키기프트` 이벤트 당첨 안내</b></a><b></b></td>
                                <td width="100" nowrap="" align="center"> MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-05-23</td>
                                <td width="30" nowrap="" align="center" class="eng2">7629</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">1443 </td>
                                    <td style="padding-left:10px; text-align:left; color:#999">
                                        <a href="view.php?id=notice&amp;no=64"><b>마켓컬리 배송 안내</b></a><b></b></td>
                                    <td width="100" nowrap="" align="center">MarketKurly </td>
                                    <td width="100" nowrap="" align="center" class="eng2">2016-01-08</td>
                                    <td width="30" nowrap="" align="center" class="eng2">3172001</td>
                            </tr>
                            

                            <tr>
                                <td width="50" nowrap="" align="center">1442 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                    <a href="view.php?id=notice&amp;no=931"><b>[마켓컬리] 포장재 회수 서비스 안내</b></a><b></b></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2021-06-18</td>
                                <td width="30" nowrap="" align="center" class="eng2">49299</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">1441 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                    <a href="view.php?id=notice&amp;no=1641">[가격인상공지] [옥소] 굿그립 3종 핸드 스파이럴라이저 외 38건 (2022 6. 16 ~)</a></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-06-10</td>
                                <td width="30" nowrap="" align="center" class="eng2">46</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">1440 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                    <a href="view.php?id=notice&amp;no=1640">[가격인상공지] [연세우유 x 마켓컬리] 전용목장우유 900mL (2022 6. 18 ~)</a></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-06-10</td>
                                <td width="30" nowrap="" align="center" class="eng2">53</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">  1439 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                  <a href="view.php?id=notice&amp;no=1639">[가격인상공지] [제스파] 듀얼맥스태핑 발안마기 ZP1063 (2022 6. 15 ~)</a></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-06-10</td>
                                <td width="30" nowrap="" align="center" class="eng2">33</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">  1439 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                  <a href="view.php?id=notice&amp;no=1639">[가격인상공지] [제스파] 듀얼맥스태핑 발안마기 ZP1063 (2022 6. 15 ~)</a></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-06-10</td>
                                <td width="30" nowrap="" align="center" class="eng2">33</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">  1439 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                  <a href="view.php?id=notice&amp;no=1639">[가격인상공지] [제스파] 듀얼맥스태핑 발안마기 ZP1063 (2022 6. 15 ~)</a></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-06-10</td>
                                <td width="30" nowrap="" align="center" class="eng2">33</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">  1439 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                  <a href="view.php?id=notice&amp;no=1639">[가격인상공지] [제스파] 듀얼맥스태핑 발안마기 ZP1063 (2022 6. 15 ~)</a></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-06-10</td>
                                <td width="30" nowrap="" align="center" class="eng2">33</td>
                            </tr>
                            <tr>
                                <td width="50" nowrap="" align="center">  1439 </td>
                                <td style="padding-left:10px; text-align:left; color:#999">
                                  <a href="view.php?id=notice&amp;no=1639">[가격인상공지] [제스파] 듀얼맥스태핑 발안마기 ZP1063 (2022 6. 15 ~)</a></td>
                                <td width="100" nowrap="" align="center">MarketKurly </td>
                                <td width="100" nowrap="" align="center" class="eng2">2022-06-10</td>
                                <td width="30" nowrap="" align="center" class="eng2">33</td>
                            </tr>

                        </tbody>



                    </table>
                </div>

 

 

CSS

html, body {
    box-sizing: border-box;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.main {
    width: 100%;
    display: flex;
    justify-content: center;
    font-family:'Noto Sans KR', sans-serif;
}

.main .infoContainer {
    flex-basis: 80%;
    height: 800px;
    background-color: white;
}

.titleArea {
    display: flex;
    /* justify-content: center; */
    gap: 3%; 
    align-items: center;
    padding: 2% 4%;
}



thead tr{
    width: 100%;
    height: 2rem;
        min-height: 20px;
        max-height: 50px;
    border-top: 2px solid rgb(254, 143, 143)  ;
    border-bottom: 2px solid #FE8F8F  ;
}
thead th{
    padding: 2% 1%;
    vertical-align: middle;
    text-align: center;
    font-size: small;
    font-weight: none;
}
tbody > tr{
    height: 2rem;
    /* border-top: 1px solid lightgray; */
    border-bottom: 1px solid lightgray;
    align-content: center;
    vertical-align: middle;
}
tbody > tr > td{
    height: 2rem;
    font-size: small;
    font-family: noto sans;
    align-content: center;
    vertical-align: middle;
    letter-spacing: 0px;
}
tbody td:nth-last-child(1){
    color: gray;
} 
tbody td:nth-last-child(2){
    color: gray;
} 
/* 뒤에서부터 4번째가 tr태그면 적용  // 태그 우선 */