* 이 글은 필자가 자신이 배운 내용을 정리하기 위한 것이며, 결코 Udemy 강의를 결제하지 않은 타인의 학습을 고려하여 작성되지 않았습니다.
* 이 글을 학습에 활용하기를 원하신다면, Udemy에서 '【한글자막】 The Web Developer 부트캠프 2024' 강의를 구매하시는 것을 권장드립니다.
원래 피곤한 상태에서 section 5 무리해서 들으려다가 고꾸라져서 10/08에 쓰기 시작했는데 11/04에 다시 보고 있다. 하지만 파이썬을 대신 공부했으니 논건 아니니까 괜찮다고 하자.
본론으로 돌아가서 오늘은 제목에도 있다시피 폼과 테이블을 html로 구현하는 법을 다루고자 한다.
html과 css 파트는 거의 암기라 지루해도 어쩔 수 없다. javascript를 배울 때를 고대하며 기다리도록 하자.
<td>
표의 한 셀을 말한다.
<tr>
표의 한 행(가로줄)을 말한다.
<th>
표의 머리를 추가할 때 사용한다.
<thead>
표의 머리가 있는 범위를 지정한다.
<tbody>
표의 주 내용이 위치할 범위를 표시한다.
<tfoot>
표의 발..? 을 지정한다. 합계같은 건 보통 발에 들어간다.
어... 조금 설명이 어수선하니까 예시 코드를 가져오자면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<table>
<thead>
<tr>
<th>한국어</th>
<th>english</th>
<th>espanol</th>
</tr>
</thead>
<tbody>
<tr>
<td>사과</td>
<td>apple</td>
<td>manzana</td>
</tr>
<tr>
<td>물</td>
<td>water</td>
<td>agua</td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
어... 이렇게 된다. 눈치껏 알아 듣기를... 모르면 추가로 검색해보길 바란다. 어차피 내용정리용 블로그지 처음 배우는 사람을 위한 친절한 웹개발 가이드 같은 게 아니라 자세히 설명하기엔 내 기력과 시간이 부족하다.
가끔 친절하게 설명할 때가 있는데, 그건 내 기력과 시간이 어느정도 충분할 때 이야기다. 지금 난 반쯤 시체 상태인데 어떻게든 오늘 안에 html을 끝내겠다는 마음으로 이 뿌득뿌득 아득아득 갈며 하고 있는거라.
딱 여기까지 쓰고 고꾸라졌다. 그리고 한달 뒤에 이 포스트를 펼쳤다.
rowspan과 colspand으로 표 머리가 두줄 이상인 표를 만들 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<table>
<thead>
<tr>
<th colspan="2">음식</th>
<th colspan="2">액체</th>
<th colspan="2">동물</th>
<th rowspan="2">은행</th>
</tr>
<tr>
<th>사과</th>
<th>치즈</th>
<th>물</th>
<th>우유</th>
<th>개</th>
<th>고양이</th>
</tr>
</thead>
<tbody>
<tr>
<td>apple</td>
<td>cheese</td>
<td>water</td>
<td>milk</td>
<td>dog</td>
<td>cat</td>
<td>bank</td>
</tr>
<tr>
<td>manzana</td>
<td>queso</td>
<td>agua</td>
<td>leche</td>
<td>perro</td>
<td>gato</td>
<td>banco</td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
같은 식이다. rowspan은 가로로 두 줄을 차지한다는 뜻이고, colspan은 세로로 두 줄을 차지한다는 뜻 같다.
form은 무언가를 입력받는 곳이다.
우리가 흔히 입력하는 id와 password도 form에서 입력받는다.
form에는 action이라는 속성이 있는데, 이것이 form에서 받은 정보가 이동하는 곳을 정한다.
form 중에 input 태그는 따로 닫는 태그가 없다. 그러므로 태그 사이에 넣을 내용도 없다. 그저 입력만만이 있을 뿐이다.
하지만 input 태그는 type을 가지고 있는데, type으로 어떤 것을 입력받을지 정할 수 있다.
"text"type은 글자 입력란을 만들고,
"password"type은 입력한 글자가 안 보이는 글자 입력만을 만든다.
그 외의 것은 MDN 사이트에서 추가로 확인할 수 있다.
input의 placeholder는 아직 사용자가 무언가를 입력하지 않았을 때 보이는 회색 글자를 작성할 때 사용한다.
하지만 모든 input에 사용할 수는 없다. check box 같은 경우에는 사용하기 힘들지 않을까?
input의 name은 사용자가 입력한 값을 서버에 넘길 때 붙이는 이름이다. 레이블이라고 생각해도 괜찮겠지만, 아쉽게도 오늘 레이블이라는 같은 이름의 태그를 배우기에 이름 정도로만 생각하자.
일반적으로 name은 직관적이고, 짧게 한다. name에 input값에 대한 모든 정보를 담아야지! 라는 마인드로 이름을 정할 필요가 없다는 뜻이다.
name은 모든 input 안에 필수적으로 들어가야 한다. 백엔드 코딩이고 뭐고 모르는 현 상태에서는 name 정도는 빼도 되지 않나 싶을 수 있지만, 일단 넣고 보자. 일단은 전문가 말이 맞다고 생각하는 편이 편하기도 하니까.
input의 value는 사용자가 입력한 값이 따로 없을 경우, 그러니까 체크박스 같은 형식으로 사용자의 입력을 받을 때 서버에 전달하는 값이다. 체크박스나 라디오 버튼 같은 걸 사용할 때 쓰면 좋을 것 같다.
(참고로 라디오 버튼을 만들 경우에는, 선택지(버튼)들의 name을 다 같게 해야한다.)
label 태그는 input을 설명하기 위해 사용된다.
input의 id와 label의 for의 대상을 같게 설정하는 것으로 label과 input을 대응할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<label for="id">id 입력창</label>
<input type="text" placeholder="id를 입력하세요" id="id">
</form>
</body>
</html>
이런 식이다. input과 label은 일대일대응임을 기억하자.
button 요소는 여는 태그와 닫는 태그가 있어 그 사이에 내용을 넣을 수 있다. 넣은 내용은 버튼 안의 글자로 보인다.
button 요소는 form 안에 있다면 action의 경로에 가고, form 밖에 있다면 아무런 일도 하지 않는다. (javascript로 따로 지정하지 않는 이상)
만약 form 안에 있는 button이 action의 경로로 가게 하고 싶지 않다면, button의 태그 안에 type="button"을 넣어 버튼이 그냥 버튼으로 작동하게 할 수 있다. (기본값은 type="submit"이다.)
input과 비슷하지만, input 태그 없이 사용되는 것이 있는데, 바로 select 태그이다.
select 태그 안에는 option 태그가 있고, option 태그는 value값과 함께 사용되어 값을 반환한다.
select가 뭐하는 놈이냐? 하면, 우리가 네이버 쇼핑 할 때 보는
이런 친구들을 말한다. 보다시피 여러 개 중 하나를 선택하는 구조라, select라고 이름이 붙여진듯 하다.
html에서 유효성 검사라는 것을 진행할 수도 있다. 이를 서버에서도 할 수 있고 뭐 방법은 많다고 하는데, 중요한 건 html만으로도 할 수 있다는 것.
유효성 검사란, 우리가 비밀번호를 입력할 때 8자에서 12자 사이로 입력하라고 한다던가, 이름을 입력할 때 이름을 비워둘 수 없다던가... 하는, 입력값을 제출하기 위한 최소한의 요구사항을 말한다.
input 태그의 속성에 required를 쓰면 빈칸으로 제출할 수 없고, minlength나 maxlength를 쓰면 최소 및 최대 글자수를 정할 수 있다.
그 외에도 애초에 input 태그를 email이나 url 등으로 하면 이에 맞춰 기본적인 유효성 검사를 한다.
딱히 정확한 건 아니라, 'adfass@dfaw'이런식으로 써도 통과시킨다. (자바스크립트를 배워야하는 이유)
이걸로 html 파트가 끝났다!
css라는 언덕과 javascript라는 큰 산이 남았지만 뭐 하나라도 끝난게 어디야... 라는 마인드로 살려고 한다.
파이팅해서 오늘도 열심히... 견디자. 파이팅!
'Programming > html,css' 카테고리의 다른 글
| Udemy The Web Developer Bootcamp Section 7 정리 | CSS 선택자 Selecter (0) | 2024.11.17 |
|---|---|
| Udemy The Web Developer Bootcamp Section 6 정리 | CSS 기초 (0) | 2024.11.17 |
| Udemy The Web Developer Bootcamp Section 4 정리 | HTML 시맨틱 (0) | 2024.10.04 |
| Udemy The Web Developer Bootcamp Section 3 정리 | HTML 기초 (1) | 2024.09.28 |
| Udemy The Web Developer Bootcamp 시리즈를 시작하기 앞서... (0) | 2024.09.27 |