시간이 늦어서 오늘은 여기까지만 하고 내일 이어서 공부하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>태그</h1>
<p>태그는 BOX와 ITEM이 있다.</p>
<table>
<tr>
<th>웹사이트의 구조 :</th>
</tr>
<tr>
<td align="center">header</td>
</tr>
<tr>
<td align="center">nav</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>aside</td>
<td>main</td>
<td></td>
<td></td>
<td></td>
<tr>
<td></td>
<td align="light" >section</td>
<td>section</td>
<tr><td></td>
<td>article</td>
<td>article</td>
</tr>
<tr><td></td>
<td>article</td>
<td>article</td>
</tr>
<tr><td></td>
<td></td>
<td>article</td>
</tr>
</tr>
</tr>
<tr>
<td align="center">footer</td>
</tr>
<tr>
<td colspan="4">article이란? : 여러가지 아이템을 그룹화 해서 재사용 가능한 것들이 모여져있는 것</td>
</tr>
<td>이렇게 나눠서 봐야 한다.</td>
</table>
<table border="1" align="center">
<tr></tr>
<tr>
<th colspan="5" align="center">BOX</th>
<td colspan="2">/</td>
<th colspan="6" align="center">ITEM</th>
</tr>
<tr>
<td colspan="2">header</td>
<td>,</td>
<td colspan="2">section</td>
<td colspan="4">/</td>
<td colspan="2">a태그</td>
<td>,</td>
<td colspan="2">video</td>
</tr>
<tr>
<td colspan="2">footer</td>
<td>,</td>
<td colspan="2">article</td>
<td colspan="4">/</td>
<td colspan="2">button</td>
<td>,</td>
<td colspan="2">audio</td>
</tr>
<tr>
<td colspan="2">nav</td>
<td>,</td>
<td colspan="2">div</td>
<td colspan="4">/</td>
<td colspan="2">input</td>
<td>,</td>
<td colspan="2">map</td>
</tr>
<tr>
<td colspan="2">aside</td>
<td>,</td>
<td colspan="2">span</td>
<td colspan="4">/</td>
<td colspan="2">label</td>
<td>,</td>
<td colspan="2">canvas</td>
</tr>
<tr>
<td colspan="2">main</td>
<td>,</td>
<td colspan="2">form</td>
<td colspan="4">/</td>
<td colspan="2">img</td>
<td>,</td>
<td colspan="2">table</td>
</tr>
<tr>
<td colspan="13" align="center">이런게 있다. </td>
</tr>
</table>
<br/>
<br/>
<br/>
<div>
<table align="left" border="1" >
<tr>
<th>몰랐던 것</th>
</tr>
<tr>
<td>div 태그:아무곳에서나 쓰는 것 묶어서 스타일링을 할 때 사용한다.</td>
</tr>
<tr><td align="center">띄움</tdㅁ></tr>
<tr>
<td>nav 태그 : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크의 집합을 정의할 때 사용</td>
<td>
</tr>
<tr><td align="center">띄움</td></tr>
<tr>
<td>nav태그의 괄호'<>(여기)<> 안에 a태그의 href=/thml/intro, /javascript: 등을 여기 모은다. </td>
</tr>
<tr><td align="center">띄움</td></tr>
<tr>
<td>article 태그 : 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의 할 때 사용</td>
<tr>
<td>article에 포함 될 수 있는 내용은 다음과 같다</td>
<tr><td> 포럼 포스트, 블로그 포스트, 보도 기사, 논평 등</td></tr>
</tr>
</tr>
<tr><td align="center">띄움</td></tr>
<tr>
<td>map 태그 : '클라이언트 사이드 이미지맵'을 정의</td>
<tr>
<td>이미지맵(image-map)은 클릭할 수 있는 영역을 가지는 이미지를 의미합니다</td>
</tr>
<tr>
<td>
<img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
<area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
<area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
</map>
</td>
</tr>
<tr><td>이미지를 클릭하면 해당 링크로 이동됨. 아쉽게도 이미지가 없음. </td></tr>
</tr>
<tr><td align="center">띄움</td></tr>
<tr><td></td></tr>
</table>
</div>
</body>
</html>
아직 디자인 적인 부분이 너무나도 부족해서 html과 css를 공부하려고 합니다..
추후에 혼자서 프로젝트를 진행 할 수 있을 정도의 실력을 쌓기 위해서 계속 공부하자!!!
'하루정리' 카테고리의 다른 글
| 2022-10-13 CSS 레이아웃 disply, position (0) | 2022.10.13 |
|---|---|
| 2022.10.11 Html마무리 (0) | 2022.10.11 |
| 2022.10.05 프로젝트를 위한 VSCode 사전 작업 (0) | 2022.10.05 |
| 2022.10.04 JavaScript 연산자, callback, class (0) | 2022.10.05 |
| 2022.09.29 복습 : 변수/object, let/ const (0) | 2022.09.29 |
