뉴비코더
나는 코딩뉴비
뉴비코더
전체 방문자
오늘
어제
  • 분류 전체보기 (91)
    • 개발입문뉴비 - 국비지원 ( Front End ) (91)
      • html (26)
      • css (58)
      • javascript (6)
      • Library React.js (0)
    • FrontEnd ( Self-study ) (0)
      • html5, CSS3 (0)
      • Vanilla JS (0)
      • Clone Code (0)
    • BackEnd ( self-study ) (0)
      • Library Node.js (0)
      • Python (0)
      • Go (0)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • 코딩진화
  • webfont
  • ol
  • 클론코딩
  • js event
  • 웹개발
  • 마크업
  • Transition
  • HTML
  • js 이벤트객체
  • 가상클래스
  • js event object
  • boxmodeling
  • JavaScript
  • Margin
  • 하이퍼링크
  • parseInt
  • js 생성 함수
  • css3
  • UL
  • padding
  • HTML5
  • 웹개발입문
  • Javascript 배열
  • transform
  • boxmodel
  • 프론트엔드
  • 국비지원
  • psuedo-class
  • position

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
뉴비코더

나는 코딩뉴비

[2021/12/21]국비지원 CSS3 3-(2) 과제1 : nhn 일반공고게시판 마크업
개발입문뉴비 - 국비지원 ( Front End )/css

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

2022. 1. 31. 04:43

 

수업 중 과제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; }

저작자표시 비영리 변경금지 (새창열림)
    '개발입문뉴비 - 국비지원 ( Front End )/css' 카테고리의 다른 글
    • [2021/12/21]국비지원 CSS3 3-(4) 과제3 : 영어속담
    • [2021/12/21]국비지원 CSS3 3-(3) 과제2 : 3단 boxmodel
    • [2021/12/21]국비지원 CSS3 3-(1) boxmodel
    • [2021/12/20]국비지원 CSS3 2-(6) border (테두리 선)
    뉴비코더
    뉴비코더
    FrontEnd 지망 - 코딩뉴비를 위한(?), 뉴비에 의한, 뉴비의 블로그 - 코딩뉴비의 코딩 학습 기록 - 첨가물 : 약간의 불평/사족

    티스토리툴바