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