동아리/TeamLog

HTML 기초 II

소라님 2021. 7. 25. 10:33

태그의 기본 구조

 

  • 여는 태그
    태그의 시작
    ex) <p>, <ol>, <ul>, <li> ...
  • 닫는 태그
    태그의 끝
    ex) </p>, </ol>, <ul>, <li> ...

 

  • 일반 태그
    여는 태그와 닫는 태그로 이루어진 태그입니다.
    ex) <p></p>, <h1></h1> ...
  • 단일 태그
    닫는 태그가 없는 태그입니다.
    ex) <br>, <hr>, <img>=</img> ...

 

  • 블록레벨 요소
    웹페이지 상에서 블록을 만드는 요소입니다.
    한줄을 차지하는 요소 = 너비가 100% = 줄 바꿈이 됨
    ex) p, h1~h6, ul, ol, div, hr, table ...
  • 인라인 요소
    웹페이지 상에서 일정 공간을 차지하는 요소입니다.
    표시되는 만큼 영역 차지 = 줄 바꿈이 안 됨
    ex) a, br, span, strong, em ...

 

  • 태그
    시작 태그와 종료 태그 등 뼈대를 이루는 부분입니다.
    ex) <a>...
  • 속성
    태그 안에서 사용되는 더 구체화된 명령 체계입니다.
    ex) href, reversed ...

 

  • DIV
    영역 설정 : 블록레벨 요소
    ex) <div></div>
  • SPAN
    영역 설정 : 인라인 요소
    ex) <span></span>

표 태그

 

표의 구조

 

코드

 

문서

  • table
    표를 만드는 태그입니다.
    <table></table>

 

  • tr
    표의 행을 나타내는 태그입니다.
    <tr></tr>

 

  • td
    표의 열을 나타내는 태그입니다.
    <td><td>

 

  • th
    제목 부분 지정해 주는 태그입니다.
    <th></th>

 

  • caption
    표에 제목을 붙이는 태그입니다.
    table 태그 바로 다음에 사용합니다.
    <caption></caption>

 

 

 

 

  • thead
    표의 제목 영역을 알려주는 태그입니다.
    <thead></thead>

 

  • tbody
    표의 본문 영역을 알려주는 태그입니다.
    <tbody></tbody>

 

  • tfoot
    표의 요약 영역을 알려주는 태그입니다.
    <tfoot></tfoot>

 

  • thead, tbody, tfoot을 사용하는 이유는
    시각장애인이 화면 낭독기를 통해 표의 구조를 쉽게 이해하게 할 수 있게 돕기 때문입니다.
    또 다른 이유로는, 부분별로 다른 디자인이나 다른 기능을 제공을 가능하게 해주기 때문입니다.

표 속성

 

  • colspan
    열을 병합하는 속성입니다.
    <td colspan="η"></td>

 

  • rowspan
    행을 병합하는 속성입니다.
    <td rowspan="η"></td>

 

  • border
    표의 굵기 지정하는 속성입니다.
    <table border="η"></table>

이미지 태그와 속성

 

코드

 

문서

  • img
    이미지를 삽입하는 태그입니다.
    </img>

 

  • src
    이미지 경로를 지정하는 속성입니다.
    <img src="경로"/>

 

  • alt
    이미지 출력 오류 시, 혹은 시각장애인을 위한 대체 텍스트 출력하는 속성입니다.
    <img alt="설명"/>

 

  • width
    이미지 폭을 설정하는 속성입니다.
    <img width="값"/>

 

  • height
    이미지의 높이 설정하는 속성입니다.
    <img height="값"/>

오디오 태그와 속성

 

코드

 

문서

  • audio
    오디오 삽입 태그입니다.
    <audio></audio>

 

  • source
    호환성을 높이기 위해 여러 형식의 확장자를 정의하는 태그입니다.
    <source>

 

  • src
    오디오의 경로를 설정하는 속성입니다.
    <audio src="경로"></audio>, <source src="경로">

 

  • type
    오디오의 확장자를 지정해주는 속성입니다.
    <source type="adio/(확장자)">
    확장자
    mp3 : MPEG 기술의 음성 압축 기술, 호환성이 좋습니다.
    wav : 윈도우에서 사용되는 표준 오디오, 파일 크기가 큽니다.
    ogg : 오픈 소스로 개발되었으며, 적은 용량을 가지고 있습니다.

 

  • autoplay
    오디오를 자동 재생하는 속성압니다.
    <audio autoplay></audio>

 

  • controls
    오디오 재생 제어기를 표시하는 속성입니다.
    <audio controls></audio>

 

  • loop
    오디오를 반복 재생하는 속성입니다.
    <audio loop></audio>

비디오 태그와 속성

 

코드
문서

  • video
    비디오 삽입 태그입니다.
    <video></video>

 

  • source
    호환성을 높이기 위해서 여러 형식의 확장자를 정의하는 태그입니다.
    <source>

 

  • src
    비디오의 경로를 설정해주는 속성입니다.
    <video src="경로"></video>

 

  • type
    오디오의 확장자를 지정해주는 속성입니다.
    <video type="video/(확장자)"></video>
    확장자
    mp4 : 적은 용량으로 고품질 영상 및 음성 구현을 하는 것이 특징입니다.
    webm : 무료이고, 개방형 고화질 영상 압축 형식을 지닌 영상입니다. 그리고 구글이 지원합니다.
    ogg : 무료이고, Theora 비디오 압축 기술을 가지고 있습니다.

 

  • poster
    재생 전, 재생 불가 시 표시될 이미지를 지정해주는 속성입니다. (썸네일)
    <video poster="이미지"></video>

 

  • muted
    비디오 소리를 끄는 속성입니다.
    <video muted></video>

 

  • width/height
    비디오의 크기를 설정하는 속성입니다.
    <video width="값" height="값"></video>

 

  • autoplay
    비디오를 자동 재생하는 속성입니다.
    <video autoplay></video>

 

  • controls
    하단바 부분에 비디오 재생 제어기를 생성하는 속성입니다.
    <video controls></video>
저작자표시 비영리 변경금지 (새창열림)