FTP(File Transfer Protocol)
- 클라이언트-서버(C/S)용 프로토콜
- 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공
- 클라이언트가 서버로 파일을 전달
- 주로 대량의 파일을 처리할 때 사용
✔ 호스팅
- 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스
- dothome
✔ 닷홈 호스팅 주의사항
- html 디렉토리에 저장할 파일을 업로드
- 처음에 html 디렉토리에 있는 파일들은 다 지워도 됨
- 웹사이트는 무조건 첫페이지가 있어야함
- 첫 페이지는 항상 index.html(반드시 소문자) 로 업로드해야함
- 파일질라랑 연동가능
✔ ftp-simple
비주얼 스튜디오 코드에 설치하여 FTP 프로그램으로 사용
F1키 ftp-simple : config - ftp connection setting 을 선택
[
{
"name": "이재원의 홈페이지",
"host": "192.168.0.2",
"port": 21,
"type": "ftp",
"username": "wishpaper",
"password": "wodnjs83140201#",
"path": "/",
"autosave": true,
"confirm": false
}
]
위 내용은 한번만 세팅해주면됨
접속할때는
f1 - ftp-simple : remote directory open to workspace - html - current 머시기
아이프레임
- inline frame의 약자
- 웹사이트 안에 또 다른 웹사이트를 삽입
<iframe src="삽입할 페이지의 주소 또는 문서위치" style="크기를 설정할 css코드"></iframe>
폼 태그
- 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
- 사용자가 입력한 데이터를 서버로 보낼 때 from 요소를 사용
<form action="서버에게 전달할 파일위치" method="전송방법">
form 태그 안에 form 요소를 통해 데이터를 서버로 전달
</form>
입력상자 <input>
type 속성
text: 문자를 입력받는 글상자
password: 비밀번호를 입력받는 글상자
radio: 여러개의 옵션 중에서 단 하나의 옵셔남ㄴ을 입력받을 수 있돍
- 그룹을 맺기 위해 name속성의 값이 동일해야함
file: 원하는 파일을 서버로 전송하기 위한 글사
email: 이메일을 입력받는 글상자(@ 필요)
url: 웹사이트를 입력받는 글상자(http 필요)
tel: 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)
date: 원하는 날짜를 입력받는 글상자
number: 원하는 숫자를 입력받는 글상자
<input type="number" min="최소값" max="최대값" step="증가값">
color: 원하는 색상을 입력받는 요소
- 선택한 색상은 16진수 RGB컬러값으로 서버에 전달
search: 검색어를 입력받는 글상자
range: 일정 범위안에 값만을 입력하는 조절바
<input type="range" min="최소값" max="최대값" value="현재값">
hidden: 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 요소를
button: 이벤트가 없는 일반버튼
reset: 입력받는 데이터를 초기화 하는 버튼
submit: 입력받은 데이터를 서버에 제출하는 버튼
속성
name: 요소의 이름을 설정, 서버에서 값을 전달 받을 때 키로 사용,주로 서버에서사용
id: 요소의 유일한 이름을 설정, HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할때 사용(하나의 HTML문서에서 다른 요소와 값이 같을 수 없음)
maxlength: 값의 최대 길이를 설정하는 속성
placeholder: 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
value: 서버로 전달될 입력양식의 값을 설정
checked: 라디오 또는 체크박스 중에서 미리 선택하는 옵션을 선택
readonly:
- 서버로 데이터가 전달됨
disabled: 입력필드를 사용할 수 없게 설정
- 서버로 데이터가 전달되지 않음
required: 데이터를 필수로 입력하도록 강제하는 설정
라벨
- 폼 양식에 이름을 붙이는 요소를
- 다른 요소를 연결하면 해당 영역이 넓어짐
- radio, checkbox의 스타일을 설정
<label for ="요소의 id"> 텍스트 또는 이미지</label>
버튼
- <button>버튼에 쓰일 텍스트</button>
- 기본 기능은 <input type="submit">
- 일반 버튼으로 사용하려면 <button type="button">버튼에 쓰일 텍스트</button>
선택상자
여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 선택
<select name = "">
<option value="">아이템1</option>
<option value="">아이템2</option>
<option value="">아이템3</option>
..
</select>
여러줄 글상자
여러줄의 텍스트를 입력받는 글상자
<textarea name=""></textarea>
html의 디스플레이
1. inline
- content 크기 만큼 자리를 차지하는 요소
- 텍스트, img, span
- 문자(텍스트)의 특징을 가지고 있음
2.block
- 라인을 모두 차지한 요소를
- p, h, ul, li, div...
- 면의 특징을 가지고 있음
span 태그
- 줄단위로 영역이 설정
- inline 특징을 가지고 있음
div태그
- 면 단위로 영역이 설정
- block 특징을 가지고 있음
시맨틱 태그영역
- Semantic: 의미론적인
- 의미가 있는 태그를 사용
시맨틱 태그의 장점
- 검색엔진 최적화
- 스크린 리더를 사용하여 페이지를 탐색할 때 도움
- div>div>div>div... 끝없는 div를 탐색하는 것보다 효율적
- 개발자에게 명확한 의미를 전달
<header> </header>
페이지의 제목과 같은 소개 내용을 포함
heading 태그나 로고 저작권정보, 검색양식, 작성자 이름등을 포함
<nav></nav>
메뉴, 목차등에 사용
<main></main>
지배적인 컨텐츠 영역을 나타내는 태그
<section></section>
구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
섹션에는 항상 제목이 있는 것이 일반적
<article></article>
자체로 의미가 있는 웹사이트 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서
게시물, 잡지 또는 신문기사
<footer></footer>
작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트를 포함
<aside></aside>
긴접적으로 문서와 관련된 내용
사이드바 또는 콜아웃 상자
1.아이프레임
<!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 bgcolor="#222222" style="color: white">
<h2>아이프레임</h2>
<p><a href="./index.html">홈페이지</a> <a href="./index.html" target="_blank">홈페이지(새탭)</a>
<a href="./index.html" target="if">홈페이지(아이프레임)</a> <a href="https://www.koreaisacademy.com" target="if">코리아 홈페이지(iframe)</a>
</p>
<p><iframe src="https://www.koreaisacademy.com" style="width:100%; height :800px; border: 3px dashed red;" name="if"></iframe></p>
//세로는 100% 가 안됨 그래서 px입력해줘야함
</body>
</html>
2.폼태그
<!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 bgcolor="#222222" style="color: white">
<h2>폼태그</h2>
<form action="#" method="#">
<p>아이디: <input type="text" required name="userid" id="userid" maxlength="10" placeholder="아이디입력해라"> </p>
<p> 비밀번호: <input type="password" name="userpw" id="userpw" required maxlength="20" placeholder="비번입력해라"></p>
<p>성별:
<label for="male">남자</label> <input type="radio" id="male" name="gender" value="남자" checked>
<label for="female">여자</label> <input type="radio" name="gender" id="female" value="여자"></p>
<p><label for="h1">취미: </label><input id="h1" type="checkbox" name="hobby" value="운동"></p>
<p><label for="h2">드라이브: </label><input id="h2" type="checkbox" name="hobby" value="드라이브"></p>
<p><label for="h3">등산: </label><input id="h3" type="checkbox" name="hobby" value="등산"></p>
<p><label for="h4">게임: </label><input id="h4" type="checkbox" name="hobby" value="게임"></p>
<p><label for="h5">영화감상: </label><input id="h5"type="checkbox" name="hobby" value="영화감상"></p>
<p>첨부파일 : <input type="file" name = "file"></p>
<p>이메일 : <input type="email" name="email" placeholder="이메일을 입력하세요"></p>
<p>웹사이트 : <input type="url" name="url" placeholder="url을 입력하세요"></p>
<p>휴대폰 번호 : <input type="tel"name="tel" placeholder="휴대폰 번호를 입력해라"> </p>
<p>생년월일: <input type="date" name="date"></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" value="12345" readonly></p>
<p>주소: <input type="text" name="address1" disabled></p>
<p>직업:
<select name="jog">
<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>
</body>
</html>
3.디스플레이
<!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 bgcolor="#222222" style="color: white">
<h2>디스플레이</h2>
1. <span style="font-size: 30px; color: deepskyblue;">span 태그영역</span>
2. <div style="width: 600px; height: 400px; background-color: gold;">div 태그영역</div>
</body>
</html>반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| HTML&CSS | 패딩,테두리,마진,박스사이징,디스플레이,폼,상대위치,고정위치,절대위치,z-index,float,clear (0) | 2022.10.27 |
|---|---|
| HTML&CSS | 선택자,텍스트,배경 (1) | 2022.10.27 |
| HTML&CSS | CSS,스타일,선택자,상속 (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
