HTML 10일차 공부 (<link> rel, type 속성/ <table>)

chaerlo127 2022. 1. 23. 18:50

1. HTML rel 속성 (<link> tag)

과거 CSS 공부하면서 stylesheet를 공부해봤고, W3School에서 나오는 Favicon 예제에서는 icon을 사용했다.

<!doctype html>
  <head>
    <title>HTML Example</title> 
    <!-- type: 미디어 타입, 꼭 명시해주어야 한다. -->
    <link rel="icon" type="image/x-icon" href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbeJ1V8%2FbtrrmeSZW7U%2FAAAAAAAAAAAAAAAAAAAAAJfqR9oe8erZtymry4cmREt1bZLFah8k7kzly5rK8jar%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3Dg75GZYnC3mQcZLOXxTErUhDcRt0%253D">
  </head>
  <body>
  </body>
</html>

[출처]

http://tcpschool.com/html-tag-attrs/link-type

2. HTML Table Tag

- 테이블 생성

태그	설명
<table>	테이블 tag
<th>	테이블 header
<tr>	테이블 행
<td>	테이블 열

- 테이블 속성

속성명	속성 값	설명
align	left, center, right	테이블 정렬 방법
bdcolor	rgb(x,x,x), #xxxx, 색상 명	테이블 배경색
border	1, 0	테두리 사용할지 안할지
cellingpadding	픽셀	셀 경계 사이의 공간
cellspacing	픽셀	셀과 셀 사이의 공간
frame	void, above, below, hsides, lhs, rhs, vsides, box, border	바깥쪽 테두리 명시
rules	none, groups, rows, cols, all	안쪽 테두리 명시
summary	텍스트	콘텐츠 개요 명시
width	픽셀, %	테이블 너비 명시
border-collapse	seperate: 간격 두기 collapse: 간격 없애기 initial: 기본 값 inherit: 부모 요소의 속성값을 상속	테이블 테두리와 셀 테두리 사이 간격
border-radius	픽셀	둥근 테이블
border-style		테이블 스타일

<!doctype html>
  <head>
    <title>HTML Example</title> 
    <!-- type: 미디어 타입, 꼭 명시해주어야 한다. -->
    <link rel="icon" type="image/x-icon" href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbeJ1V8%2FbtrrmeSZW7U%2FAAAAAAAAAAAAAAAAAAAAAJfqR9oe8erZtymry4cmREt1bZLFah8k7kzly5rK8jar%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3Dg75GZYnC3mQcZLOXxTErUhDcRt0%253D">

    <style>
      th, td{
        border: 1px solid black;
        /* 사이 간격 없애기 */
        border-collapse: collapse;
        border-radius: 10px;
        border-style: dashed;
      }
    </style>
  </head>
  <body>
    <!-- table width -->
    <table style="width: 50%;">
      
      <tr>
        <!-- table column width -->
        <th style="width: 50%;">알파벳</th>
        <th>읽는 소리</th>
      </tr>

      <tr style="height: 80px;"><!-- table row Height -->
        <td>A a</td>
        <td>에이</td>
      </tr>
    </table>
  </body>
</html>

- Vertical Table Headers

<!doctype html>
  <head>
    <title>HTML Example</title> 
    <style>
      th, td{
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <!-- table width -->
    <table>
      
      <tr>
        <th>대학교</th>
        <td>A university</td>
        <td>B university</td>
      </tr>
      <tr>
        <th>학부</th>
        <td>공학부</td>
        <td>공학부</td>
      </tr>
      <tr>
        <th>전공</th>
        <td>전자공학과</td>
        <td>컴퓨터공학과</td>
      </tr>
    </table>
  </body>
</html>

-Header for Multiple Columns

<th> tag의 요소	설명
colspan	header of multiple columns 가 가능

-Table Caption ( <caption> tag )

 <table>
      <caption> 대학교 테이블 </caption>
      <tr>
        <th colspan="3">UNIVERSITY</th>
      </tr>
      <tr>
        <th>대학교</th>
        <td>A university</td>
        <td>B university</td>
      </tr>
      <tr>
        <th>학부</th>
        <td>공학부</td>
        <td>공학부</td>
      </tr>
      <tr>
        <th>전공</th>
        <td>전자공학과</td>
        <td>컴퓨터공학과</td>
      </tr>
    </table>

[출처]

http://www.tcpschool.com/html-tags/table

https://www.codingfactory.net/10616

저작자표시 (새창열림)