HTML5 CHEATSHEET ; 드래그 앤 드랍, WYSWIG방식
ZENCODING ; 에밋과 같은 거, 선택자 이용해서 빠르게 코딩작성할 수 있음
D2CODING ; 글씨가 헷갈리는 부분이 없게 만든 코딩을 위한 글씨체를 다운 받음
비주얼 스튜디오 코드 프로그램에 가서 왼쪽아래 톱니바퀴 관리 -> 텍스트 편집기 -> 글꼴 ->폰트패밀리 - ->맨앞에 D2CODING이라고 글꼴을 추가해줌. 나갈때는 확인 버튼이 따로 있는 것이 아니니 그냥 X버튼 누르고 나감
form에서 내가 입력한 글자를 이용해서 URL을 넘어가는 방식을 GET방식이라고 함
반면, search?q=%EA%B0%95%EC%84%9C와 같이 되어 알아볼 수 없도록 편지부친 것과 같은 방식을 POST방식이라고 함
PLACEHOLDER 텍스트 입력하는 부분에 사용자가 어떤 식으로 입력하면 되는지 예시를 들거나 설명을 넣을 때 사용
name 입력한 값을 구분하기 위해 이름을 지정하는 것, 나중에 제어할 때 명명하기 위해 사용
<LABLE FOR="">텍스트</label>
<label for="name">이름:</label>
input타입 중 password의 기본값은 점이다.
폼 실습을 하다보니
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<table width="400px">
<tr bgcolor="grey" height="50px" colspan="2">
<th>
Step1 : 아이디/비번 입력
</th>
</tr>
<tr bgcolor="grey" height="50px" >
<td>안녕</td>
</tr>
<tr></tr>
<tr></tr>
</table>
</form>
</body>
</html>
th는 디폴트 얼라인이 센터이고, td는 디폴트가 왼쪽임
<tr bgcolor="whitesmoke" height="35px">
<td align="right">아이디 : </td>
<td><input type="text" name="userID"></td>
에서 input에서 입력값이 딱 정해져 있고 예측이 되면 value를 적고,(ex yes/no) 그 값이 예측되지 않으면 놔눈다.
input 속성에서 name을 쓸 경우와 id를 쓸 경우의 의미나 차이점?
에러 노트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<table width="400px">
<tr bgcolor="grey" height="50px" colspan="2" align="left">
<th>
Step1 : 아이디/비번 입력
</th>
tr에다 열 합치기 속성을 적용하니 적용되지 않는다.
왼쪽 컬럼의 너비도 각 스텝마다 달라진다. 이유는?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<table width="400px">
<tr bgcolor="gray" height="50px" align="left">
<th colspan="2" >
Step1 : 아이디/비번 입력
</th>
위와같이 th에 적용시켜주니 제대로 작동.
얼라인은 tr이든 th이든 상관없었음(이 때 컬럼이 하나일 경우의 얘기임)
컬러 네임에 gray(미국식), grey(영국식) 둘다 똑같이 잘 적용됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 사용자에게 데이터를 넘길 공간! -->
<form action="#" method="get">
<!-- 표 -->
<table width="400px">
<!-- STEP 1 -->
<tr bgcolor="gray" height="50px">
<th colspan="2" align="left">Step1 : 아이디/비번 입력</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">아이디 : </td>
<td><input type="text"></td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">비밀번호 : </td>
<td><input type="password"></td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">비밀번호 확인 : </td>
<td><input type="password"></td>
</tr>
<!-- STEP 2 -->
<tr bgcolor="gray" height="50px">
<th colspan="2" align="left">Step2 : 개인정보</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">성별 :</td>
<td>
<!-- 남,여를 구분할 수 있는 input -->
남<input type="radio" name="gender" value="men">
여<input type="radio" name="gender" value="women">
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">혈액형 :</td>
<td>
<select>
<option value="a">A형</option>
<option value="b">B형</option>
<option value="o">O형</option>
<option value="ab">AB형</option>
</select>
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">생일 :</td>
<td>
<input type="date">
</td>
</tr>
<!-- STEP 3 -->
<tr bgcolor="gray" height="50px">
<th colspan="2" align="left">Step3 : 선호도</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">취미 :</td>
<td>
축구<input type="checkbox" name="hobby" value="soc">
야구<input type="checkbox" name="hobby" value="base">
농구<input type="checkbox" name="hobby" value="bk">
</td>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right">좋아하는 색깔 :</td>
<td>
<input type="color">
</td>
</tr>
<!-- STEP 4 -->
<tr bgcolor="gray" height="50px">
<th colspan="2" align="left">Step4 : 적고 싶은 말</th>
</tr>
<tr height="35px" bgcolor="whitesmoke">
<td align="right" colspan="2">
<textarea cols="56" rows="5"></textarea>
</td>
</tr>
<!-- 제출 및 초기화 -->
<tr height="35px" bgcolor="whitesmoke">
<td colspan="2" align="center">
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
라는 폼을 스텝마다 각 하나의 테이블로 잡게 되면
나눠지는 두 개의 컬럼 부분의 크기가 각 스텝마다 달라지는 현상이 생김을 볼 수 있다.
따라서 이 폼을 하나의 테이블로 생각하고 작성하는 것이 일관성있는 디자인으로 구현되겠다.
이 폼을 한 테이블로 봤을 때 코드에 th가 반복적으로 나와 구조적으로나 문법적으로 문제가 생기는 것이 아닌가
해서 각각의 스텝을 하나의 테이블 씩으로 보고 th를 4번 사용하였는데 위의 문제가 있어
한 테이블에 4개의 th로 작성하였으나 아래와 같이 실행하는데 전혀 문제가 없었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<table width="400px">
'컴퓨터 사이언스 > TIL 정리' 카테고리의 다른 글
| [프론트엔드][CSS] TIL -Day8 CSS 선택자(Selectors) (0) | 2022.04.06 |
|---|---|
| [프론트엔트][CSS] TIL - Day 7 폰트 사이즈, 인라인 형식 vs 블록 형식 (0) | 2022.04.05 |
| [프론트엔트][CSS][HTML] TIL - Day 6 수업노트 끄적임 (0) | 2022.04.04 |
| [프론트엔드][CSS][HTML] TIL -Day 5.2 익숙해지면 좋은 단축키들 (0) | 2022.04.03 |
| [프론트엔트] [HTML] TIL Day-3 HTTP와 HTML란? (0) | 2022.03.30 |
