오디오, 비디오
- <audio src="pop.mp3" autoplay controls> : pop.mp3 오디오 자동재생. 컨트롤바 보임
- <audio><source src="pop.mp3" type="audio/mp3"></audio>
- 브라우저마다 탑재된 코덱(codec, 압축/해제 알고리즘)이 다르기 때문에 재생할 수 있는 미디어 차이 있음
- <video src="movie.mp4" autoplay controls> : 비디오. 소스태그도 사용 가능.
iframe
- 웹페이지 내에서 다른 웹페이지를 표시하고자 할 때 주로 사용
- <iframe src="inner.html" width="300" height="120"></iframe>
div/span
- <div></div> : divide의 약자로 논리적인 섹션을 구분하고자 할 때 사용.
- div는 자체로 특별한 의미가 없고, 블록 수준의 요소이기 때문에 한 줄을 전부 차지. 반응형 웹에 자주 쓰임.
- <span></span> : 인라인 요소로 텍스트를 위한 컨테이너로 사용. 필요한 크기만큼만 공간 차지.
HTML 입력폼 (form)
- 사용자로부터 데이터를 받아 서버로 전달하는 데 사용
- 1. 입력폼에 데이터를 입력하여 서버로 보냄
2. 서버는 입력폼을 받아 서버 스크립트(ex JSP)로 전달
3. 서버 스크립트는 데이터를 처리/판단하여 새로운 웹페이지 생성
4. 입력에 대한 응답으로 새로운 웹페이지 전달
- <form action="input.jsp" method="post"> <input../> </form>
- GET방식 : URL 주소 뒤에 파라미터를 붙여 데이터를 전달하는 방식으로, 보안이 되지 않아 거의 사용하지 않음
- URL 해석 참고 링크 : https://dencode.com/
- POST 방식 : 데이터를 URL 주소에 포함하지 않고 HTTP Request 헤더에 포함하여 전송.
캐시나 브라우저 히스토리가 남지 않고 북마크 불가능.
- input 요소를 잘 활용할경우 하나하나 정규식으로 오류체크 해야하는 요소를 줄여줌.
- form 요소 참고 : https://www.w3schools.com/html/html_form_elements.asp
HTML Form Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Q. 아래 결과와 같이 html 코드를 작성
A.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <html> <head> <title>예제</title> <meta charset="UTF-8"> </head> <body> <form> <fieldset> <legend>카드 정보 입력</legend> <ol> <li> <fieldset> <legend>카드 타입</legend> <ol> <li> <input id="visa" name="cardtype" type="radio"> <label for="visa">VISA</label> </li> <li> <input id="amex" name="cardtype" type="radio"> <label for="amex">Amex</label> </li> <li> <input id="mastercard" name="cardtype" type="radio"> <label for="mastercard">Mastercard</label> </li> </ol> </fieldset> </li> <li> <label for="cardnumber">카드 번호 :</label> <input id="cardnumber" name="cardnumber" type="number" required> </li> <li> <label for="secure">CRC 번호 :</label> <input id="secure" name="secure" type="number" required> </li> <li> <label for="namecard">소유자이름 :</label> <input id="namecard" name="namecard" type="text" placeholder="카드 상의 이름" required> </li> </ol> </fieldset> <fieldset> <button type="submit">구매</button> </fieldset> </form> </body> </html> | cs |
'study > HTML5' 카테고리의 다른 글
| CSS 문법과 박스 모델 (0) | 2022.06.27 |
|---|---|
| HTML에서 많이 사용하는 기본 태그 (0) | 2022.06.21 |
| HTML5 개요 - 문서 구조와 웹브라우저 (0) | 2022.06.20 |
댓글