KH_HTML_3_다양한 내용 입력하기

교육 | 외부활동/PUBLISHING

wn1331 2023. 1. 3. 17:48

- 표의 구조를 '제목' 과 '본문', '요약' 부분으로 나눈다.

- <thead>, <tbody>, <tfoot> 태그 사용

- 웹 브라우저 화면에서 보이지 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다. -> 시각 장애인도 표의 구조를 쉽게 이해할 수 있다.

- 표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥 부분을 고정하고 본문만 스크롤되도록 할 수 있다.

웹페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 주로 몇 가지 파일 형식만 사용한다. -> GIF, JPG, JPEG, PNG

- 웹 문서 파일의 위치를 기준으로 이미지 경로 지정

- HTML과 이미지 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적는다. ex) <img src = "tangerines.jpg">

- 하위 폴더에 이미지 파일이 있다면 하위 폴더까지 같이 적는다. ex) <img src = "images/tangerines.jpg">

- 이미지를 설명하는 대체 텍스트

- 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌.

- 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시

- 텍스트 자체를 이미지로 만들었을 경우 대체 텍스트 안에 이미지 파일의 내용을 그대로 넣어주어야 함.

- 불릿 이미지나 작은 아이콘 등의 경우에는 alt = " " 처럼 지정한다.

- 이미지 크기를 조정한다.

- width나 height 중 1개만 지정해도 나머지 속성은 자동으로 비율을 계산한다.

속성	설명
controls	플레이어 화면에 컨트롤 바를 표시합니다.
autoplay	오디오나 비디오를 자동으로 실행합니다.
loop	오디오나 비디오를 반복 재생합니다.
muted	오디오나 비디오의 소리를 제거합니다.
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지를 지정합니다. 사용할 수 있는 값은 auto, metadata, none입니다. 기본적으로 preload="auto"가 사용됩니다.
width, height	비디오 플레이어의 너비와 높이를 지정합니다. width나 height의 값 중에서 하나만 지정하면 나머지는 자동으로 계산해서 표시합니다.
poster="파일 이름"	<video> 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정합니다.