HTML 기본
미디어 태그
1. audio 태그 → 음원을 삽입할 때 사용하는 태그
1-1. 속성
- src: audio 소스
- controls: 컨트로러
- autoplay: 자동재생 ← 지원안하는 브라우저들이 있어서 요즘은 사용 안하는 추세
- muted: 음소거
2. video 태그
영상은 autoplay일때 muted 속성을 추가해야 비디오가 재생된다
3. source 태그
오늘날에는 자주 사용하진 않지만
오디오 형식 호환성 표
| 형식 | Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|---|
| MP3 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| OGG | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
| WAV | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
비디오 형식 호환성 표
| 형식 | Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|---|
| MP4 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| WebM | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
| Ogg | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
시맨틱(semantic) 웹
웹 페이지를 의미 있게 마크업 해서 만든 웹
ex) header, nav, section, article, footer,aside….
1. header
레이아웃 (헤더 영역을 구분하는 데 사용)
2. nav(navigation)
웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분할 때 사용.
3. section
논리적으로 영역을 구분할 때 사용
- 반드시
section태그 내부에는heading태그 중 1개가 사용되어야 함 ← (권장)
4. article
웹페이지에서 독립적인 영역을 구분할 때 사용
5. aside
짜투리 영역, article도 아니고 section도 아닌 경우 → aside(광고 영역?)
6. footer
보통 웹 사이트 최하단
7. main
주력 contents 영역을 구분할 때 - 기본적으로 웹페이지에 1개만 사용
div는 article, section 으로 구분하기 어려운 경우
글로벌 속성
모든 태그에서 사용할 수 있는 속성
1. id
요소의 고유 식별자를 지정 ← 전체에 하나.
2. class
요소의 클래스 이름을 지정하여 CSS 스타일이나 Javascript에서 사용
3. style
요소의 인라인 CSS 스타일을 정의
4. title
요소에 대한 추가 정보를 제공하는 툴팁(tooltip)을 정의
5. lang
요소의 언어를 지정합니다 (예: en, ko). ← ISO 639 국제 표준 사용
6. tabindex
요소의 탭 순서를 설정
| 속성명 | 설명 |
|---|---|
id | 요소의 고유 식별자를 지정합니다. |
class | 요소의 클래스 이름을 지정하여 CSS 스타일이나 JavaScript에서 사용됩니다. |
style | 요소의 인라인 CSS 스타일을 정의합니다. |
title | 요소에 대한 추가 정보를 제공하는 툴팁을 정의합니다. |
lang | 요소의 언어를 지정합니다 (예: en, ko). |
tabindex | 요소의 탭 순서를 설정합니다. |
accesskey | 특정 키를 사용하여 요소에 접근할 수 있도록 합니다. |
data-* | 사용자 정의 데이터 속성으로, data-로 시작하는 속성을 정의합니다. |
hidden | 요소를 숨기는 데 사용되며, 요소가 숨겨지면 화면에 표시되지 않습니다. |
dir | 텍스트의 방향을 설정합니다 (예: ltr, rtl). |
contenteditable | 요소의 콘텐츠가 편집 가능함을 나타냅니다. |
spellcheck | 요소의 맞춤법 검사 기능을 활성화하거나 비활성화합니다. |
20241017 추가✨
ARIA
접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.
- MDN
figure
img 태그가 하나면 감싸주는 태그 -> figcaption으로 사진 설명을 해줌
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>