이미지
<img> 홀태그를 이용하여 이미지를 넣을 수 있습니다.
이미지 표현을 위해 꼭 필요한 속성이 있습니다. src 속성은 출력할 대상 이미지를 지정하며 생략할 수 없는 필수 속성입니다.
브라우저는 HTML 문서를 먼저 읽은 후 문서에 포함된 이미지를 다운받습니다. 별도의 분리된 파일이기 때문에 다운을 받은 후 표시하면 반응이 느리기 때문입니다.
이미지 크기를 강제 조정할 경우 품질이 떨어지고 네트워크 대역폭도 낭비되기 떄문에 width, height 속성보다는 스타일시트를 사용하는 것이나 아예 원본 파일의 크기를 바꾸는 것이 바람직합니다.
<alt> 속성은 지정하는 것이 좋습니다. 네트워크 등의 문제로 이미지를 받지 못한 경우 문자열로 된 설명으로 어떤 그림이 있었는지 알려줍니다.
이미지에도 <a>태그를 이용하여 링크를 걸 수 있므여 <a>태그 안에 <img> 태그가 들어가는 형태가 됩니다.
이미지 맵
이미지 맵(map)은 하나의 큰 이미지를 분할하여 각 분할 영역마다 별도의 링크를 붙이는 기법입니다.
큰 이미지에 여러 개의 링크를 걸 때 적합하며 이미지 작업이 간단하고 맵을 쉽게 수정할 수 있게 만들어줍니다.
이미지 맵 사용시에는 <img>태그에 usemap 속성으로 연결하여 이미지의 맵으로 사용합니다.
이미지 안에 링크는 <area>태그를 이용하여 지정합니다. <area>안에 shape 속성은 링크영역의 모양을 지정하는 속성으로 속성값으로는 rect(직사각형), circle(원), poly(다각형), default(그 외 나머지 영역)이 있습니다.
coords속성은 shape 속성에 따른 링크 영역을 지정합니다. 링크 좌표는 작업을 대신해 주는 툴을 이용합니다.
https://www.w3schools.com/tags/tag_map.asp를 참고하여 어떻게 사용가능한 지 살펴볼 수 있습니다.
figure
<figure>태그는 본문에 비해 독립적인 내용 하나를 표현하기 위해 사용하는 태그입니다. 주로 이미지에 쓰지만 도표, 그래프, 예제 등에도 사용됩니다.
사용법은 <figure> 태그 안에 이미지, 도표 등 표시하고픈 내용을 배치한 후 <figcaption> 태그를 이용하여 제목을 붙여 사용합니다. <figure>태그는 블록특성을 가지므로 항상 새로운 줄에 개행되어 배치되고 한 줄을 다 차지합니다.
오디오와 비디오
<audio>태그는 음악을 삽입할 때 사용하는 태그입니다. src는 재생할 사운드 파일의 위치이고 필수 옵션입니다.
속성값으로는 autoplay, controls, loop, muted 등이 있습니다.
autoplay 속성이 없으면 멈춘 상태로 시작되며 controls 속성이 있어야 사용자가 재생을 조작할 수 있다. controls이 없으면 사용자가 노래를 멈출 수 없으며 이 페이지를 떠나지 않는 이상 노래를 계속 들을 수 밖에 없다. loop 속성은 노래를 반복하는 속성이다. muted는 오디오를 음소거 상태로 처음에 만들어 놓는 것이다. <source>태그는 <audio>의 하위태그로 여러 포멧의 오디오 파일을 지정할 수 있도록 만들어준다.
<audio controls loop><source src="파일의 경로" type="파일의 포멧">"브라우저가 audio를 지원하지 않는 경우 출력하는 문구"</audio>
와 같이 사용할 수 있습니다.
<video> 태그도 마찬가지로 오디오와 비슷한 포멧으로 사용가능합니다.
비디오는 화면에 보이기 때문에 width와 height 속성값이 있다는 점, 다운받는 동안 보여줄 대체 이미지를 지정하는 poster 속성이 있다는 점이 오디오와 다른점입니다.
