- FTP (File Transfer Protocol)
클라이언트-서버(c/s)용 프로토콜이다.
클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공하는 것을 의미한다.
클라이언트가 파일을 서버로 전달할 수 있다.
주로 대량의 파일을 처리할 때 사용한다.
기본 포트는 21번이다.
- 호스팅 (Hosting)
서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스를 의미한다.
- ftp-simple
비주얼 스튜디오 코드에 설치하면 FTP 프로그램으로 사용할 수 있다.
처음 세팅은 f1 -> ftp-simple : config - ftp connection setting에서 해주면 된다!
호스팅을 하기 위해서는 f1-> ft-simple :remote directory open to workspace으로 수정해주면 된다
- iframe 태그
inline frame의 약자이다.
웹 사이트 안에 또 다른 웹사이트를 삽입할 수 있다.
크기는 CSS 코드로 설정할 수 있다.
<iframe src = "삽입할 페이지의 주소 또는 문서 위치"> </iframe>
- form 태그
웹페이지에서 사용자로부터 입력을 받을 때 사용하는 태그이다.
사용자가 입력한 데이터를 서버로 보낼 때, form 태그의 요소를 사용한다.
<form action="서버에 전달할 파일위치" method = "전송 방법" >
form 태그 안에 form 요소를 통해서 데이터를 서버로 전달
</form>
- input 태그
type 속성
| type 속성 | 의미 |
| text | 문자를 입력받는 글상자 |
| password | 비밀번호를 입력받는 글상자 |
| radio | 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있도록 하는 버튼 그룹을 맺기 위해서는 name이라는 속성의 값이 같아야한다. |
| checkbox | 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼 |
| file | 원하는 파일을 서버로 전송하기 위한 글상자 |
| 이메일을 입력받는 글상자 (@가포함되어야함) | |
| url | 웹 사이트를 입력받는 글상자 (http 포함되어야함) |
| tel | 전화번호를 입력받는 글상자 모바일에서 숫자 키패드가 자동으로 사용된다. |
| number | 원하는 숫자를 입력받는 글상자 <input type="number" min="최소값" max="최대값" step="증가값"> |
| date | 원하는 날짜를 입력받는 글상자 |
| color | 원하는 색상을 입력받는 요소 선택한 색상은 16진수 RGB 컬러로 서버에 전달된다. |
| search | 검색어를 입력받는 글상자 |
| range | 일정 범위안에 값만을 입력하는 조절바 <input type = "range" min="최소값" max ="최대값" value="현재값"> |
| hidden | 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 요소 |
| button | 이벤트가 없는 일반 버튼 |
| reset | 입력받은 데이터를 초기화하는 버튼 |
| submit | 입력받은 데이터를 서버에 제출하는 버튼 |
- input 태그 속성
| 속성 | 의미 |
| name | 요소의 이름을 설정 서버에서 값을 전달 받을 때 key 로 사용된다. |
| id | 요소의 유일한 이름을 설정 HTML 문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용한다. (하나의 HTML 문서에서 다른 요소의 값이 같을 수 없다.) |
| maxlength | 값의 최대 길이를 설정한다. |
| placeholder | 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정한다. |
| value | 서버로 전달될 입력 양식의 값을 설정한다. |
| checked | 라디오 또는 체크박스 중에서 미리 선택하는 옵션을 설정한다. |
| readonly | 데이터를 볼 수 있으나 수정할 수 없게 설정한다. 서버로 데이터는 전달된다. |
| disabled | 입력 필드를 사용할 수 없게 설정한다. 서버로 데이터가 전달되지 않는다. |
| required | 데이터를 필수로 입력하도록 강제하는 설정이다. |
- label 태그
폼 양식에 이름을 붙이는 요소이다.
다른 요소를 연결하면 해당 영역이 넓어진다.
radio, checkbox의 스타일을 설정할 수 있다.
<label for="요소의 id"> 텍스트 또는 이미지 </label>
- button 태그
<button> 버튼에 쓰일 텍스트 </button>
- 선택 상자
여러 개의 옵션이 드롭다운 리스트로 되어 있으며 그중에서 단 하나의 옵션을 선택할 수 있다.
<select name="">
<option value="">아이템1</option>
<option value="">아이템2</option>
<option value="">아이템3</option>
</select>
- 여러 줄 글상자
여러 줄의 텍스트를 입력받는 글상자
<textarea name="">value</textarea>
form태그, input 태그, select태그 등 사용해보기!
<!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>form</title>
</head>
<body>
<h2>폼태그</h2>
<form action="#" method="#">
<p>
아이디 : <input type="text" name="userid" id="userid" maxlength="20" placeholder="아이디를 입력하세요." required>
</p>
<p>
비밀번호 : <input type="password" name="userpw" id="userpw" maxlength="20"placeholder="비밀번호를 입력하세요." required>
</p>
<p>
성별 : <label for = "male">남자</label><input type="radio" name="gender" id="male" value="남자 ">
<label for ="female">여자</label><input type="radio" name="gender" id="female" value="여자" checked>
</p>
<p>
취미 : <label for ="exercise">운동</label><input type="checkbox" name="hobby" id="exercise" value ="운동">
<label for = "drive">드라이브</label> <input type="checkbox" name="hobby" id="drive" value="드라이브">
<label for ="mountain">등산</label> <input type="checkbox" name="hobby" id="mountain" value="등산">
<label for ="game"> 게임 </label> <input type="checkbox" name="hobby" id="game" value="게임">
<label for ="movie">영화감상</label><input type="checkbox" name="hobby" id="movie" value="영화감상">
</p>
<p>
첨부파일 <input type="file" name="file">
</p>
<p>
이메일 주소 : <input type="email" name="email" placeholder="이메일을 입력하세요">
</p>
<p>
웹사이트 : <input type="url" name="url" placeholder="웹사이트를 입력하세요">
</p>
<p>
핸드폰 번호 : <input type="tel" name="tel" placeholder="핸드폰번호를 입력하세요">
</p>
<p>
생년월일 : <input type="date" name="birth">
</p>
<p>
좋아하는 숫자 : <input type="number" min="0" max="100" step="1">
</p>
<p>
좋아하는 색상 : <input type="color" name="color">
</p>
<p>
검색어 : <input type="search" name="search" placeholder="검색어를 입력하세요.">
</p>
<p>
프로그래밍 능력 <input type="range" min="0" max="5" value="3">
</p>
<input type="hidden" name="idx" value="10">
<p>
우편번호 : <input type="text" name="zipcode" readonly>
</p>
<p>
주소 : <input type="text" name = "address1" disabled>
</p>
<p> 직업 :
<select name="job">
<option value="1">개발자</option>
<option value="2">강사</option>
<option value="3">경찰</option>
<option value="4">의사</option>
<option value="5">변호사</option>
<option value="6">선생님</option>
</select>
</p>
<p>자기소개</p>
<p>
<textarea name ="content" id="content" cols="30" rows="10" placeholder="자기소개를 입력하세요"></textarea>
</p>
<p>
<input type="submit" value="전송">
<input type="reset" value="초기화">
<input type="button" value ="눌러보세요" onclick="alert('하이!')">
</p>
</form>
</body>
</html>
'국비 > HTML' 카테고리의 다른 글
| DAY 03 - 2 : HTML 디스플레이, div 태그, 시맨틱 태그 (0) | 2022.11.02 |
|---|---|
| DAY 02 : 서식태그, 목록태그, 이미지태그 (0) | 2022.11.02 |
| DAY 01 : html, 특수 태그, 문단 태그, 제목 태그, 웹 접근성, .. (0) | 2022.10.24 |