[HTML] 멀티미디어 / 입력 요소

---

#1. 멀티미디어

1. 이미지 넣기

1) image 태그

• <img /> 태그를 사용하여 웹 브라우저 상에 이미지를 보여준다.

※ 사용 가능한 속성

• src : 이미지를 불러올 주소를 입력한다. 절대경로(도메인주소)와 상대경로(이미지파일)가 있다.
• alt : 이미지에 대한 부가 정보 (시각장애가 있는 분들을 위한 정보 기입)
• width : 가로 높이 지정
• height : 세로 높이 지정
  • width 나 height 중 하나만 지정할 경우 나머지 값은 비율에 따라 자동 변경된다.

 <img src="파일경로" width="넓이" height="높이" alt="설명"/>
 <!-- 다른 속성은 생략 가능하지만, src와 alt는 생략하면 안된다. -->

 

2) figure 태그

• <figure></figure> 태그를 사용하여 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 한다.
• figure 태그 안에는 이미지, 오디오 등 여러개를 동시에 포함 시킬 수 있다.
• <figcaption></figcaption> 태그는 해당 이미지, 오디오 등에 대한 설명하는 문구를 담는다.
  • figcaption 태그는 생략해도 되고, 사용시 figure 태그 안에 사용해야 한다.

<figure>
  <img src="파일경로" alt="설명">
  <img src="파일경로" alt="설명">
  <figcaption>제목,설명 등등</figcaption>
</figure>

 

2. 멀티미디어

1) audio 태그

• <audio></audio> 태그를 사용하여 웹 브라우저 상에 오디오 파일을 보여준다.

※ 사용 가능한 속성

• controls : 화면상에 슬라이드바를 포함한 컨트롤러를 표시한다. 
  • 속성을 명시하지 않은 경우 배경음악효과 (아무것도 보이지 않는다)
• loop : 반복재생하게 설정한다.
• autoplay : 자동재생하게 설정한다.
  • 만약 autoplay가 동작하지 않는다면 javascript로 해결해야 한다.

<audio src="파일경로" controls autoplay loop>오디오</audio>

 

2) video 태그

• <video></video> 태그를 사용하여 웹 브라우저 상에 동영상을 보여준다.
• audio 태그 사용에 쓰이는 속성 모두 video 태그에서 사용 가능하다.
  • poster : 비디오를 다운로드 하는 동안이나 사용자가 재생 버튼을 누르기 전까지 비디오 대신 보여줄 이미지를 보여준다.

<video src="파일경로" autoplay controls poster="파일경로">비디오</video>

※ audio, video 태그는 javascript와 함께 사용해서 세세하게 컨트롤할 수 있는 기능을 제공하는 것이 좋다.

 

#2. 입력 요소

1. 입력 양식 영역 만들기

1) form 태그

• <form></form> 태그를 사용해서 입력 양식을 넣을 영역을 지정한다.
• form 태그는 잘 사용하지 않는다. (react, vue, angular의 등장으로 ..)

※ 사용 가능한 속성

• method : 입력값을 백엔드 페이지에게 전송하는 방식 (get, post, put, delete)
• action : 입력값을 전송받을 백엔드 페이지의 URL
  • <input type="submit" /> 속성값을 사용하면 해당 URL로 이동한다.
• enctype : 파일 업로드가 요구될 경우 명시
  • multipart/form-data : 이 속성값이 없으면 백엔드에 발생이 안된다.

<form method="get/post" action="backend-url" enctype="multipart/form-data"></form>

※ 화면 UI를 구성하는 과정에서는 중요하지 않기 때문에 위 속성들은 명시하지 않는 경우가 많다.

 

2) fieldset, legend 태그

• <fieldset></fieldset> 태그를 사용하여 form 태그 안에서 그룹을 지정한다. (테두리선이 생긴다.)
• 필요한 경우에만 사용한다.
• <legend></legend> 태그를 사용하여 fieldset 태그의 제목을 지정한다.

<fieldset>                   ←  그룹의 영역 지정
    <legend>제목</legend>     ←  그룹의 제목을 지정
   	~ 다른 태그 ~
</fieldset>

 

2. 입력 항목

1) input 태그

• <input /> 태그를 사용하여 사용자로부터 사용자 정보(아이디, 패스워드 등) 데이터를 입력받을 수 있는 HTML 태그이다.

※ 사용 가능한 속성

• type : input 태그에서 가장 중요하며, type 속성값에 따라 입력받는 값이 달라진다. → 속성값 따로 설명
• name : name을 같은 이름으로 지정하면 그룹화 할 수 있고, 백엔드에서의 식별자 역할을 한다. (중복가능)
• id : label 태그의 for 속성과 연결하여 사용할 수 있고, CSS/Javascript에서의 식별자 역할을 한다. (중복되면 안된다)
  • name 과 id는 역할이 다르기 때문에 같은 이름으로 지정하는 경우가 많다.
• value : 페이지가 열릴 때 입력되어 있는 기본값을 지정한다. (사용자가 값을 입력하면 값이 바뀐다)
  • 프론트와 백에서 값으로 인식하는건 value 이다.
