TIL 03 | HTML Tag, Table

지난 시간에 배운 HTML의 기본 개념과 문법 등에 더해 Codecademy HTML 강의를 통해 추가로 배운 내용에 대해 정리해보자.

HTML Element

Image Tag

<img src="image-location.jpg" />

<img> Tag를 사용할때는 closing tag가 필요없으나 마지막에 /> 로 마무리해줘야 한다. 또한 src attribute는 URL 링크나 저장되어 있는 이미지여야 한다.

• Alt Attribute

<img src="#" alt="A field of yellow sunflowers" /> 

이미지의 로딩이 실패했을 경우 마우스를 오버하여 이미지에 대한 설명을 볼 수 있다. 또한 검색엔진에서 중요한 역할을 하는데, 이는 실제 이미지를 보고 검색하는 것이 아닌 설명을 보고 찾아내기 때문이다.

Video Tag

<video src="myVideo.mp4" width="320" height="240" controls>
  Video not supported
</video>

Image Tag와 다르게 closing tag가 필요하다. Controls 속성은 기본 비디오 기능인 pause, play와 skip을 포함하고 있다.
Video not supported는 비디오가 로드되지 않을 경우에만 보인다.

Anchor Tag

<a href="link" target="_blank"><img src="" alt="dd"/></a>

Anchor Tag는 내, 외부 웹 페이지나 같은 페이지의 콘텐트를 링크할 때 사용한다.

• target="_blank"는 빈 페이지에, target="_self"는 현재 페이지에서 링크된 문서를 오픈한다.
• <a>와 </a>사이에 Text 뿐 아니라 <img>를 이용해 이미지를 링크할 수 있다.

Link to Same Page

<p id="top">This is the top of the page!</p>
<h1 id="bottom">This is the bottom! </h1>

<ol>
  <li><a href="#top">Top</a></li>
  <li><a href="#bottom">Bottom</a></li>
</ol>

Tag와 element에 id를 추가하여 id 속성을 이용하여 같은 페이지의 Section으로 이동할 수 있다.

주석(Comment)

<!-- This is a comment that the browser will not display. -->

HTML Table

Table은 표를 만들때 유용한 Tag이다.

<table border="1">
  <tr>
    <th></th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>
  <tr>
    <th scope="row">Temperature</th>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

Table Attribute

• border="1" 숫자가 높을수록 테두리가 두꺼워진다.

• bordercolor="blue" default값은 검정색입니다.

• width=50px width=100% 픽셀, 비율 단위로 크기를 정할 수 있다.

• align = "center" Value의 위치를 정렬한다.

• bgcolor="blue" 태그의 배경색을 지정한다.

• <td colspan="2"> 셀을 병합한다.

<tr>
  <td colspan="2">Out of Town</td>
  <td>Back in Town</td>
</tr>

<tr>
  <td rowspan="2">Out of Town</td>
  <td>Back in Town</td>
</tr>