[TIL] 2020-06-12-TIL-200612
TIL
- 웹 수업진행과 HTML 과제 2개 끝냈다.
- java과제 중 socket 프로그래밍을 활용한 채팅 프로그램 과제 풀이를 진행
- 스레드와 에코서버에 대해 다시 공부!
- 최종 프로젝트 [개인 대출관리 플랫폼]의 ppt와 모델링을 1차 마무리
- HTML과 css 수업 진행 후 대출상품 리스트 크롤링, 프로젝트에 적용할 세부 기술을 고민해볼 것
Review
1) HTML
- table tag
- image tag
- video tag
- HTML 기본구조
- section
- article
- aside
HTML
1. input tag type
| type | 사용법 |
|---|---|
| text | (한줄입력) |
| password | (암호처리) |
| checkbox | (다중선택) |
| radio | (단일선택) ex) 남/여 선택 |
| file | (첨부파일) |
| reset | (초기화) |
| hidden | (입력받지 않는 데이터 전송) |
| submit | (입력받은 모든 데이터를 전송) |
<textarea></textarea> |
여러줄 입력 |
실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://www.naer.com">
<fieldset>
<label> 아이디 : <input type="text" size="30"></label><br>
<label> 암호 : <input type="password"></label><br>
<br>
</fieldset>
<br>
<fieldset>
<strong>희망연봉</strong><br> <input type="radio" name="salary">2500-2800<br>
<input type="radio" name="salary">2800-3100<br> <input
type="radio" name="salary">3100-3600<br> <input
type="radio" name="salary">3600-4200<br> <input
type="radio" name="salary">4200이상<br>
</fieldset>
<br>
<strong>사용언어(중복선택 가능)</strong><br> <input
type="checkbox" name="language">JAVA<br> <input
type="checkbox" name="language">C<br> <input
type="checkbox" name="language">C++<br> <input
type="checkbox" name="language">Python<br> <input
type="checkbox" name="language">HTML<br> <input
type="checkbox" name="language">Javascript<br>
<br>
<strong>취미(중복선택 가능)</strong><br>
<input type="checkbox"
name="hobby">코딩<br> <input type="checkbox" name="hobby">개발<br>
<input type="checkbox" name="hobby">디버깅<br>
<br>
<strong>자기소개</strong><br>
<textarea rows="5" cols="50"></textarea>
<br><br>
<strong>첨부파일</strong><br> <input type="file" size="50"><br>
<br>
<input type="submit" value="전송">
</form>
</body>
</html>
실습 결과
CSS
position
- static : 모든 태그들의 default 상태, 왼쪽에서 오른쪽, 위에서 아래로 쌓이게 된다.
- absolute : 부모가 없다면 최상위 태그의 left-top을 기준으로 위치가 정해지고, 부모가 있다면 부모의 left-top을 기준으로 정해진다.
- relative : top, bottom, left, right 속성을 사용해 위치 조절이 가능하다.
- fixed : 항상 특정 위치에 고정되어 있다. 스크롤을 내려도 해당 자리에 계속 고정된다.
댓글남기기