유형
실습문서
주제
웹개발첫걸음
순번
8
태그
설명
날짜
01. div
🔗div
‣
↓ div로 그룹화
‣
02. span
🖇️span 작은div
‣
03.시맨틱 구조요소
문서의 구조영역을 표시
개발자와 웹브라우저나 장치 등 웹 페이지를 이용하는 모든 대상에 콘텐츠의 의미를 전달
https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_시맨틱
헤더영역 | 제목(사이트로고),내비게이션,검색 | |
맥락이 같은 요소를 주제별로 그룹핑 | 섹션주제에 대한 제목<h2>~<h6>을 포함하는 것이 좋다 | |
푸터영역 | 저작권정보, 회사정보 | |
메인메뉴 | ||
독립적으로 배포가능한 게시물 | ||
광고영역 | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스 | |
figure, figcaption | 삽화와 그림의 설명 |
‣
‣
‣
‣
04. audio
🔗MDN
오디오 코덱이란?
>브라우저별 지원하는 코덱이 상이하니 호환성을 체크하고 추가한다
코덱별 호환성 체크 :
‣
audio 에 사용할수 있는 속성
속성/특성 | 값 | 내용 |
src | 경로 | 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) |
autoplay | autoplay | 자동재생 (접근성위배) 🗨접근성관련사회적이슈 |
loop | loop | 반복재생 |
controls | controls | 컨트롤바 |
muted | muted | 음소거 |
‣
05. video 요소로 동영상 삽입
‣
05-01 자막넣기
포스터와 자막을 넣어보아요
<track>태그- 동영상 화면에 자막 추가하기
- 웹 표준 마크업인 HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각 장애인을 위한 자막을 표시하는 것이 기본입니다
<track kind="자막의 종류" src="파일 경로" srclang="사용한 언어" lable="제목" default>‣
‣
06. 아이프레임
html 문서안에 다른 html 문서를 넣을수 있다.
속성 | 값 | 의미 |
src | 경로 | 불러올 페이지의 URL |
scrolling | auto | 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값) |
yes | 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출 | |
no | 스크롤 하지 않음 |
아이프레임은 접근성, SEO에 취약하므로 사용자제
‣
07. 인라인프레임에서 하이퍼링크 연결
‣