KH_HTML_3_다양한 내용 입력하기

텍스트 태그 알아보기

 

목록 만들기

 

표 만들기

표의 구조 정의하기

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

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

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

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

 

이미지 삽입하기

 

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

 

img 태그의 src속성

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

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

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

 

img 태그의 alt 속성

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

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

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

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

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

 

img 태그의 width, height 속성

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

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

 

오디오와 비디오 삽입하기

<audio> 태그,<video> 태그의 속성

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

 

하이퍼링크 삽입하기