1. Form
🎈 <form></form>
<form action="API주소" method="GET|POST"></form>사용자로부터 어떤 정보나 데이터를 받기 위한 태그이다. `<form>`을 사용할 때는 브라우저에게 알려줘야 한다.
주의해야할 것은 사용자로부터 무엇인가를 받고 그것을 처리하는 과정도 같이 들어가야 한다는 점이다.
1) attribute
👉🏻 action
`<form>`을 작성했을 때 `input`값을 가지고 전달을 해줘야 하는 `action`이다. 처리할 로직을 API 서버쪽에게 접근 가능한`URL`을 작성을 해야 한다. 백엔드에서 `<form>`을 로직을 담은 서버 쪽 코드를 만들어 놓은 접근할 수 있는 경로를 `action`값에 넣어주면 된다.
👉🏻 method
서버쪽에서 긴밀하게 연결되어져 있어 서버에서 어떻게 처리할지 방법을 선택하는 속성이다.
- GET : 단순히 정보를 읽고 싶을 때 쓴다.
- POST : 중요한 정보가 있거나 정보의 양이 엄청 많을 때 쓴다.
2. Form - input
🎈 <input/>
데이터를 받을 때 필드를 생성할 때 사용하는 기본적인 태그이다. `type` 속성을 반드시 작성해야 한다.
1) attribute
- type
👉🏻 text
<form action="" method="GET">
<input type="text" placeholder="아이디를 입력하세요." minlength="5" maxlength="13" required />
<input type="text" placeholder="아이디를 입력하세요." minlength="5" maxlength="13" disabled />
<input type="text" placeholder="아이디를 입력하세요." minlength="5" maxlength="13" value="김버그" />
<input type="text" placeholder="이름을 입력하세요." />
<button>Submit</button>
</form>
모든 텍스트를 다 받을 수 있는 기본형태이다.
👉🏻 email
<form action="" method="GET">
<input type="email" placeholder="이메일을 입력하세요." />
<button>Submit</button>
</form>
이메일(@)로 적지 않으면 서버에 보내기 전에 미리 유효성 검사를 해주게 한다.
👉🏻 password
<form action="" method="GET">
<input type="password" placeholder="비밀번호를 입력하세요." minlength="5" maxlength="12"/>
<button>Submit</button>
</form>
텍스트 필드에 입력하는 비밀번호가 보이지 않은 타입니다.
👉🏻 url
<form action="" method="GET">
<input type="url" placeholder="포트폴리오 url을 입력하세요." />
<button>Submit</button>
</form>url을 넣어주는 타입니다. 이상한 url을 입력하면 경고가 노아게 된다.
👉🏻 number
<form action="" method="GET">
<input type="number" min="12" max="122" placeholder="나이를 입력하세요.(12세 이상 122세 이하)"/>
<button>Submit</button>
</form>숫자를 입력하는 타입이다.
👉🏻 file
<form action="" method="GET">
<input type="file" accept=".png, .jpg"/>
<button>Submit</button>
</form>
파일을 첨부하는 타입니다.
- *placeholder
사용자가 어떠한 값도 입력하지 않을 때 기본적으로 안내 문구를 알려 줄 때 사용하는 속성이다.
- *minlength
텍스트 필드에 작성할 수 있는 문자의 최솟값을 제한하기 위한 속성이다.
- *maxlength
텍스트 필드에 작성할 수 있는 문자의 갯수를 제한하기 위한 속성이다.
- *required
텍스트 필드에 무조건 입력해야 되는 속성이다.
- *disabled
사용자가 입력값을 사용하지 못하게 막아주는 속성이다.
- *value
아무것도 입력하지 않아도 초기값을 설정하는 속성이다. placeholder와 비슷한 속성이지만 placeholder는 복사가 불가능하다.
- min
숫자를 이하 일때 쓰는 속성이다.
- max
숫자를 이상 일때 쓰는 속성이다.
- accept
특정 파일의 확장자를 정할 때 쓰는 속성이다.
3. Form - label
🎈 <label></label>
<label for="인풋id">라벨</label>
<input type="text" id="인풋id" />특정 케이스 빼고는 부가적인 태그라 반드시 사용하지 않아도 된다. 폼 양식에 이름을 붙이는 태그이다. 어떠한 `input`과 관련되어 있는지에 대해 반드시 연결을 시켜줘야 하는데 그 때 `for`이라는 속성을 작성해야 된다.
1) attribute
- for
<h1>
회원가입
</h1>
<form action="#" method="POST">
<label for="user-name">이름</label>
<input type="text" id="user-name" required placeholder="이름">
<label for="user-id">아이디</label>
<input type="text" id="user-id" required placeholder="아이디" minlength="5" maxlength="10">
<label for="user-password">비밀번호</label>
<input type="text" id="user-password" required placeholder="비밀번호" minlength="6" maxlength="12">
<label for="user-email">이메일</label>
<input type="text" id="user-email" required placeholder="이메일">
<label for="user-tel">전화번호</label>
<input type="text" id="user-tel" required placeholder="전화번호" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
<label for="user-age">나이</label>
<input type="text" id="user-age" required placeholder="만 나이" min="12" max="122">
<label for="user-profile-picture">프로필 사진</label>
<input type="text" id="user-profile-picture" required accept="image/*, audio/*, video/*">
<button type="submit">
가입하기
</button>
</form>
누구를 위한 `<label>`인지 적어줘야 한다. 라벨을 클릭하면 자동으로 텍스트 필드에 커서가 깜빡 거린다.
4. Form - Radio & Checkbox
Radio와 Checkbox는 반드시 `name`와 `value`를 작성해야 한다.
1) attribute
- *type
👉🏻 radio
<form action="#" method="GET">
<input type="radio" name="subscription" value="1" id="subscribed">
<label for="subscribed">구독중</label>
<input type="radio" name="subscription" value="0" id="unsubscribed">
<label for="unsubscribed">미구독</label>
<input type="radio" name="apple" value="1" id="apple">
<label for="apple">사과</label>
<input type="radio" name="apple" value="0" id="unapple">
<label for="unapple">안사과</label>
<button type="submit">Submit</button>
</form>
여러 항목 중에서 하나만 선택 가능한 버튼 타입이다.
👉🏻 checkbox
<h1>사용 가능 언어</h1>
<form action="">
<input type="checkbox" name="skills" value="html" id="html">
<label for="html">HTML</label>
<input type="checkbox" name="skills" value="css" id="css">
<label for="css">CSS</label>
<input type="checkbox" name="skills" value="js" id="js">
<label for="js">Javascript</label>
<button type="submit">
Submit
</button>
</form>
여러 항목 중에서 다중 선택 가능한 버튼 타입이다.
- name
`name`을 동일하게 설정을 해줘야 연관이 되어 있다는 거를 알 수 있다. 둘 중에 하나 선택이 가능할 수 있다.
`name` 속성을 쓰지 않으면 두개 다 선택이 가능한 거 볼 수 있다.
- value
항목 선택해서 서버에게 전달할 때 어떤 항목이 선택이 되었는지에 대해서 구분시켜주기 위해 각각 다른 값을 값을 설정해주는 속성이다. 값을 구분만 할 수 있다면 0과 1로 변경해도 된다.
5. Form - Select & Option
🎈 <select></select>
<form action="" method="GET">
<label for="skill">스킬<label>
<select multiple name="skill" id="skill">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
<button type="submit">Submit</button>
</form>
Dropdown List를 만들기 위해 사용하는 태그이다.
1) Attribute
- name
같은 그룹에 있다는 걸 반드시 알려주는 속성이다.
- multiple
여러 가지 선택을 할 수 있는 속성이다.
🎈 <option></option>
Dropdowm List의 List를 만들기 위해 사용하는 태그이다.
- value
`<select>`에 `name` 속성값을 줘도 `<select>`안에 `<option>`이 있으니까 `value`들이 누구를 위한 값인지 알 수 있다. 각각의 옵션 형태를 서로 구분 할 수 있게 각각 값을 준다.
6. Form - Textarea
🎈 <textarea></textarea>
<label for="field">자기소개</label>
<textarea id="field" cols="30" rows="3" placeholder="자기소개를 입력하세요."></textarea>
많은 양의 글을 쓸 때 사용하는 태그이다.
1) Attribute
- cols
가로로 길어지는 속성이다.
- rows
세로로 길어지는 속성이다.
7. Form - Button
🎈 <button></button>
<button type="button">
버튼
</button>
<form action="">
<input type="text">
<button type="submit">제출하기</button>
<button type="reset">다시쓰기</button>
</form>
버튼을 사용할 때 쓰는 태그이다.
1. attribute
- *type
- button : 가장 무난하게 많이 쓰이는 타입이다.
- submit : form을 제출하는 용도로 많이 쓰는 타입이다.
- reset : 입력한 값을 리셋하는 용동에 사용하는 타입이다.
8. 표 Table
🎈 <table></table>
<table>
<tr>
<th>테이블 헤더</th>
<td>테이블 데이터</td>
</tr
</table>
데이터를 담은 표를 만들 때 사용하는 태그이다. 테이블을 만들 거라고 시작을 알리는 태그이다.
🎈 <thead></thead>
<table>
<thead>
<tr>
<th>ID</th>
<th>이름</th>
<th>개발분야</th>
<th>기타</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>김버그</td>
<td>프론트엔드</td>
<td></td>
</tr>
<tr>
<td>0002</td>
<td>롬이</td>
<td>프론트엔드</td>
<td></td>
</tr>
</tbody>
<tfoot>
<td>요약</td>
</tfoot>
</table>
테이블의 헤더를 좀 더 명확하게 마크업 해주기 위해 `<th>`를 감싸서 `<thead>`로 마크업 해준다.
🎈 <tr></tr>
가로 줄에 넣고자 하는 셀들을 넣어주는 태그이다.
🎈 <th></th>
테이블의 헤더를 나타내는 태그이다.
1. attribute
- scope
👉🏻 row : 이 행의 head라는 명확하게 마크업을 해준다.
👉🏻col : 이 열의 head라는 명확하게 마크업을 해준다.
🎈 <tbody></tbody>
테이블에 대한 데이터를 좀 더 명확하게 마크업 해주기 위해 `<td>`를 감싸서 `<tbody>`로 마크업 해준다
🎈 <td></td>
테이블의 데이터를 넣는 태그이다.
`<th>`에 대한 데이터가 없더라도 개수에 맞춰서 `<td>`를 꼭 넣어줘야 된다.
1) attribute
- rowspan
병합할 행의 개수를 표현하는 속성이다.
- colspan
병합할 열의 개수를 표현하는 속성이다.
🎈 <tfoot></tfoot>
마지막 줄에 영수증 같은 총합계의 요약이 되는 부분을 좀 더 명확하에 `<tfoot>`로 마크업 해준다.
9. 미디어 파일 Media
🎈<audio></audio>
<audio src="./assets/audios/kimbug.mp3" controls></audio>
오디오 음성파일을 넣고 싶을 때 사용하는 태그이다.
https://caniuse.com/
1) attribute
- controls
재생버튼이나 음향을 조정하고 싶을 때 사용하는 속성이다.
- autoplays
`controls` 표시하지 않고 페이지에 들어가자마자 소리가 자동으로 재생할 때 사용하는 속성이다.
- loop
반복 재생하는 속성이다.
🎈 <source></source>
<audio controls>
<source src="./assets/audios/kimbug.wav" type="audio/wav">
<source src="./assets/audios/kimbug.mp3" type="audio/mpeg">
<source src="./assets/audios/kimbug.ogg" type="audio/ogg">
</audio>
`type` 속성을 반드시 명시해야 한다. 오디어 파일 중 지원되지 않는 포맷이 있을 경우 다른 확장자의 파일로 넣어준다. `<source>`를 독립적으로 쓰기도 한다.
🎈 <video></video>
<video src="./assets/videos/kimbug.mov" controls></video>
<video controls>
<source src="assets/videos/kimbug.mov" type="video/mp4">
<source src="assets/videos/kimbug.mp3" type="video/mp4">
</video>
HTML 문서에 비디오 파일을 첨부할 때 사용하는 태그이다.
🎈 <iframe></iframe>
HTML 문서에 또 다른 문서를 삽입할 수 있는 임베드 태그이다. 보통 쓸 일은 없는데 youtube나 트위터에서 사용자한테 공유하고 싶을 때 사용한다
10. Etc.
🎈 <abbr></abbr> (abbreviation)
<p>너... 혹시 <abbr title="Attention Deficit Hyperactivity Disorder">ADHD</abbr>?</p>
약자, 약자를 나타낼 때 사용하는 태그이다. 마우스 오버하면 풀네임이 보인다.
🎈 <address></address>
<address>
<h1>
김버그
</h1>
<a href="https://youtube.com/c/kimbug">https://youtube.com/c/kimbug</a>
</address>
연락처에 관한 정보를 마크업 하기 위한 태그이다.
- 연락망의 예시
👉🏻 (물리적)주소
👉🏻 URL
👉🏻 email 주소
👉🏻 전화번호
👉🏻 SNS
🎈 <pre></pre> (preformatted text)
<pre>
ㅇ ㅏ ㄴ ㅕ ㅎ ㅏ ㅅ ㅔ ㅇ
ㄴ ㅇ ㅛ
</pre>
포맷이 정해져 있는 태그이다. 코드에 작성된 대로 그래도 출력해주는 마크업 태그이다.
🎈 <code></code>
<code>
console.log('hello rom');
</code>
코드를 작성할 때 사용하는 태그이다. 코드가 2줄 이상일 경우 `<pre>`안에 `<code>`작성하면 좋다.