반응형
AttributeDescription
| id | 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다. |
| class | 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다. |
| hidden | css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다. |
| lang | 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다. |
| style | 요소에 인라인 스타일을 지정한다. |
| tabindex | 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다. |
| title | 요소에 관한 제목을 지정한다. |
NEW 태그
| header | 헤더를 의미한다 |
| nav | 내비게이션을 의미한다 |
| aside | 사이드에 위치하는 공간을 의미한다 |
| section | 본문의 여러 내용(article)을 포함하는 공간을 의미한다 |
| article | 분문의 주내용이 들어가는 공간을 의미한다 |
| footer | 푸터를 의미한다 |
링크
-디렉토리 경로 표기(dir)
루트 디렉터리파일 시스템 계층 구조 상의 최상위 디렉터리이다.
- Unix: /
- Windows: C:\
홈 디렉터리시스템의 사용자에게 각각 할당된 개별 디렉터리이다.
- Unix: /Users/{계정명}
- Windows: C:\Users\{계정명}
작업 디렉터리작업 중인 파일의 위치한 디렉터리이다.
- ./
부모 디렉터리작업 디렉터리의 부모 디렉토리이다.
- ../
ValueDescription
| 절대 URL | 웹사이트 URL (href=”http://www.example.com/default.html”) |
| 상대 URL | 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”) |
| fragment identifier | 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”) |
| 메일 | mailto: |
| script | href=”javascript:alert(‘Hello’);” |
Target(타겟)
target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.
ValueDescription
| _self | 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값) |
| _blank | 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다 |
Table(테이블)
| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 (table row) |
| th | 행 내부의 제목 셀 (table heading) |
| td | 행 내부의 일반 셀 (table data) |
+ 테이블 속성
| border | 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.) |
| rowspan | 해당 셀이 점유하는 행의 수 지정 |
| colspan | 해당 셀이 점유하는 열의 수 지정 |
미디어
1. Audio(오디오)
audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
| src | 음악 파일 경로 |
| preload | 재생 전에 음악 파일을 모두 불러올 것인지 지정 |
| autoplay | 음악 파일을 자동의 재생 개시할 것인지 지정 |
| loop | 음악을 반복할 것인지 지정 |
| controls | 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. |
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
<source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>
</body>
</html>
2 Video(비디오)
video 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
| src | 동영상 파일 경로 |
| poster | 동영상 준비 중에 표시될 이미지 파일 경로 |
| preload | 재생 전에 동영상 파일을 모두 불러올 것인지 지정 |
| autoplay | 동영상 파일을 자동의 재생 개시할 것인지 지정 |
| loop | 동영상을 반복할 것인지 지정 |
| controls | 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. |
| width | 동영상의 너비를 지정 |
| height | 동영상의 높이를 지정 |
<!DOCTYPE html>
<html>
<body>
<video width="640" height="360" controls>
<source src="assets/video/wildlife.mp4" type="video/mp4">
<source src="assets/video/wildlife.webm" type="video/webm">
</video>
</body>
</html>https://poiemaweb.com/html5-tag-image-multimedia
HTML5 Tag - Image & Multimedia | PoiemaWeb
이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그
poiemaweb.com
반응형
'웹(Web) > 프론트엔드(Frontend)' 카테고리의 다른 글
| Vue Composable(컴포저블) (0) | 2023.11.17 |
|---|---|
| Vue.js 기본 정리(v-for,데이터바인딩,EventHandler,v-if) (0) | 2023.10.02 |
| VScode 단축키 및 숏컷 (0) | 2022.03.07 |
| JavaScript 정리3(Object, 프로퍼티 전달, 배열 출력, clone) (0) | 2021.03.15 |
| JavaScript 정리2(클래스, 상속, 다양성) (0) | 2021.03.15 |