[내가 보려고 만든] html 요소 2

이번 html 요소들은 링크와 하이퍼텍스트, 하이퍼미디어와 관련된 것들이다.

​

- 하이퍼텍스트 : 서로 연관된 문서, 텍스트들을 연결하는 것

- 하이퍼미디어 : 텍스트를 비롯하여 이미지, 오디오 등의 멀티미디어 정보의 연결

​

- 노드 : html 문서, 멀티미디어 정보를 표현하는 기본 단위

- 링크 : 노드 연결 요소

- 앵커 : html 문서 내에서 링크의 출발점/도착점 의미

​

​

​

<문서 간 이동>

- <a> : 링크의 시작점 앵커 표현

> href : 이동 목적지 문서의 URL을 지정하는 속성 (위치 지정)

- 절대 주소 : URL 형식(인터넷 주소) -외부 링크 사용 시

- 상대 주소 : 현재의 문서와 같은 폴더의 위치에서부터 상대 주소 - 내부 링크 사용 시

​

> title : 말풍선 창에 나올 설명 지정 속성 (하이퍼링크 설명)

​

> target = "_blank"​ : 새 창, 새 탭에서 열기 (기존의 페이지는 그대로 존재)

"_self" : 현재 프레임에 열기 (앵커가 출발하는 곳)

"_top" : 모든 프레임을 지우고 화면 전체에 열기

"iframe 이름: " : 해당되는 iframe 안에서 열기

​

ex) <a href = "파일이름 or URL 주소" title= "설명" target = "_blank"> 텍스트 지정 </a>

​

​

<문서 내 이동>- 동일 문서 내

- <a id=" "></a> : 목적지 앵커 설정, 시작태그와 끝 태그 사이에 텍스트 필요 x

> id : 문서 내에 목적지 앵커 설정

​

- < a href = "#목적지 아이디"></a> : 시작점 앵커 설정, # 주의

​

​

​

<이미지 파일>

- <img> : 이미지 삽입 요소

> src : 이미지 파일의 경로(URL), 이름 지정

> width, height : 이미지 크기 조정

> alt : 이미지 로드 오류 시 대체 텍스트 (alternate text)

​

-이미지에 하이퍼링크 연결

<a href = "url" target = ""> <img src = "" alt = "" > </a>

​

​

<콘텐츠 단위>

- <figure> : 콘텐츠를 함께 묶어 하나의 독립된 단위로 취급

- <figcaption> : <figure> 요소의 제목을 표현

​

​

​

<오디오>

- <audio> : 오디오 재생

> controls : 미디어 제어기 표시 여부

> autoplay : 파일 로드 시 자동 재생

> loop : 사운드 반복 재생 횟수

> src : 오디오 파일 이름 or URL

> 요소 내 텍스트 입력 : 재생 오류 시의 대체 텍스트

​

- <source> : 같은 내용을 여러 형식으로 작성한 파일 지정 - 로드 전 순서대로 재생가능 여부 확인

> src : 파일 이름.형식

> type : 파일 이름/형식

​

ex) <audio controls autoplay loop = "반복 횟수" src = "파일 이름">

<source src ="audio.ogg" type = "audio/ogg"> ----- 첫 번째 실행

<source src ="audio.mp3" type = "audio/mp3"> ----- 두 번째 실행

재생 오류 ----- 세 번째 실행

</audio>

​

​

​

<비디오>

- <video> : 비디오 삽입

> controlss, autoplay, loop, src, 요소 내 텍스트 : audio 요소의 속성과 동일

> width, height : 비디오 크기 조정

 

​

​

<멀티미디어 요소에 객체 포함>

- <iframe> : 브라우저 페이지 내에 또 다른 페이지 프레임 삽입

> width, height : 프레임 크기 조정

> src : 내부 프레임에 출력할 파일 url 지정

> name : 프레임의 이름

* <a> 요소의 target 속성에 <iframe>의 이름을 지정하면 이 프레임으로 이동

​

ex) <iframe src ="url" width=" " height =" " name= " " > </iframe>

​

​

- <embed> (<object>) : <iframe>과 동일, 속성도 동일, 주로 html이 아닌 외부의 애플리케이션 파일 포함

* <iframe>은 보안 위협이 높으므로 <embed> / <object> 사용을 권장

​

​

<유튜브 동영상 삽입>

- 유튜브 동영상의 <iframe>코드를 복사해서 사용

> frameborder : 프레임 테두리 설정

> allowfullscreen : 콘텐츠 확대 가능

> <iframe>을 <embed>로 바꾸어도 동일하게 동작

​

ex) <iframe src = "주소" frameborder = "" allowfullscreen> </iframe>

​

​

<그림 그리기>

- <canvas> : 화면 영역 정의 후 정의된 영역에 JS API로 그림 그리기 - 비트맵 그래픽스

- <svg> : (scalable vector graphics) 그림 그릴 영역 지정 - 벡터 그래픽스

> 백터 그래픽스 요소를 이용해서 그림 그리기 ex) <circle>. <rect>...