Codecademy front-end engineer course
DAY8
- Build own your cheat sheet
예제를 보고 나는 HTML의 태그 종류에 대해서 cheat sheet page를 만들어보았다.
-HTML-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cheat Sheet</title>
<link rel="stylesheet" href="./resources/css/styles.css">
</head>
<body>
<div class="sansserif">
<h1>HTML tags</h1>
<h2>HTML elements</h2>
<!-- 티스토리가 인식을 이상하게 해 주석 처리 함.
<table>
<thead>
<tr>
<th>Tag</th>
<th>Tag Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code"><h1>~<h6></span></td>
<td>Headings</td>
<td>represent headlines of contents</td>
</tr>
<tr>
<td><span class="code"><div></span></td>
<td>Division</td>
<td>don't appear on the web, but it can separate the code block</td>
</tr>
<tr>
<td><span class="code"><p></span></td>
<td>Paragraph</td>
<td>contain a block of plain text.</td>
</tr>
<tr>
<td><span class="code"><img></span></td>
<td>Image</td>
<td>deal with image files</td>
</tr>
<tr>
<td><span class="code"><video></span></td>
<td>Video</td>
<td>contain video files</td>
</tr>
</tbody>
</table>
<h2>Semantic HTML</h2>
<img src="./resources/images/css.png" alt="">
<table>
<thead>
<tr>
<th>Tag</th>
<th>Tag Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code"><Header>&<Nav></span></td>
<td>Header tag, Navigation tag</td>
<td>used for menu block</td>
</tr>
<tr>
<td><span class="code"><Section></span></td>
<td>Section tag</td>
<td>defines elements in a document, such as chapters, headings</td>
</tr>
<tr>
<td><span class="code"><article></span></td>
<td>Article tag</td>
<td>holds content that makes sense on its own.</td>
</tr>
</tbody>
</table>
-->
</div>
</body>
</html>-CSS-
h1,h2{
text-align: center;
}
table,td{
border: 1px solid cadetblue;
}
table{
margin-left: auto;
margin-right: auto;
}
h2{
color: cornflowerblue;
}
th{
background-color: darkcyan;
color: white;
}
.code{
background-color:wheat;
}
.sansserif {
font-family: Verdana, Arial, Helvetica, sans-serif;
}반응형
'Web' 카테고리의 다른 글
| [CSS] 11)박스 모델 변경 (#content-box #border-box) (0) | 2021.01.26 |
|---|---|
| [CSS] 10) 박스모델 총정리 (#border #margin) (0) | 2021.01.25 |
| [CSS] 8) 웹 페이지 폰트 설정, 연결하는 법 (#typography #font-family) (0) | 2021.01.24 |
| [CSS] 7) 색 표현법, 색 넣기 (#HSLA # RGB) (0) | 2021.01.19 |
| [Front-end] 6) Github로 웹페이지 만들기/Semantic CSS (0) | 2021.01.19 |
