[1. 이미지 삽입하기]
<img src = "이미지 파일 경로" alt ="대체용 텍스트">■ src : 이미지 파일 경로를 지정하여 웹 브라우저에 알려주는 역할. 필수
■ alt : 화면 낭독기 등에서 이미지를 대신 읽어줄 텍스트 입력
- 인터넷이 불안정하거나 파일 경로 잘못 넣어서 이미지를 제대로 표시할 수 없을 때도 이미지 대신 alt 텍스트 나타남.
□ width, height 속성
: 이미지 크기 조절.
□ width : 너비
□ height : 높이
- 둘 중 하나만 지정해도 나머지 속성은 비율을 자동으로 계산해서 나타냄
- 퍼센트(%), 픽셀(px) 사용
<p>원래 크기 이미지</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbSVp13NF6AZxMY98V5q7JYo_VOtyHMJULZg&s" alt="농담곰"
<p>width = "50%", heigh="50%"로 지정한 이미지</p>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbSVp13NF6AZxMY98V5q7JYo_VOtyHMJULZg&s" alt ="농담곰" width = "50%">
<p>width="150"으로 지정한 이미지</p>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbSVp13NF6AZxMY98V5q7JYo_VOtyHMJULZg&s" alt ="농담곰" width = "150">
[2. 오디오와 비디오 삽입하기]
■ <object>, <embed>
□ <object> : 오디오 뿐만 아니라 자바 애플릿, PDF 등 다양한 멀티미디어 파일 삽입 시 사용.
<object width="900" height="800"data="product.pdf"></object>
□ <embed> : 대부분의 브라우저에서 사용 가능함. src 속성을 이용해 삽입할 멀티미디어 파일을 지정하고 width, height 속성으로 플레이어의 너비와 높이를 지정할 수 있다.
- 닫는 태그 X
<embde src="medias/spring.mp3">
※ 멀티미디어 파일 종류
| 종류 | 확장자 | 설명 |
| 비디오 | mp4 | 많이 사용하는 비디오 형식. 라이선스가 있지만 웹에서 무료로 사용할 수 있다. |
| webm | 화질이 우수하고 무료라서 mp4와 함께 많이 사용 | |
| 오디오 | mp3 | 대부분의 음원에서 사용하는 형식. 라이선스 종료로 현재 무료 사용 가능 |
| mp4, m4a | mp3의 문제점을 개선한 AAC 코덱을 사용한 파일 형식. 확장자는 mp4 뿐만 아니라 m4a를 사용하기도 함 |
■ <audio>, <video>
: 오디오와 비디오 파일 삽입
- 현재 웹 브라우저마다 플레이어가 다름
□ <audio> : 배경 음악이나 효과음 등 오디오 파일 삽입
□ <video> : 비디오 파일 삽입
- 비디오 파일의 너비값을 지정하지 않을 경우 웹 브라우저에 가득차게 나타나므로 적절히 지정해줄 것
--> 둘 다 시작/종료를 조작할 수 있는 컨트롤 바 속성(controls) 함께 표시
<audio src="오디오 파일 경로"></audio>
<audio src-"비디오 파일 경로"></video><audio src="medias/spring.mp3" controls></audio>
<video src="medias.salad.mp4" controls width="700"></video>
※ <audio>와 <video> 속성
| controls | 플레이어 화면에 컨트롤 바를 표시함 |
| autoplay | 오디오나 비디오 자동 실행 |
| loop | 오디오나 비디오 반복 재생 |
| muted | 오디오나 비디오 소리 제거 |
| preload | 페이지 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정. 사용 가능한 값은 auto, metadata, none이며 기본 값은 preload="auto"이다. |
| width, height | 비디오 플레이어는 너비, 높이 지정 가능. 둘 중 하나만 지정하면 나머지는 자동으로 비율 계산해서 표시 |
| poster="파일 이름" | <video> 태그에서 사용하는 속성. 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정함 |
＊ 크롬에서는 비디오 파일을 자동 재생하려면 muted 속성을 넣어서 소리를 꺼야한다. (사용자 UI/UX 때문에 정책 변경)
[3. 하이퍼링크 삽입하기]
■ <a> 태그와 href 속성
: 링크 삽입. href에는 연결할 파일이나 링크할 주소를 작성한다.
<a href="링크할 주소">텍스트 또는 이미지</a> <p><a href="#">주문서 작성하기</a></p>
- 이미지, 글 모두 링크 연결 가능!
□ target = "_blank" 속성 : 링크를 새 탭에서 열어준다.
<p><a href="../05/order.html" target="_blank">주문서 작성하기</a></p>
[4. 입력 양식(=폼) 작성하기]
① <form> 태그 : 폼을 만든다.
<form [속성="속성값"]>여러 폼 요소</form>
※ 속성
| method | 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정. method에서는 두 가지의 속성값을 사용할 수 있다. ＊ get : 데이터를 256-4,096Byte까지만 서버로 넘길 수 있으며, 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. ＊ post : 입력한 내용의 길이에 제한 받지 않고 사용자가 입력한 내용도 드러나지 않는다. |
| name | 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정함 |
| action | <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정함 |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함 |
예를 들어 폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다면 다음처럼 작성한다.
<form action="register.php">
</form>
② autocomplete 속성 : 자동 완성 기능
- 기본 속성값은 "on"
- 중요한 개인 정보, 인증 번호 같은 정보에는 사용 X
<form action="" autocomplete="off">
</form>
③ <fieldset>, <legend> 태그 : 폼 요소를 그룹으로 묶음
■ <fieldset>
: 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
- ex. 폼에서 개인 정보와 배송 정보를 나누어 표시함
■ <legend>
: <fieldset> 태그로 묶은그룹에 제목을 붙임
<body>
<h2>레드향 주문하기</h2>
<form action="">
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>
</body>
④ <label> 태그 : 폼 요소에 레이블을 붙임
＊ 레이블 : 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트
- 2가지 방법으로 사용 가능
1) 첫 번째 : 태그 안에 폼 요소를 넣음
<label>레이블명<input></label>
2) 두 번째 : 사용자가 아이디를 입력하는 폼 요소의 앞뒤에 <label>과 </label> 태그를 붙여 작성
- <label> 태그와 폼 요소를 따로 사용하고<label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결함.
(폼 요소 id속성값을 <label> 태그의 for 속성에게 알려주는 것)
<label for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id">
⑤ input 태그 : 폼에서 사용자가 입력한 정보를 받음
※ 속성
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣음 |
| password | 비밀번호 입력할 수 있는 필드를 넣음 |
| search | 검색할 때 입력하는 필드를 넣음 |
| url | URL 주소를 입력할 수 있는 필드를 넣음 |
| 이메일 주소를 입력할 수 있는 필드를 넣음 | |
| tel | 전화번호를 입력할 수 있는 필드를 넣음 |
| checkbox | 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스 넣음 |
| radio | 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼 넣음 |
| number | 숫자를 조절할 수 있는 스핀 박스 넣음 |
| range | 숫자를 조절할 수 있는 슬라이드 막대 넣음 |
| date | 사용자 지역을 기준으로 날짜(연,월,일) 넣음 |
| month | 사용자 지역을 기준으로 날짜(연,월) 넣음 |
| week | 사용자 지역을 기준으로 날짜(연,주) 넣음 |
| time | 사용자 지역을 기준으로 시간(시,분,초,분할 초) 넣음 |
| datetime | 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초) 넣음 |
| datetime-local | 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 넣음 |
| submit | 전송 버튼 넣음 |
| reset | 리셋 버튼 넣음 |
| image | submit 버튼 대신 사용할 이미지 넣음 |
| button | 일반 버튼 넣음 |
| file | 파일을 첨부할 수 있는 버튼을 넣음 |
| hidden | 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듦 |
⑥ type="text", type="password"
: 텍스트 필드는 아이디, 이름, 주소 등 한 줄짜리 일반 텍스트에 주로 사용하고, 비밀번호 필드는 화면에 입력하는 내용을 보여주지 않아야 해서 *나 ●로 표시된다.
| size | 화면에 몇 글자까지 보이게 할 것인지를 지정함. 이 범위를 넘기면 그 이후는 보이지 않는다. |
| value | 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용. 이 속성을 사용하지 않을 시 빈 텍스트 필드가 표시되며 비밀번호 필드에서는 사용하지 않는 속성이다. |
| maxlength | 텍스트와 비밀번호 필드에 입력할 수 있는 최대 문자 수 지정 |
<form>
<fieldset>
<label>아이디 : <input type="text" id = "user-id" size="10"></label>
<label>비밀번호 : <input type="password" id = "user-pw" size="10"></label>
<input type="submit" value="로그인">
</fieldset>
</form>
⑦ tpye="search", type="url", type="email", type="tel"
: 모두 text 필드를 기본으로 하며, search는 검색을 위한 텍스트 필드, url은 웹 주소 입력 필드, email은 이메일 입력 필드, tel은 전화번호 입력 필드이다.
⑧ checkbox, radio
: 1개만 선택 시 라디오 버튼, 2개 이상은 체크 박스 사용.
| value | 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값 지정. 이 값은 영문이거나 숫자여야 하고 필수 속성이다. |
| checked | 체크 박스나 라디오 버튼 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중 기본으로 선택해 놓고 싶은 항목에 사용한다. 속성값은 따로 없다. |
＊ 라디오 버튼의 name값은 모두 같아야 한다. (선택지에 모두 동일한 name 값으로 지정되어있어야 그 중 하나만 선택받도록 지정할 수 있다.)
⑨ number, range : 숫자 입력 시 사용
- number는 스핀 박스에서 숫자 선택, range는 슬라이드 막대를 움직여 숫자 선택
| min | 입력 가능한 최솟값 설정. 기본 최솟값은 0 |
| max | 입력 가능한 최댓값 설정. 기본 최댓값은 100 |
| step | 숫자 간격 지정 가능. 기본값은 1 |
| value | 필드에 표시할 초기값 |
⑩ date, month, week : 날짜 입력
⑪ time, datetime, datetime-local : 시간 입력