.png)
HTML이란?
HTML(HyperText Matkup Language)
웹사이트를 만드는 가장 기초가 되는 마크업 언어
웹페이지의 내용와 구조를 담당하는 언어
브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달해주는 역할
<head> 안의 태그와 속성들
<title> : 탭 제목 표시
<meta> : 문서에 대한 정보를 넣어주는 역할
<link>
<link rel="stylesheet" href="style.css"><body> 안의 태그와 속성들
<h1> ~ <h6> : 폰트 크기, heading, 콘텐츠의 중요도 차이
<strong> : 강조(bold)
<b> : bold
<em> : 강조(italic)
<i> : italic
<b>는 시각적으로만 강조되는 반면<strong>은 실제로 페이지 내 중요한 부분으로 브라우저에게 알려주는 역할을 하게 되며 이는 웹 접근성에 큰 기여를 한다. 이는<i>와<em>태그에서도 동일하게 적용된다.
<u> : underline
<br> : 줄바꿈, 종료태그X
<hr> : 수평줄
<ol> : ordered list
<ul> : unordered list
<il> : list
<ol>
<li>Head east on Prince St</li>
<li>Turn left on Elizabeth</li>
</ol>
<ul>
<li>Cookies</li>
<li>Milk</li>
</ul><p> : paragragh
<span> : generic container : new line (block level)
<div> : generic container : same line (inline container)
<span>과<div>의 차이
CSS 효과를 적용할 때 span은 inline, div는 block
- Inline elements fit in alongside other elements
- Block level elements take up a whole "block" of space
<img> : image, 종료태그X
# 웹상의 이미지
<img src=“http://url”>
# 같은 폴더 내 이미지
<img src=“untitled.png”>
<img src="cat_image.png" alt="cat">alt 속성 : 이미지를 불러오지 못했을 때 보이는 설명
<video>
<video src="test-video.mp4" controls>
Video not supported
</video>controls : 컨트롤러
시작태그와 종료태그 사이의 내용은 동영상을 불러오지 못했을 때 보이는 설명
<a> : link
# 웹페이지로 이동
<a href="https://www.wikipedia.org/" target="_blank">This Is
A Link To Wikipedia</a>
<a href="https://www.wikipedia.org/"><img src="logo.jpg">
Click this image</a>
# 같은 폴더 내 파일로 이동
<a href="contact.html">Contact</a>
# 같은 페이지 내 이동
<p id="top">This is the top of the page!</p>
<a href="#top">This is A Link To the top of the page</a>target 속성 : 새로운 탭을 생성하여 웹페이지 이동
img 태그를 사이에 넣으면 이미지를 누르면 웹페이지 이동
<table>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Breed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rusty</td>
<td>2</td>
<td>Mutt</td>
</tr>
<tr>
<td>Wyatt</td>
<td>13</td>
<td>Golden</td>
</tr>
</tbody>
</table>종료태그가 없는 태그들
<br><hr><img><input><link><meta>
