emmet를 정리했으면, 당연히 복습한 태그들도 정리하는것이 인지상정.😎
오늘 복습한 태그들을 정리해보자. (생각보다 강의가 타이트해서 멈추고 따라가고...반복)
타이트할수밖에 없는게...아직 html강의에서 배우지 않았던것들도 나와서 새로배우는 느낌으로 정리하는 것도 있다 😥😥
Table 표현 방법
python을 이용해서 데이터 분석할때는 이게 그냥 테이블 산출해내면 끝이지만, html은 또 이걸 그려내는 느낌?이라 완전 다르게 다가온거 같다.
. table: table을 입력할 때 사용한다.
. tr: table raw, table에 행을 추가할 때 사용한다.
. td: table data, table에 cell 값을 입력할 때 사용한다.
. th: table heading, table에 행/열의 이름을 정의할 때 사용하며 반드시 tr code 안에 위치해야 한다.
<table> <tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> <tr> <th scope="row">Temperature</th> <td>73</td> <td>81</td> </tr> </table>
. colspan: 1개의 cell이 2개 이상의 열 정보를 가질 때, 셀 병합 기능처럼 사용한다.
. rowspan: 1개의 cell이 2개 이상의 행 정보를 가질 때, 셀 병합 기능처럼 사용한다.
. tbody: table body, table의 column head 정보를 제외한 모든 table data를 포함하며 table의 구역을 나눌 때 사용한다.
. thead: table head, table body로 정의되지 않은 column head 정보를 정의할 때 사용한다.
. tfoot: table footer, table의 맨 끝에 전체 raw data에 대한 통계적 data(sums, differences)를 꼬릿말 형태로 표현할 때 사용한다.
<tr> <td>1</td> <td>notion</td> <td>7000</td> <td rowspan="2">1000</td> <td>7,000,000</td> </tr> <tr> <td>2</td> <td>노션</td> <td>8000</td> <td>1000</td> <td>8,000,000</td> </tr> </tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td>총액</td> </tr> <tfoot> <tr> <td colspan="4">총액</td> <td>15,000,000</td> </tr> </tfoot>
form 작성하기
form: form은 정보를 수집할 때 사용하는 매우 좋은 도구로 action이 처리되는 위치와 처리방식을 정의해주어 사용한다.
각 Code의 용도 및 목적
. label: input 속성을 정의할 때 사용하며 둘 사이의 상호작용을 위해서는label에는 for 속성을 할당하고 input에는 id 속성을 할당해야한다.
. input: 정보를 수집할 때 입력창을 만들때 사용한다.
. text: text를 입력할때 사용한다.
. type: 사용자가 입력한 정보의 유형을 정의할 때 사용한다.
. password: 사용자의 비밀번호 정보를 정의할 때 사용한다.
. date: 요일을 선택할 때 사용한다.
. time: 시간을 선택할 때 사용한다.
.color : 색깔을 지정할 수 있는 옵션이다.
. range: 사용자의 입력값을 제한된 숫자 형태로 정의할 때 사용한다.
. radio: 사용자가 두개의 옵션 중 하나의 값을 선택할 때 사용한다.
. checkbox: 사용자가 2개 이상의 값을 선택할 수 있는 기능을 제공한다.
. file: file 업로드 기능을 지원하는 옵션.
. textarea: 사용자가 지정한 rows/cols 크기로 입력창을 생성하는 기능을 제공한다. (input type의 text로 만들어진 명령어는 한 줄의 입력 공간을 제공한다.)
<form> <input type="text"><br> <input type="password"><br> <input type="date"><br> <input type="time"><br> <input type="range"><br> <input type="color"><br> <input type="radio"><br> <input type="checkbox"><br> <input type="file"><br> <textarea name="" id="" cols="30" rows="10"></textarea> </form>
이렇게 해서 오늘 배운 html도 정리 끝! 내일은 css랑 python 복습하고 정리해야겠다.
오늘도 한눈에 알아보고 이해할 수 있는 코드를 작성하는 날을 꿈꾸며 화이팅이었다!