• placeholder : 입력창에 회색으로 띄워주고, 값을 입력하면 사라진다. (value 속성과 중복사용 x)
• maxlength : 지정한 개수 까지만 입력 가능하게 한다. (글자 수 제한)
• min : type 속성값이 number, range 인 경우 최소값 지정
• max : type 속성값이 number, range인 경우 최대값 지정
• step : type 속성값이 number, range인 경우 올라가는 숫자 크기 지정
• src : type 속성값이 image 형태인 경우 사용
• readonly : 읽기만 가능하고, 수정이 안되게 지정 (클릭 안됨)
• disabled : readonly 속성값과 비슷하지만, form 태그 안에서 summit 했을 때 readonly는 넘어가지만 disabled는 안넘어 간다.
• autofocus : 자동으로 해당 입력창에 입력 가능 상태로 해준다.
• autocomplete : 자동완성 기능을 넣어준다.
• pattern : 입력된 값이 정규식(pattern)에 정의된 문법과 같은지 확인
  • ex) [0-9]{3}-[0-9]{4}-[0-9]{4} : 0~9까지 3자리 - 0~9까지 4자리 - 0~9까지 4자리
• checked : type 속성값이 radio, checkbox인 경우 자동 선택상태로 지정한다.
• require : form 태그의 summit을 하는 순간 반드시 입력해야 값이 입력됐는지 체크한다. (필수 입력 항목 지정)

<input type="종류" name="백엔드에서의 식별자" id="CSS,JS에서의 식별자" value="입력값" />

 

2) type 속성의 속성 값

• text : 일반적인 텍스트를 입력하는 창을 표시한다.
• password : 비밀번호를 입력하는 창을 표시한다. (입력 내용은 " * "로 표시된다)
• checkbox : 체크박스를 표시한다. (중복선택 가능)
• radio : 라디오 버튼을 표시한다. (중복선택 불가능)
• button : 아무 기능이 없는 버튼을 표시한다. (javascript와 연동해서 사용)
• submit : 입력 내용을 백엔드에게 전송하기 위한 버튼을 표시한다.
• reset : 입력 내용을 초기화 시키는 버튼을 표시한다
• image : src 속성에 지정된 이미지 버튼을 표시한다. (submit과 기능이 동일, img 태그는 클릭 이벤트가 안된다.)
• date :  날짜를 선택할 수 있는 창을 표시한다.
• datetime-local : 날짜와 해당 로컬의 시간을 선택할 수있는 창을 표시한다.
• month : 연, 월 까지만 선택하는 창을 표시한다.
• week :  해당연도의 몇번째 주 인지 확인하는 창을 표시한다.
• time : 시, 분을 선택하는 창을 표시한다.
• email : 이메일을 입력할 수 있는 창을 표시한다.
• tel : 전화번호를 입력할 수 있는 창을 표시한다.
• url : 웹 사이트 주소(url 주소)를 입력할 수 있는 창을 표시한다.
• number : 숫자를 입력할 수 있는 창을 표시한다. (min, max, step 등으로 범위 지정 가능)
• range : 범위를 지정할수 있는 slider를 표시한다. (볼륨조절 등)
• search : 검색버튼이 표시되는 입력 창을 표시한다.
• color : 색상을 선택하는 창을 표시한다.
• file : 파일 업로드하는 버튼을 표시한다.
• hidden : 어떤 특정값을 숨겨두고 사용하고 싶을 때 사용한다. (웹상에 출력되지 않는다.)

 

3) button 태그

• <button></button> 태그를 사용하여 버튼을 생성한다. (input 태그의 button 속성값은 잘 사용하지 않는다)
• onclick 속성을 사용하여 클릭했을 때 실행시킨다.

<button onclick="">버튼을 누르세요</button>

 

4) textarea 태그

• <textarea></textarea> 태그를 사용하여 여러줄의 문자열을 입력할 때 사용 한다.(text 속성은 한줄만 입력 가능)

※ 사용 가능한 속성

• cols : 한 줄에 쓸 수 있는 문자 수 (알파벳기준)
• row : 쓸 수 있는 줄의 수

<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 속성으로 cols(가로 30글자), rows(세로 10줄) 지정할 수 있는데 크게 의미 없다 -->

 

5) select 태그

• <select></select> 태그를 사용하여 옵션 종류가 많을 때 값을 선택할 수 있는 창을 보여준다.
• <option></option> 태그를 select 태그 안에 넣어 선택할 값을 나타내준다.

<select name="" id="">
  <option value="값">내용</option>
  <option value="값">내용</option>
  <option value="값">내용</option>
</select>​

 

6) datalist 태그

• <datalist></datalist> 태그를 사용하여 입력창에 자동완성 처럼 정보를 띄워준다.
• <option></option> 태그를 datalist 태그 안에 넣어 선택할 값을 나타내준다.
• input 태그의 list 속성과 datalist의 id 속성을 연결하여 사용한다

<input list="browsers" />
<datalist id="browsers">
  <option value="IE"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Safari"></option>
</datalist>

 

7) label 태그

• <label></label> 태그를 사용하여 input 태그 앞에 이름을 붙여준다.
• label 태그의 for 속성과 input 태그의 id 속성을 연결하여 사용한다. (label 부분을 클릭해도 활성화 된다.)

<label for="userName">사용자이름</label>
<input type="text" name="userName" id="userName" />

<!-- id, for 삭제 후 input type 내용을 label 안에 넣어서도 사용 가능 -->
<!-- 실무에서는 이 방법이 많이 쓰인다고 한다. -->
<label>
  <input type="종류" name="식별자1" id="식별자2" />
  텍스트
</label>