HTML기초_03

라오니·2022년 11월 27일
0

HTML

목록 보기
2/3

1. 표 Table

01. 기본구조

:데이터를 담은 표를 만들 때 사용

<table> 
    <tr> =table row
         <th>테이블 헤더</th> 
         <td>테이블 데이터</td>
    </tr>
</table>

예시를 보자.

<table>
    <thead> =table head **명확하게 표시**
          <tr>
               <th>ID</th>
               <th>이름</th>
               <th>개발분야</th>
          </tr>
    </thead>

    <tbody> =table body **명확하게 표시**
          <tr>
               <td>0001</td>
               <td>김라온</td>
               <td>프런트엔드</td> 
          </tr>
          <tr>
               <td>0002</td>
               <td>홍길동</td>
               <td>풀스택</td> 
          </tr>
    </tbody>

    <tfoot> =table foot **명확하게 표시**

    </tfoot>
</table>

02. 심화구조

 <table>
    <thead>
        <tr>
            <th></th>  //공란
            
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">1교시</th>
            
            <td rowspan="2">HTML &amp; CSS</td>
            <td>모각코</td>
            <td rowspan="2">HTML &amp; CSS</td>
            <td>모각코</td>
            <td rowspan="2">HTML &amp; CSS</td>
        </tr>
        <tr>
            <th scope="row">2교시</th>
            
            <td rowspan="2">JS01</td>
            <td rowspan="2">JS01</td>
        </tr>
        <tr>
            <th scope="row">3교시</th>
            
            <td>JS02</td>
            <td>JS02</td>
            <td>JS02</td>
        </tr>
        <tr>
            <th colspan="6" scope="row">점심시간</th>
        </tr>
        <tr>
            <th scope="row">4교시</th>
            
            <td>SASS 기초반</td>
            <td rowspan="2">HTML &amp; CSS</td>
            <td rowspan="2">세미나</td>
            <td rowspan="2">HTML &amp; CSS</td>
            <td>SASS 기초반</td>
        </tr>
        <tr>
            <th scope="row">5교시</th>
            
            <td>모각코</td>
            <td>모각코</td>
        </tr>
    </tbody>
 </table>

2. 미디어파일

-오디오

<audio scr="주소"></audio>

01. 재생버튼 생성

<audio scr="주소" controls></audio>

02. 자동재생

<audio scr="주소" autoplay></audio>

03. 무한자동재생

<audio scr="주소" loop autoplay></audio>

04. 지원하는 오디오파일별로

<audio controls>
	<source scr="주소.wav" type="audio/wav">
    <source scr="주소.mp3" type="audio/mpeg">
    <source scr="주소.ogg" type="audio/ogg">
</audio>

-비디오

<vedio scr="주소"></vedio>

...오디오와 재생방식과 지원하는 파일별로 문법이 똑같다. (그래서 설명 생략)

-iframe

: 미디어파일을 복붙해서 넣고 싶을 때
따로 테그를 외울 필요는 없고 링크 임베디드를 통해 코드를 복붙해서 쓰면 된다.

<iframe scr=""></iframe>

3. 기타 Etc

01. abbreviation(약자)

<abbr title="풀네임">약자</abbr>

02. address

<address>연락처</address>

연락망의 종류

  1. (물리적)주소
  2. URL
  3. email주소
  4. 전화번호
  5. SNS

03. preformatted text, code

<pre>
	<code>
    내가 친대로 줄바꿈이랑 띄어쓰기가 된다.
    </code>
</pre>
profile
적어도 어제보다 오늘 더 발전만 하면 된다는 마인드!

0개의 댓글