다시 시작하는 HTML😆
Form(4) Select & Option
<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">제출</button>
</form>문법 주의! input type radio & checkbox와 동일하게 'name=value' 형태로 서버에 정보를 전달한다. name과 value attribute를 꼭 사용하기!
어떤 form과 관련되어 있는지 지칭하고 option들의 이름을 명시하기 위해 label 태그를 사용하고,
'label 태그의 for 속성'과 'select 태그의 id 속성'이 동일해야 한다.
option들 중 여러개의 option을 선택하려면 select 태그에 multiple이라는 속성을 추가하면 된다.
(Mac의 경우 commad, Window의 경우 ctrl 눌러 다중 선택 가능)
😚 추가로 궁금한 점❗
Q. name 속성값과 id 속성값을 동일하게 작성해도 될까❓
A. 두 속성은 용도가 다르기 때문에 문법적으로 전혀 문제되지 않는다.
name : 해당 form 요소에 입력된 값(value)을 서버로 전송하기 위해 "어떤 이름으로" 부를지에 대한 부분
id : HTML 페이지에서 해당 요소에 대한 고유 식별자를 지정(css에서 태그 선택 시 사용)
동일하게 설정해도 무관하나 헷갈릴 수 있고 코드의 가독성을 위해 조금은 형식을 다르게 설정하는 것을 권고한다.
<select name="animal">
<optgroup label="dog">
<option value="dalmatioan">달마시안</option>
<option value="samoyed">사모예드</option>
</optgroup>
<optgroup label="cat">
<option value="persian">페르시안</option>
<option value="ragdoll">렉돌</option>
</optgroup>
</select>select 태그의 자식요소는 option 외에 option들을 그룹핑하는 optgroup가 있다.
관련있는 option끼리 optgroup으로 그룹핑하고 label 속성을 사용해 라벨을 적어주면 된다.
Form(5) Textarea
여러 줄에 걸쳐 많은 양의 글을 입력할 때 사용하는 태그(ex. blog post)
(input type text로는 많은 양의 글을 입력할 수 없음)
<label for="field">자기소개: </label>
<textarea id="field" placeholder="자기소개를 작성하세요"></textarea>Form(6) Buttons
문법 주의! type attribute를 반드시 작성해야 한다!
type의 속성값으로는 button, submit, reset이 있다.
form을 제출하는 용도로 submit 속성값을 쓴다.
그 외에 용도로 웬만하면 button 속성값을 쓴다.
<button type="button">버튼</button>
<button type="submit">제출하기</button> // 버튼 이름은 태그 꺽쇠 사이에 작성
<button type="reset">다시쓰기</button> // 거의 사용x표(Table)
데이터를 담은 표를 만들 때 사용한다.
가로 행을 기준으로 몇 개의 셀(칸)이 들어가는지 먼저 살피고, 행 안에 셀이 제목인지 데이터인지 구분한다.
※ 기본구조
<table>
<tr> // table row(행)
<th>테이블 헤더</th> // table header
<td>테이블 데이터</td> // table data
</tr>
</table>✨tr의 자식요소 td는 셀 제목(th) 갯수만큼 작성해야 한다.
tr 안에 th와 td를 함께 사용할 수도 있다!
thead는 th 태그들을 감싸주는 형태로 th 태그가 테이블의 제목임을,
tbody는 td 태그들을 감싸주는 형태로 td 태그가 테이블의 데이터임을,
tfoot은 테이블에서 총 합계 등을 나타낼 때 사용하며,
브라우저가 테이블 구조의 의미를 더 명확하게 알 수 있도록 해주고 가독성을 높여준다. (필수는 아니지만 '의미를 부여하고 구조화 해줌으로' 선생님께서 권장)
<table>
<thead>
<tr> // 첫번째 행(셀 제목)
<th>ID</th>
<th>이름</th>
<th>개발분야</th>
</tr>
</thead>
<tr> // 두번째 행(셀 데이터)
<td>day6_03</td> // ID
<td>Brian</td> // 이름
<td>write lyrics</td> // 개발분야
</tr>
<tr>
<td>myday_01</td>
<td>ylyl</td>
<td>프론트엔드</td>
</tr>
</table><셀을 병합할 때 사용하는 td 태그 속성>
<tr>
<td rowspan="2">Show me the money</td>
<td>Kingdom</td>
</tr>
<tr>
<!-- <td></td> --> // 위 행에서 아래 행의 셀의 영역까지 설정했으므로 생략
<td>Legendary War</td>
</tr>rowspan: 아래 셀(동일한 열)과 병합 (ex. 2칸을 병합: rowspan="2")
colspan: 옆 셀(동일한 행)과 병합 (ex. 6칸을 병합: colspan="6")
※ rowspan 사용할 시 주의할 점!
이미 위에서 rowspan을 통해 아래 칸의 영역까지 지정했기 때문에 병합된 칸이 포함된 다른 행에서는 td를 생략해야 한다! 😲
생략하지 않는다면 칸이 밀려 이상한 테이블 구조가 되버린다.😑
(+ㄷ '&'라고 작성하면 브라우저가 이해하지 못할 수 있기 때문에
escape code인 '$amp;' 라고 작성한다.)
scope="row | col"
가로 행의 제목인지 세로 열의 제목인지 브라우저가 범주의 영역을 명확하게 이해하기 위해 th 태그에만 사용 가능한 attribute (user에게 보여지는 것은 동일함)
browser에게 정확한 정보 전달을 하는 것, 추가로 일반 스크린 리더나 다른 도구를 이용해 웹을 이용하는 사용자들에게 table 내의 정보들의 관계성을 더 명확하게 파악할 수 있기 때문에 도움이 된다!
<tr>
<th></th> // 빈칸
<th scope="col">월</th> // 세로줄의 header임을 명확하게 명시
<th scope="col">화</th>
</tr>
<tr>
<td scope="row">1교시</td> // 가로줄의 header임을 명확하게 명시
<td>수학</td>
<td>과학</td>
</tr>미디어(Media) 파일 embed
Φ 공통 속성
controls : 미디어를 재생하기 위한 재생 바 생성 (없으면 재생/정지 버튼 포함한 재생 바 자체가 없음. 아무것도 없는 상태)
autoplay muted : 재생 버튼 없이 load 되면 자동 재생(재생 바는 보이지 않음)
loop(autoplay 속성과 함께 사용) : 반복 재생
※ Chrome 브라우저 정책이 바뀐 참고사항
º 소리가 있는 영상은 autoplay 속성 적용 불가
º 소리가 있는 영상을 autoplay 하기 위해 'muted' 속성도 함께 적어주어야 한다.
(cf. 웨일 브라우저의 경우 autoplay만 있는 경우 바로 소리와 영상이 실행되며, muted 함께 작성하면 소리 없이 영상만 실행됨)
audio : html 문서에 비디오 파일을 첨부할 때 사용하는 태그
파일의 경로를 나타내는 src attribute를 반드시 작성해야 한다.
src 속성값으로는 직접 가지고 있는 파일에 대한 상대경로와 url 형태의 절대경로 도구 가능하나 비디오 파일과 직접적으로 연결된 링크만 가능하다.
º Youtube, Vimeo URL = 사용 불가
º 구글 드라이브에 올린 영상 = 사용 가능
// 미디어 파일이 workspace에 import한 상태
<audio autoplay loop src="./assets/audios/You_make_me.mp3"></audio>다른 방법은 source 태그를 사용하여 미디어 파일을 import 할 수 있다.
src와 type attribute를 작성해야 한다.
여러개의 source 태그를 작성했어도 controls는 한 개만 나타낸다.
위의 방식과의 차이점은 해당 확장자 파일을 실행하지 못하는 브라우저를 위해 최대한 지원할 수 있는 미디어 포맷을 지원하여 사용하기 편리하도록(user friendly) 한다.
<audio controls> // 재생 속성 없으면 빈 화면
<source src="./assets/audios/You_make_me.mp3" type="audio/mpeg" />
<source src="./assets/audios/You_make_me.wav" type="audio/wav" />
<source src="./assets/audios/You_make_me.ogg" type="audio/ogg" />
</audio>
<p> // 지원하지 않는 브라우저 사용자에 대한 안내 문구
당신의 브라우저가 해당 기술을 지원하는지 확인해보세요.
</p>각각 브라우저의 버전마다 특정 기술을 지원하는지 확인할 수 있다.
브라우저 지원 기술 확인 사이트
video : html 문서에 비디오 파일을 첨부할 때 사용하는 태그
(audio 태그 작성 방법과 동일)
<video controls src="./assets/videos/You_make_me.mov"></video><video autoplay>
<source src="./assets/videos/You_make_me.mov" type="audio/mp4" />
<source src="./assets/videos/You_make_me.mp4" type="audio/mp4" />
</video>
<p> // 안내 문구
당신의 브라우저를 업그레이드 하세요.
</p>iframe : html 문서 안에 또 html 문서(콘텐츠)를 embed 할 때 사용하는 태그
iframe 태그의 경우는 직접 작성하기보다 Youtube, Twitter 등 웹사이트에서 'Embed'(공유)할 때 복사/붙여넣기하여 사용한다.
// 예(You make me.MV)
<iframe width="560" height="315" src="https://www.youtube.com/embed/HwcCBnfhsR4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>그 외 태그
abbr : abbreviation(약자, 약어)
약어로 작성한 단어의 풀네임을 제공하고 싶을 때 사용하는 태그(유용!)
약어에 커서를 갖다 대면 아래 자그맣게 풀네임이 뜨는 것을 확인할 수 있다.
// 기본 형태
<abbr title="풀네임">약어</abbr>
// 예시
<abbr title="Transportation as a Service(서비스형 운송)">TaaS</abbr>address : 연락처에 관한 정보를 markup하는 태그
<연락처의 종류>
- (물리적) 주소 (지리적 위치(위도/경도))
- URL
- email 주소
- 전화번호
- SNS (연결 링크)
// 기본 형태
<address>연락처</address>
// 예시
<address>
<h1>
You make me
</h1>
<a href="https://www.youtube.com/watch?v=HwcCBnfhsR4">https://www.youtube.com/watch?v=HwcCBnfhsR4</a>
</address>pre : preformatted text (포맷이 정해진 텍스트)
code : pre 태그 안에 사용하는 태그(항상 같이 사용할 필요는 없음)
html 문서 상에서 코드를 작성하고 싶을 때 사용하는 태그
코드 작성한대로 줄바꿈, 들여쓰기가 모두 적용되어 출력된다.
<pre>
<code>
const man = daydaydaydaydayday;
console.log('You make me');
</code>
</pre>br : break line 줄 바꿈
hr : a horizontal rule 수평선(줄 긋기)
