[HTML] HTML 101 table, audio, video, iframe, abbr, pre, code

기본 ! : mdn html elements 공식 문서 참고할것

1. table : tr로 열을 만들고 내부 정보는 th, td 로 입력함

   	
    //세로 입력방식
        <table>
            <tr>
                <th></th>
                <td></td>
            </tr>
        </table>
   		
   		
    //가로 입력방식	
    //thead로 th의 역할을 명시할 수 있다.
    //tbody로 td th에 관련된 데이터라는것을 명시할 수 있다.
   	
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>		
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>	
        </table>
   		
   	
   

   • rowspan, colspan을 사용해서 테이블 모양을 변경할 수 있음
   • th 가 가로의 header인지, 세로의 header인지 구분하기 위해 scrope 속성을 추가할 수 있다.

    <table>
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scrope="row"></th>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scrope="row"></th>
                <td></td>
                <td></td>
            </tr>
        </tbody>
   	
    </table>
   	
   

2. audio
   • controls 속성을 추가하면 audio 소리, 재생 등을 통제할 수 있는 control 바를 제공한다.
   • autoplay, loop autoplay 등의 속성을 추가해서 자동재생, 반복 자동재생 속성을 추가할 수 있다.
   • 브라우저에서 지원하는 파일이 제한될 경우를 위해 mp3, ogg 등 다양한 확장자 source를 추가할 수 있다.
   • 브라우저별 지원하는 파일 확장자를 확인하려면 caniuse.com 에서 확장자명을 입력하면 확인가능함.

   		
        <audio controls src="AudioTest.ogg" autoplay></audio>
   	
        <audio controls>
          <source src="AudioTest.mp3" type="audio/mp3" />
          <source src="AudioTest.ogg" type="audio/ogg" />
        </audio>
   	
   

3. video
   • audio 와 마찬가지로 autoplay, loop autoplay 속성 추가가능

   	
        <video controls width="250">
   
            <source src="/media/cc0-videos/flower.webm"
                    type="video/webm">
   
            <source src="/media/cc0-videos/flower.mp4"
                    type="video/mp4">
   
            Sorry, your browser doesn't support embedded videos.
        </video>
   	
   

4. iframe
   • 다른 웹사이트를 임베드 할 때 사용

   		
        <iframe id="inlineFrameExample"
            title="Inline Frame Example"
            width="300"
            height="200"
            src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
        </iframe>	
   	
   

5. abbr
   • abbreviation 약자, 약어. 약자에 대한 설명을 추가해서 mouseover 했을 때 설명을 볼 수 있는 기능을 제공한다.

   You can use CSS to style your HTML.

    <p>You can use <abbr title="Cascading Style Sheets">CSS</abbr>
    to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
   	
   

6. pre
   • performed text element html 파일에 작성된 텍스트 그대로 보여준다.

      L          TE
        A       A
          C    V
           R A
           DOU
           LOU
          REUSE
          QUE TU
          PORTES
        ET QUI T'
        ORNE O CI
         VILISÉ
        OTE-  TU VEUX
         LA    BIEN
        SI      RESPI
                RER       - Apollinaire
    

7. code
   • 컴퓨터 언어 코드라는 것을 나타낼때 사용한다.

        <p>
            The <code>push()</code>
            method adds one or more elements to the end of an array and returns the new length of the array.
        </p>
   

제일 복잡한 form 이랑 table은 지난 프로젝트에서 지겹게 해서 다행이다 😊