HTML
두 번째 시간입니다.
멀티미디어와 입력에 대해서 배워보도록 하죠 !!
HTML5부터는 <audio> <video> 태그를 추가 했답니다. 편리해졌죠.
오디오(음악)을 넣고 싶으다면
<audio src="xxx.mp3" autoplay controls> 태그 형식으로 써주시면 됩니다.
-src: 소스파일
-autoplay: 자동 재생
-controls: 화면에 제어기 보이기
-loop: 오디오 반복 재생
-volume: 재생 볼륨 설정(0.0~1.0)
-preload: 오디오 미리 다운로드(의지와 상관없이)
위에서 src대신 <source>태그를 사용해서 아래와 같이 표현해도 됩니다.
<audio ~~>
<source src="xxx.mp3" type="audio/mp3">
</audio>
비디오를 넣고 싶으다면 오디오 태그와 같습니다.
<video src="xxx.mp4" autoplay controls>
-src: 소스파일
-autoplay: 자동 재생
-controls: 화면에 제어기 보이기
-loop: 비디오 반복 재생
-volume: 재생 볼륨 설정(0.0~1.0)
-preload: 비디오 미리 다운로드(의지와 상관없이)
-poster: 비디오 다운로드 중일때 표시 이미지
-muted: 비디오의 소리 출력 중지
-width,height: 비디오 재생기 너비 높이
마찬가지로 <source>태그를 이용 할 수 도 있습니다.
<video ~~>
<source src="xxx.mp4" type="video/mp4">
</video>
만약에 웹페이지 안에 다른 웹페이지를 표현 해야 할 때가 있습니다.
그럴 때는 iframe을 사용합니다.
이렇게 쓴다면 inner.html으로부터 읽어서 표시합니다. 실행결과는 아래와 같습니다.
중요한 요소로 블록 요소가 있습니다. 이것은 페이지를 블록별로 나눌때 사용합니다. 메뉴 부분, 기사 부분, 로그인창 부분
등으로 나눌 때 굉장히 유용하게 쓰일 수 있는 태그죠.
바로 <div> 태그입니다.
<div style="border: 3px solid red">
내용
</div>
style 속성에서 경계선을 3px두꼐 빨간색 선으로 표시합니다.
로그인을 하거나 할때 입력 양식들이 있습니다. 즉 입력을 하기 위한 창이 있죠
이 태그는 바로 <form> 태그입니다.
즉 고객이 서버로 전달 방식에는 get 방식과 post 방식이 있습니다. 위의 사진은 POST방식이구요.
GET방식은 흔히 주소 뒤에 변수들이 붙는 방식입니다. 보안상 문제가 있을수도 있어요.
POST방식은 URL 주소에 변수들을 붙이지않고 헤더에 포함시켜서 보냅니다.
보안을 유지할 수 있고 길이 제한이 없어요.
입력 태그는 아래와 같습니다.
<input type="속성" value="글" name="이름"/>
속성은
*type
-text: 텍스트 입력
-password: 비밀번호 입력 필드
-radio: 라디오 버튼
-checkbox: 체크박스
-file :파일 이름 입력 필드
-reset: 초기화 버튼
-image: 이미지 전송 버튼
-hidden: 서버로 전송(보이지 않음)
-submit: 제출 버튼 생성
-number: 숫자 입력
-range: 범위 지정 (min~max)
-date: 날짜 입력
-color: 색상 입력
*value: 버튼에 보여지는 글입니다.
*name: 서버로 전송되는 이름입니다.
<button type="button" onclick="alert('안녕하세요?')">눌러보세요!</button>
input의 버튼 타입은 위와 같이 사용 할 수 있어요.
여러 줄의 텍스트를 입력 받을 때는 <textarea> 태그를 사용합니다.
<textarea name="이름" rows="5" cols="50"></textarea>
rows와 cols은 행과 열 길이 조절입니다.
메뉴를 표시하여 사용자에게 선택하게 만들기 위해서는 <select>태그를 사용합니다.
즉 누르면 여러개 뜨고 그중에서 선택하는 형태입니다.
selected 속성은 선택된 형태로 사용자에게 우선적으로 보여집니다.
아래는 결과입니다.
<fieldset> 태그는 입력 요소를 그룹핑 하는데 사용 됩니다.
<legend> 태그는 그룹에 제목을 붙입니다.
<label> 태그는 입력 요소의 레이블을 정의합니다. (o는 체크박스)
<label for="male">남성</label>
<input type="radio"~~~~~/>
남성 o
그리고 회원가입 형식을 만들 때 이메일 주소를 입력받게 할 수 있습니다.
이때 자동으로 이메일 주소 형태인지 아닌지 판단해줍니다.
input 태그를 사용 할 때 속성에 email을 사용 하시면 됩니다.
간단한 이메일 작성 예제를 보시죠.!!
아래는 결과입니다.
'웹 > HTML과 CSS' 카테고리의 다른 글
| CSS 본격 들어가기(2) (0) | 2018.08.17 |
|---|---|
| CSS 본격 들어가기(1) (0) | 2018.08.13 |
| HTML 본격 들어가기(1) (0) | 2018.08.08 |
| CSS란? (0) | 2018.08.04 |
| HTML이란? (0) | 2018.08.03 |
