[Chapter 2-2] HTML5 공부 2일차 (2021-06-29)

[Chapter 2-1]에 이어서 태그 목록들을 적어보려 한다.

 

    <dl> 
        <dt> 올레 1코스</dt>
        <dd> 코스 : 시흥초등학교 옆</dd>
        <dd> 거리 : 14.6km</dd>
        <dd> 난이도 : 중</dd>
    </dl>

    <p> 설명하는 내용 ..<! -- 주석 --></p>

• <dl> 목록을 만든다.
• <dt> 제목 설정
• <dd> 설명을 표시한다.
• <! -- 내용 --> HTML에서 주석을 입력하는 방법이다.

<! -- 열방향으로 만든 표 -->
    <table border="1"> <! -- 2행 3열 -->
        <caption>
            <b>정보</b>
            <p>입력된 정보는 1년동안 보관됩니다.</p>
        </caption>
        <tr>  
            <th> 이름  </th>
            <td > </td>
            <th> 연락처 </th>
            <td></td>
        </tr>
        <tr>
            <th>주소</th>
            <td colspan = "3">   </td>
        </tr>
        <tr>
            <th>자기소개</th>
            <td colspan = "3">   </td>
        </tr>
    </table>

• <table> 표 자리를 생성한다.   border = "n"을 통해 표를 그린다.(n이 커질수록 테두리가 굵어진다)
• <tr> 행 생성   
• <td> 각행마다 열을 생성   <th> 각행마다 열을 생성하고 굵은 글씨로 변경 (colspan, rowspan 을 통해 셀 병합이 가능하다)
• <caption> 표 위쪽 중앙에 입력된 내용이 표시되는 태그

<figure>
        <figcaption>
            <strong> 제목!</strong>
        </figcaption>
    <table border="1"> <! -- 2행 3열 -->
         <tr>  
            <th> 이름  </th>
            <td > </td>
            <th> 연락처 </th>
            <td></td>
        </tr>
        <tr>
            <th>주소</th>
            <td colspan = "3">   </td>
        </tr>
        <tr>
            <th>자기소개</th>
            <td colspan = "3">   </td>
        </tr>
    </table>
    </figure>

• <figcaption> 표 왼쪽 위에 입력된 내용이 표시되는 태그 <figure>태그로 표를 감싼다.

 

<! -- 행방향으로 만든 표 -->
    <table>
    <thead>
        <tr>
        <th> 이름</th>
        <td> </td>
        <th> 연락처</th>
        <td> </td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <th>주소</th>
        <td colspan = "3"></td>
    </tr>
    <tr>
        <th>자기소개</th>
        <td colspan = "3"></td>
    </tr>
    </tbody>
</table>

• <thead> 표의 제목 <tbody> 표의 본문 <tfoot> 표의 요약부분

<colgroup>
	<col span="0" style="background-color:red;">
	<col span="1" style="background-color:blue;">
	<col span="3" style="background-color:yellow">
</colgroup>

• 열 단위로 묶어서 스타일을 적용할 때 사용한다.

Chapter 2에서 배운 태그들은 앞으로 HTML코드를 작성할 때마다 기본적으로 쓰이는 태그들이다. 

전부 다 한번에 완벽하게 외울 수는 없지만 자주 쓰면서 손에 익혀야 할 것 같다.

HTML에서 쓰이는 태그들을 공부하면서 평상시 내가 별것 아니라고 생각했던 인터넷 속의 사진, 글, 표 등이 이런 복잡한 식으로 이루어 진다는 것을 느끼게 되었다.