Part 6-2-5. 웹 기초 : HTML #3

 

 

🌐 웹 기초

 

 지난 시간에는 HTML의 기초적인 태그에 이어 개행, 단락 구분, 이미지, 하이퍼링크 등 마찬가지로 기초적인 태그에 대해서 학습하였다. 이번 시간에는 지난시간과 마찬가지로 HTML의 태그들에 대해서 배운다. 

 

---

 

🚂 Tag

 

 이전 시간과 마찬가지로 HTML의 태그를 학습하기 전에 앞서, HTML의 태그를 한눈에 볼 수 있도록 정리한 사이트https://www.w3schools.com/tags/tag_comment.asp 를 통해 태그를 확인하고 이를 실습한다.

 

---

 

리스트, 테이블

 

<!-- 
<ol> <ul> html에서 리스트는 ol과 ul을 사용한다. ol은 ordered list와 unordered list를 뜻한다.
ol의 경우 정렬된 리스트, ul은 정렬되지 않은 리스트를 뜻한다.
ol은 번호로 데이터가 보여지며, ul은 디폴트로 *을 이용해 보여주는 것을 알 수 있다.
 -->
 
 <h1>당신이 가장 좋아하는 언어는?</h1>
<ol>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>

<p>당신이 가장 좋아하는 게임 장르는?</p>
<ul>
  <li>MMO</li>
  <li>FPS</li>
  <li>RTS</li>
</ul>

 

ol과 ul의 실행결과

 

<!-- 
<table> </table> 테이블은 table을 사용하고. tr의 경우 테이블의 Row를 뜻한다. td의 경우 테이블의 데이터를 뜻한다. 
thead는 테이블의 머리, tbody 테이블의 몸, tfoot은 테이블의 발을 뜻한다. 그런데 왜 굳이 이런식으로 영역을 나눠줘야할까?
이는 사실 추가적인 정보를 뜻한다 thead의 경우 제목을 나타나기 위해 사용되고, tbody는 실제로 데이터가 들어가는 영역이 된다.
마지막으로 tfoot은 데이터들의 합과 같이 용도에 따라 사용할 수 있는 것이다.
-->

<style>
table, th, td {
  border: 1px solid black;
}
</style>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

 

 위 HTML 코드에서 <style> </style>의 구분이 나중에 배울 CSS의 영역이다. 직관적으로 테이블과 th, td에 스타일을 입혀서 꾸며준다고 이해하면 된다. 위 코드에서는 1픽셀의 solid 검은색의 선을 그려준다는 의미로 해석할 수 있다.