![[2일차] HTML(list/table/colspan/rowspan/form/input)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc0vpoP%2FbtrHJ0SAPau%2FmPykxD5u1FVfY26EyWwFKk%2Fimg.png)
728x90
20220720(수)
- 학습목표 : HTML 완성 / 상위 10개 태그에 대한 학습.
- 목차
- 면접 연습
- HTML List tag
- HTML Table tag
- 면접 연습
차분하게 대답하는 연습하기
- 못 알아들었을 경우 : 질문 이해 못했습니다. 다시 얘기해달라고 얘기
- 답변을 모르겠는 경우 : 어떻게든 얘기하기
- 리스트 태그 : 선형구조
| List tag | |
| <ul> | Unordered list 순서가 없는 일반적으로 <li>와 같이 쓰임 (종속적인건 X) |
| <ol> | Ordered list 순서가 있는 일반적으로 <li>와 같이 쓰임 (종속적인건 X) <ol type="1|a|A|i|I"> start 속성 사용시엔 뒤에 number만 자리한다! |
|
<li>
|
List item들 나열
|
- 하이퍼링크 태그 <a>
| 기타 tag | |
|
<a>
|
Ancher 태그(의미) & 하이퍼링크 제공(기능) |
The <a> tag defines a hyperlink, which is used to link from one page to another.
- 테이블 만들기
row(줄) 먼저 만들고 ➡ 원인을 집어 넣고 ➡ 컬럼을 만든다.
✨ 테이블 만들 때에도 정보구조를 만든다고 생각하기!! (in 2차원 정보구조)
- 가로 : 원인, 변화되는 값 (1행)
- 세로 : 결과, 내가 알고 싶은 값 (1열)
| Table tag | |
|
<table>
|
테이블 자체를 의미하는 태그
일반적으로 <th>,<td>와 같이 쓰임
|
|
<tr>
|
Table row
|
| <th> | Table header 굵게 표시되며 가운데 정렬 보통 1행에 <td>대신 쓰인다. |
|
<td>
|
Table data cell 좌측정렬
standard data cell in an HTML table |
|
<caption>
|
테이블의 제목 (caption) 중앙정렬
|
| Table 셀 병합 | *span은 곱게 합쳐지는게 X, 합쳐진 데이타를 집어넣는 느낌임! 합치래서 합쳤지만, 정보를 없애진 않는다! |
| <th/td colspan =“2”> |
컬럼 2개를 걸쳐 구성/가로로
|
| <th/td rowspan =“2”> |
줄 2개를 걸쳐 구성/세로로
|
ex) colspan & rowspan 활용
더보기
<table border="1">
<tr>
<th colspan="4">TITLE</th>
</tr>
<tr>
<td colspan="2">subtitle</td>
<td colspan="2">subtitle</td>
</tr>
<tr>
<td rowspan="3">1 item<br>1 item<br>1 item</td>
<td rowspan="3">123<br>123<br>123</td>
<td rowspan="3">1 item<br>1 item<br>1 item</td>
<td rowspan="3">123<br>123<br>123</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td colspan="2">sub subtitle</td>
<td colspan="2">sub subtitle</td>
</tr>
</table>
- 프로토콜의 구조(Packet)
1) "Header" 전송을 위한 데이터(편지봉투) GET 방식 전송
일반적인 프로토콜에선 Header(편지봉투)에 내용을 쓰지 못하도록 되어있다.
단, HTTP는 아주 살짝 정보를 흘려쓸 수 있다. (남들이 다 볼 수 있음)
➡ 왜? url에 정보가 들어갈 수 있는 길(뒤에 /이어쓰기)이 있거든!
HTTP Header : 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해줌
2) "Payload" = http body (in http) 전송할 데이터(연애편지) POST 방식 전송
✔ HTTP METHOD : 데이터를 보내는 방식_GET & POST
| 입력 양식 태그 | |
|
<form>
|
<form>tag is used to create an HTML form for user input
사용자 입력을 처리하는 HTML form 생성 ➡ 데이터를 전송하기 위한 태그 <form method="get">
Action, method와 같은 attribute가 있다.
|
| <input> |
데이터 입력을 위한 UI 제공
type(text, radio, color), name, id, value등의 속성이 있다.
name 다는 이유? ➡ 서버에게 이 데이터가 어떤 종류인지 알려주기 위함 |
| <label> |
라벨링 : 스크린 리딩(소리로 읽음)이나 클릭이 어려운 사용자 지원
<input>, <progress>등의 태그에 라벨링 수행
for attribute을 통해 id를 매개로 연결 |
더보기
<body>
<form method="get">
<input type="text" name="id"><br>
<input type="text" name="pwd"><br>
<input type="password"><br>
<input type="radio"><br>
<input type="button">
</form>
</body>
- 후기
1교시에 한명씩 면접형 질문을 하셔서 동공이 흔들리고 급체를 했다..
암기인데 이건,, ㅠ 이해가 문제가 아니라 면접 준비는 암기인데!!
내일부턴 모든 질문에 깔끔하게 답변할 수 있도록 만반의 준비를 하고가야지 :)
타이핑으로 기록하는 장점은 빠르게 기록하면서 중요한 부분을 놓치지 않는다는 점이다.
노트 필기를 하면 쓰는 것만 집중해서 흐름을 다 놓치는 나로서는 타이핑 만한 메모방식이 없다.
선생님껜 심심한 양해의 말씀을 드린다,,헤헤
728x90
'🏫 Open API_JAVA' 카테고리의 다른 글
| [6일차] UI 화면 설계 / 프로토타입 (0) | 2022.07.28 |
|---|---|
| [5일차] 통신 프로토콜 / CSS 선택자 / 폰트 / 박스모델 (0) | 2022.07.26 |
| [4일차] html 기본값 / 정보통신 일반 (0) | 2022.07.25 |
| [3일차] Interface, HTML(form/select), 2진수, RGB, CSS (0) | 2022.07.21 |
| [1일차] OT & HTML (0) | 2022.07.19 |