#id, class
먼저
id와class의 기능과 차이점에 대해서 알아야 한다. 앞의 글에서도 중간중간 나왔지만 html에서 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명(class)혹은 아이디값id을 할당하여 처리가 가능하다.가장 큰 차이점은
class는 여러 요소에 중복 적용이 가능하고,id는 전체 문서에서 단 하나의 요소에만 적용이 가능하다.이외에도
id는 아이디값 앞에#을,class는 클래스값 앞에.을 붙이는것으로 불러올 수 있다.
- HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다.
하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생하기 때문에, 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.#
<span>태그인라인 요소들을 묶을 때 사용. class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유할 때 유용함.
<div>요소와 매우 비슷하게 사용되지만,<div>요소는 블록 타입의 요소고<span>요소는 인라인 타입의 요소다.#
<source>태그
<source>요소는 미디어 타입이나 코덱의 지원여부, 미디어 쿼리에 따라 브라우저가 선택할 수 있는 대체 비디오/오디오/이미지 파일을 명시할 수 있게 한다.
HTML 폼(Form)
폼(form)
로그인, 회원가입, 구글 폼 등, 사용자에게서 데이터를 입력받기 위해 사용하는 형식. 입력받는 데이터들을 묶을 폼(form)이라 하고, 그 데이터를 폼 데이터(Form data), 또는 필드(Field)라고 한다.
<form>태그를 이용하며action속성과method속성이 있다.
form의 속성
<form> 태그로 시작하며 여러 속성을 가지고 있다.
-
action="(URL)"
: 폼 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시함. -
method="GET / POST"
: 폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시함.
| GET | POST |
|---|---|
URL 뒤에 ?를 붙이고 그 뒤에 폼 데이터를 추가하여 서버로 전달 | 폼 데이터를 별도로 첨부하여 서버로 전달 |
| 브라우저에 의해 캐시되어(cached) 저장 | 브라우저에 의해 캐시되지 않음 -> 브라우저 히스토리에도 남지 않음 |
| 보통 쿼리 문자열(query string)에 포함되어 전송 | HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송 |
| 길이에 제한이 있고 보안상 취약점 존재 | 데이터의 길이에 제한이 없고 GET방식보다 보안성 높음 |
-
name="(이름)"
: 해당 폼의 이름을 명시. 서버로 제출된 폼 데이터를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용. -
autocomplete="on / off"
: autocomplete 속성값을 on으로 명시하면, 사용자가 이전에 썼던 내용을 기반으로 글을 자동완성 시켜줌.
form 안에서 쓰는 태그
-입력
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>form</title> </head> <body> <h1>Join form</h1> <form action="#" method="post"> <fieldset> <legend>필수 사항</legend> <p> <label for="username">Name:</label> <input type="text" id="username" required> </p> <p> <label for="useremail">Email:</label> <input type="email" id="useremail" required> </p> <p> <label for="userpw">Password:</label> <input type="password" id="userpw" required> </p> </fieldset> <fieldset> <legend>옵션 사항</legend> <p> <label for="address">주소</label> <select name="address" id="address"> <option value="서울">서울</option> <option value="경기">경기</option> <option value="제주">제주</option> </select> </p> <p> <label for="mail">남성</label> <input type="radio" name="gender" id="mail" value="남성"> <label for="femail">여성</label> <input type="radio" name="gender" id="femail" value="여성"> </p> <p> <span>관심사항</span> <label for="HTML">HTML</label> <input type="checkbox" name="interest" id="HTML" value="HTML"> <label for="CSS">CSS</label> <input type="checkbox" name="interest" id="CSS" value="CSS"> <label for="javascript">javascript</label> <input type="checkbox" name="interest" id="javascript" value="javascript"> </p> <p> <label for="message">인사말</label> <textarea name="mess" id="message" cols="30" rows="10"></textarea> </p> <p> <label for="profile">이미지 등록</label> <input type="file" id="profile" name="profile"> </p> </fieldset> <hr> <fieldset> <legend>HTML 5 Type</legend> <p> <label for="website">웹사이트</label> <input type="url" name="website" id="website" required> </p> <p> <label for="birth">생년월일</label> <input type="date" name="birth" id="birth"> </p> <p> <label for="langs">학습할 언어 선택</label> <input id="langs" name="langs" list="mylist"> <datalist id="mylist"> <option value="html"> <option value="css"> <option value="jsscript"> <option value="jQuery"> </datalist> </p> <p> <label for="carrer">경력기간</label> <input type="number" name="carrer" id="carrer" min="0" max="20" step="2"> </p> <p> <label for="languages">학습할 언어 선택</label> <select name="" id="languages"> <optgroup label="frontend"> <option value="HTML">html</option> <option value="css">css</option> <option value="javascript">javascript</option> </optgroup> <optgroup label="backend"> <option value="php">php</option> <option value="jsp">jsp</option> <option value="asp">asp</option> </optgroup> </select> </p> </fieldset> <p> <input type="submit" value="가입하기"> <!-- <input type="image" src="images/iconfinder_tick_red_619540.png" alt="가입하기"> --> <!-- <button> <img src="images/iconfinder_tick_red_619540.png" alt="가입하기"> </button> --> </p> </form> </body> </html>
-출력
-
<input>태그
: 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 선언하기 위해<form>요소 내부에서 사용되고, 이러한 입력 필드는<input>요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있다. 어떤것을 입력받는건지 구분하기 위해 앞에<label>태그를 사용해야 한다.<input type="(기본값 : text)" id=""> -
<label>태그
: 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용.
for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때<label>요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다.
또한,<label>요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있다.사용가능한 요소
<button>,<input>,<select>,<textarea> -
<fieldset>태그
:<form>요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용.
하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려준다.
태그 안에<legend>태그로 이름을 붙여줄 수 있다. -
<select>태그
: select는 사용자가 직접입력하는것이 아닌 선택지중에서 선택하게 해주는 태그다. 내부에<option>태그로 선택지 추가가 가능하다.
name속성에 저장될 내용을 value="(저장될 내용)"처럼 쓸수있다.<option>들을 묶어서 보고싶을 때는
<optgroup label="(옵션들의 이름)">...옵션들...</optgroup>
Ex.
<p>
<label for="languages">학습할 언어 선택</label>
<select name="#" id="languages">
<optgroup label="frontend">
<option value="HTML">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</optgroup>
<optgroup label="backend">
<option value="php">php</option>
<option value="jsp">jsp</option>
<option value="asp">asp</option>
</optgroup>
</select>
</p>+ select처럼 선택지를 보여주긴 하지만 사용자가 입력도 할 수 있게하려면
<input>태그 사용 후 태그 안에 list="(리스트 이름)" 을 쓰고 따로<datalist>라는 태그를 만들어서<datalist id="(리스트 이름)">을 쓰고 태그 안에 option들을 value와 함께 넣어주면 된다.*
<datalist>태그는 지원하지 않는 브라우저도 있기 때문에 [caniuse.com]에서 지원 유무를 확인할 수 있다._
-
<textarea>태그
: 여러 줄의 텍스트를 입력받는 영역을 생성한다.<input>태그의 기능과 유사하지만 더 많은 내용을 입력할 수 있다.
cols: 가로로 입력 가능한 글자 수
row: 세로로 입력 가능한 글자 수<textarea name="" id="" cols="" rows=""></textarea>
비디오(Video), 오디오(Audio)
비디오(Video), 오디오(Audio)
<video>태그는 무비 클립(movie clip)이나 비디오 스트림(video stream)과 같은 비디오를 정의할 때 사용하고,
<audio>태그는 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용한다.
| 비디오 | 오디오 | |
|---|---|---|
| 지원하는 파일 포멧 | MP4, WebM, Ogg | MP3, WAV, Ogg |
공통 속성
공통으로 가지고 있는 속성
- autoplay
오디오/비디오가 실행될 준비가 끝나는 대로 자동으로 실행- controls
플레이 버튼이나 정지 버튼과 같이 오디오/비디오의 실행을 제어할 수 있는 제어기 생성- muted
오디오/비디오의 음성 출력이 음소거됨- src
오디오/비디오 파일의 위치(URL)를 명시
<source src="(URL)" autoplay controls muted type="">
오디오일 때: type="audio/(mp3,ogg)"
비디오일 때: type="video/(mp4,webm,ogg)"비디오의 추가 속성
- 추가로 비디오는
poster를 이용해서 영상의 썸네일을 지정할 수 있고(사용하지 않으면 영상의 첫번째 장면으로 자동표기),
height,width를 이용하여 각각 영상의 높이와 너비를 조정할 수 있다.
하지만<img>태그를 사용할때와 같은 이유로<video>태그에서 직접 사이즈 조정하지 않는다.
<video src="" controls poster="(이미지 파일)">