선택자 실습_CSS
2021. 12. 15. 11:28ㆍksmart_html_css_js/HTML실습
728x90
아래 2개의 표가 있다.
디자인 요소 적용 항목을 보고 표에 style 적용하라.
디자인 요소:
1 ) 모든 표의 상단은 폰트크기 16px
2 ) 모든 표의 등록일자의 폰트크기 12px
3 ) 공지사항의 타이틀 색상은 빨강
4 ) 자유게시판의 타이틀은 파랑
답_html
<body>
<article id="notice">
<h2>공지사항</h2>
<table border="1">
<thead>
<tr>
<th>제목</th>
<th>등록일자</th>
</tr>
</thead>
<tbody>
<tr>
<td>공지사항입니다.</td>
<td class="date">2021-11-26</td>
</tr>
<tr>
<td>공지사항입니다.</td>
<td class="date">2021-11-26</td>
</tr>
<tr>
<td>공지사항입니다.</td>
<td class="date">2021-11-26</td>
</tr>
</tbody>
</table>
</article>
<article id="free">
<h2>자유게시판</h2>
<table border="1">
<thead>
<tr>
<th>제목</th>
<th>등록일자</th>
</tr>
</thead>
<tbody>
<tr>
<td>제목입니다.</td>
<td class="date">2021-11-26</td>
</tr>
<tr>
<td>제목입니다.</td>
<td class="date">2021-11-26</td>
</tr>
<tr>
<td>제목입니다.</td>
<td class="date">2021-11-26</td>
</tr>
</tbody>
</table>
</article>
</body>답_stylesheet
<style>
thead{font-size:16px;}
.date{font-size:12px;}
#notice h2{color:red;}
#free h2{color:blue;}
</style>728x90
'ksmart_html_css_js > HTML실습' 카테고리의 다른 글
| CSS 속성 종류 및 float 실습_CSS (0) | 2021.12.15 |
|---|---|
| HTML실습CSS 선택자 및 CSS 속성 종류 실습_CSS (0) | 2021.12.15 |
| 속성 종류 실습_CSS (0) | 2021.12.15 |
| CSS 적용 실습_CSS (0) | 2021.12.14 |
| Form 요소 실습_HTML (0) | 2021.12.14 |