Chapter 03. 링크와 멀티미디어
HTML 기본 개념
- 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결
- 하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보가 서로 연결
하이퍼텍스트 / 하이퍼미디어의 구조
- 각 정보의 조각은 링크에 의해 서로 연결
- 연결 링크를 선택하여 내비게이션
노드, 링크, 앵커
- 노드 : HTML 문서나 멀티미디어 정보를 표현하는 기본단위
- 링크 : 노드를 연결하여 내비게이션이 가능토록 함
- 앵커 : HTML 문서 내에서 링크의 출발점이나 도착점
HTML 문서에서 사용되는 링크의 종류
- 특정 단어나 문장, 혹은 이미지에서 다른 문서
- 외부 URL
- 문서내 다른 지점
<a>
- 문서간 이동에 사용
- 링크의 시작점 앵커를 표현
- href 속성 : 이동하고자 하는 목적지를 지정
1) 절대 주소 -> <a href="URL 주소"> ~ </a>
2) 상대 주소 -> <a href="파일이름.html"> ~ </a>
- title 속성 : 말풍선 창에 나올 설명
- 동일한 문서 내에서 특정 지점으로 연결 (책갈피 링크)
ㄴ 목적지 앵커 <a id="고유아이디"> ~ </a>
ㄴ 시작점에서 연결 <a href="#고유아이디"> ~ </a>
* 이미지 파일 종류
1) GIF
2) JPEG
3) PNG
<img>
- 이미지 삽입에 사용
- src 속성 : 이미지 파일의 이름
- width / height 속성 : 크기 조정
- alt 속성 : 이미지에 대한 설명 텍스트 지정
ㄴ 이미지 파일의 주소가 잘못되거나, 인터넷 연결이 느려서 미처 이미지를 표시 못하는 경우
<figure>
- 그림, 사진, 아이어그램과 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급할 때 사용
<figcaption>
- <figure> 를 위한 제목을 표현
- <figure> 요소 내에 위치
* 이미지에 하이퍼링크 연결
<a href="링크할 곳의 파일이름"><img src="이미지 파일이름"></a>
* 지원하는 오디오 / 비디오 파일 형식
1) MP3 (.mp3)
2) Wave (.wav, .wave)
3) MPEG4 (.mp4, .m4v)
4) Ogg (.gg, .ogv)
5) WebM (.webm)
<audio>
- 오디오 삽입에 사용
- src 속성 : 재생할 사운드 파일 이름
- controls 속성 : 미디어 제어기를 표시할 지 여부
- autoplay 속성 : 파일이 로드되자마자 자동 재생
- loop 속성 : 사운드 반복 재생 횟수
- preload 속성 : 미리 오디오를 로딩할 지 여부
1) auto (기본값) : 페이지 로드하고 바로 오디오 파일 다운
2) metadata : 사용자가 재생하기 전까지 오디오의 크기, 관련 정보 등 메타데이터만 다운
3) none : 재생 시작 전까지 오디오파일 다운 x
- <source> 요소와 같이 사용하기
ㄴ 브라우저에서 오디오 파일이 지원되지 않는 경우를 대비
ㄴ src 속성 : 오디오 파일의 이름 지정
ㄴ type 속성 : 오디오 파일의 MIME 형식 지정
<video>
- 비디오 삽입에 사용
- src, controls, autoplay, loop 속성 : <audio> 와 동일
- width / height 속성 : 비디오가 표시될 영역의 크기
- videoWidth / videoHeight 속성 : 비디오 자체의 너비와 높이
- poster 속성 : 동영상이 로딩되고 있을 때 보여줄 이미지
- preload 속성 : 미리 동영상을 로딩할 지 여부
1) auto (기본값) : 페이지 로드하고 바로 비디오 파일 다운
2) metadata : 사용자가 재생하기 전까지 비디오의 크기, 첫 프레임 등 메타데이터만 다운
3) none : 재생 시작 전까지 비디오 파일 다운 x
<iframe>
- 페이지 내에 또 다른 페이지 프레임 삽입할 때 사용
- src 속성 : 내부 프레임에 출력할 파일의 URL 지정
- width / height 속성 : 브라우저 프레임의 가로, 높이 크기 지정
- name 속성 : 프레임의 이름
<object> 또는 <embed>
- 주로 HTML 파일이 아닌 비디오, 오디오, 애니메이션 등 외부의 애플리케이션 파일을 포함할 때 사용
<embed>
- 외부객체 포함할 때 사용
- src 속성 : 삽입할 파일의 URL 지정
- width / height 속성 : 크기 지정
* 유튜브 동영상 삽입하기
- YouTube 메뉴 "공유 -> 소소코드"에서 <iframe> 코드 복사
- <iframe>을 <embed>로 바꿔도 동일
* 특정 콘텐츠 요소 포함하기
1) <canvas> 요소로 그림 그리기
- 비트맵 그래픽스 방식의 그림
- 화면 영역을 <canvas> 로 정의하고 난 후, 정의된 이 영역에 자바스크립트 API를 이용하여 그림 그리기
2) <svg> 요소로 벡터 그래픽스 그리기
- 벡터 그래픽스 방식으로 정의된 그림을 표현
- 그림 그리고자 하는 영역의 크기를 <svg>로 정의하고, 원하는 벡터 그래픽스 요소를 하위에 포함
3) <math>
- 수학공식을 표현
- <mrow> : 표현식 전체를 그룹화하는데 사용
- <msup> : 처음 나오는 요소가 밑, 뒤에 나오는 요소가 지수로 표현
- <mi> : 변수, 함수, 상수를 나타낼 때 사용
- <mn> : 숫자를 나타낼 때 사용
- <mo> : 연산자 나타낼 때 사용
Chapter 06. 다양한 입력 폼
<form>
- 사용자가 입력한 정보를 애플리케이션에 전달
- input, textarea, select, button 등의 입력 요소 사용
- method 속성 : 데이터 전송 방식 지정
ㄴ get 방식 : 전송할 데이터를 URL 주소 뒤에 포함 (간단한 데이터엔 편리, 보안에 취약)
ㄴ post 방식 : 프로그램의 입출력 방식 이용, 데이터 양에 제한 없음
- action 속성 : 데이터를 처리할 애플리케이션 주소 or URL
- name 속성 : 폼 요소에 대한 이름
<input>
- name, value 속성
- type 속성 : 입력 폼의 유형
1) 텍스트 관련 : text, password
2) 선택 관련 : radio, checkbox
3) 버튼 : submit, reset, button, image
4) 기타 : file, hidden
* 텍스트 입력
- 문자열 입력 : <input type="text" name="변수명" value="초기값">
- 암호 입력 : <input type="password" name="변수명">
- 텍스트 영역 : <textarea> ~ </textarea>
* 선택항목의 입력
- 라디오 버튼 : <input type="radio" name="변수명" value="선택값">
- 체크박스 선택 : <input type="checkbox" name="변수명" value="선택값">
- 선택목록 선택 : <select>
<option value="선택값"></option>
</select>
* 버튼 입력
- 전송 버튼 : <input type="submit" value="버튼라벨">
- 초기화 버튼 : <input type="reset" value="버튼라벨">
- 일반 버튼 : <input type="button" value="버튼라벨">
- 이미지 버튼 : <input type="image" src="이미지 파일" alt="대체 문자열">
- <button> 요소 : <button type="submit">버튼라벨</button>
* 기타 입력 필드
- 파일 선택 : <input type="file">
- 데이터 숨김 : <input type="hidden">
- 텍스트 라벨 : 특정 입력 필드에 연결
ㄴ <label for="입력아이디">
* 입력 필드의 그룹핑
1) 그룹핑 : <fieldset>
- 폼 양식을 그룹핑하는 범위를 지정
- name 속성 : 그룹의 이름 지정
- form 속성 : 폼과 연결
- disabled 속성 : 그룹 내의 모든 하위 입력 요소들을 비활성화
2) 그룹의 라벨 : <legend>
- 그룹의 제목 라벨
* 서식이 있는 텍스트 입력
- 이메일 주소 입력 : <input type="email">
- URL 주소 입력 : <input type="url">
- 전화번호 입력 : <input type="tel">
ㄴ pattern 속성 : 원하는 전화번호와 자리수에 유효한 패턴 지정
ㄴ placeholder 속성 : 입력할 자리수 표시
- 검색창 입력 : <input type="search">
* 날짜와 시간 입력
1) 날짜 입력
- 연 / 월 / 일 : <input type="date">
- 연 / 월 : <input type="month">
- 연 / 주 : <input type="week">
2) 시간 입력
- 위 / 아래 버튼으로 시간 조정 : <input type="time">
- UTC 국제표준 시간대 : <input type="datetime">
- 현지 시간 : <input type="datetime-local">
* 기타 입력
- 색상 입력 : <input type="color">
- 숫자 입력 : <input type="number">
- 범위 입력 : <input type="range">
<datalist>
- 데이터 목록 기능
- <input>의 list 속성에 <datalist>의 id 속성을 지정
- 검색어 자동완성 or 제시어 기능 구현 가능
댓글