[2021/12/21]국비지원 CSS3 3-(2) 과제1 : nhn 일반공고게시판 마크업

수업 중 과제1

코드 들여다보니 header는 안 해도 된다고 해서 제외했었나보다
( 기억에서 소멸됨 )

당시 페이지

작업내용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>nhn - 일반공고<title>
    <style type="text/css">
        body,div,h2,p,table,caption,thead,tr,th,td, p{padding:0;margin: 0;}
        body{font-size:12px;font-family: NanumBarunGothic,"나눔바른고딕",sans-serif;line-height: 200%;}
        #content{width: 1080px;margin:100px auto;color: #666;}
        #content h2{font-size: 30px;margin-bottom:40px;color:#494949;}
        #content caption{text-indent: -9999px;overflow: hidden;}
        #content a{text-decoration: none;color: #666;}
        #content>p{letter-spacing: 15px;text-align: center;padding: 20px 0px 0px;}
        #content>p a.link{color:red;}
        #content>p a:hover{color:red;}
        #content table{width: 100%;border-collapse: collapse;}
        #content th{font-weight: normal;color: #494949; border-top: 2px solid #494949;border-bottom: 2px solid #494949;}
        #content td{color: #666;border-bottom: 1px solid #ccc;}
        #content td a:hover{color: gray;}
        #content .title1{text-align: center;padding: 20px 10px;}
        #content .title2{text-align: left;padding: 20px 170px 20px 55px;}
        #content .title3{text-align: left;padding: 20px -30px 20px 0px;}
    </style>
</head>
<body>
    <div id="content">
        <h2>일반공고</h2>
        <table>
            <caption>일반공고 공지사항</caption>
            <thead >
                <tr>
                    <th scope="col" class="title1">번호</th>
                    <th scope="col" class="title2">제목</th>
                    <th scope="col" class="title3">공시일자</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="title1">31</td>
                    <td class="title2"><a href="#">신주 발행 및 기준일에 관한 공고</a></td>
                    <td class="title3">2021.12.16</td>
                </tr>
                <tr>
                    <td class="title1">30</td>
                    <td class="title2"><a href="#">제8기 결산공고</a></td>
                    <td class="title3">2021.03.23</td>
                </tr>
                <tr>
                    <td class="title1">29</td>
                    <td class="title2"><a href="#">제8기 정기주주총회 소집공고</a></td>
                    <td class="title3">2021.03.08</td>
                </tr>
                <tr>
                    <td class="title1">28</td>
                    <td class="title2"><a href="#">제7기 결산공고</a></td>
                    <td class="title3">2020.03.30</td>
                </tr>
                <tr>
                    <td class="title1">27</td>
                    <td class="title2"><a href="#">제7기 정기주주총회 소집공고</a></td>
                    <td class="title3">2020.03.13</td>
                </tr>
                <tr>
                    <td class="title1">26</td>
                    <td class="title2"><a href="#">전자증권 전환대상 주권 등의 권리자 보호 공고</a></td>
                    <td class="title3">2019.07.22</td>
                </tr>
                <tr>
                    <td class="title1">25</td>
                    <td class="title2"><a href="#">소규모합병 종료보고 공고</a></td>
                    <td class="title3">2019.07.03</td>
                </tr>
                <tr>
                    <td class="title1">24</td>
                    <td class="title2"><a href="#">소규모 합병에 따른 채권자이의 제출 공고</a></td>
                    <td class="title3">2019.05.28</td>
                </tr>
                <tr>
                    <td class="title1">23</td>
                    <td class="title2"><a href="#">소규모합병 공고</a></td>
                    <td class="title3">2019.04.19</td>
                </tr>
                <tr>
                    <td class="title1">22</td>
                    <td class="title2"><a href="#">소규모합병을 위한 기준일 및 주주명부 폐쇄기간 설정 공고</a></td>
                    <td class="title3">2019.04.16</td>
                </tr>
            </tbody>
        </table>
        <p>
            <a href="#" class="link">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
        </p>
    </div>
</body>
</html>

결과물

반성 :

지금 보면 이게 최선이냐 싶은 게 공통속성값은 콤마로 대상 묶어서 표시 가능함;

#content>p a.link, #content>p a:hover { color : red; }

#content .title2, #content .title3 { text-align : left; }

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바