aㅁ하이퍼 링크
- 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
- 인라인태그
<a href='이동할 사이트 또는 문서의 경로'>링크에 사용할 문자 또는 이미지</a>
호스팅
- 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스
FTP(File Transfer Protocol)
-클라이언트 - 서버 (C/S)용 프로토콜
- 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공
- 클라이언트가 서버로 파일을 전달
- 주로 대량의 파일을 처리할 때 사용
- 기본포트 : 21
닷홈 호스팅 주의사항
- 첫 페이지는 항상 index.html로 업로드(파일이름 소문자로 꼭 작성하기!)
- html 디렉토리에 저장해야 함
파일질라
ftp _ simple 설치
비주얼 스튜디오 코드에 설치하여 ftp 프로그램으로 사용
-설정
f1키 -ftp-simple: config - FTP connection setting을 선택
[
{
"name": "이름",
"host": "ip주소",
"port": 21,
"type": "ftp",
"username": "아이디",
"password": "비번",
"path": "/",
"autosave": true,
"confirm": true
}
]
- 접속
f1키 -> ftp-simple: Remote directory open to workspace
2. 책갈피
<a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정
<a href="도착지에 쓰일 name">링크에 사용될 문자 또는 이미지</a>
1-1 책갈피 기능
-같은 페이지에서 위치만 이동하는것
-<a> 태그의 name 속성 또는 ip속성을 이용하여 책갈피 기능을설정
사용법
<a href='#도착지에 쓰일 name"> 링크에 사용될 문자 또는 이미지</a>
<a name="도착지 name"> 문자 또는 이미지</a>
<태그 id="도착지 name"> 문자 또는 이미지</태그>
테이블
여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성
-<table>로 시작 하고 </table> 끝냄
-<tr>로 행을 생성, <td>로 셀을 생성
<table>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
- <th> : 셀의 제목, 가운데 정렬, 굵은 굴씨
colspan 속성
- 셀을 가로로 합침
<td colspan="합칠 열의 개수">
rowspan 속성
- 셀을 세로로 합침
<td rowspan="합칠 열의 개수">
colgroup
colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함
<table>
<colgroup>
<col style="css문법">
<col style="css문법">
<col style="css문법">
</colgroup>
<tr>
<td>1콜그룹1적용</td>
<td>2콜그룹2적용</td>
<td>3콜그룹3적용 밑에도 ㅇㅇ</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
- caption
표에 상단 제목을 붙일 때 사용
기본 위치는 표의 상단 중앙
* 아이프레임
-inline frame의 약자
-웹사이트 안에 또다른 웹사이트를 삽입
<iframe src='삽입할 페이지의 주소 또는 문서위치' style='크기를 ㅈ설정할css코드'></아이프레임>
target 속성
_blank: 새탭에서 열림
폼 태그
- 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
- 사용자가 입력한 데이터를 서버로 보낼 때 form요소를 사용
<form action='서버에게 전달할 파일 위치' method='전송방법'>
form 태그 안에 form 요소를 통해 데이터를 서버로 전달
</form>
전송방법
get : url에 데이터를 포함하여 전달
post : body에 데이터를 포함하여 전달
input 태그 : 입력 상자
type 속성
text: 문자를 입력받는 글상자
radio: 여ㅑ러개의옵션 중 단하나의 옵션만을 선택할 수 있도록하는버튼
그룹을 맺기 위해 name속생의 값을 동일하게 해야함
checked: 라디오 또는 체크박스 중에서 미리 선택하는 값을 설정
checkbox : 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼
File: 원하는 파일을 서버로 전송하기 위한 글상자
readonly: 데이터를 볼 수 있으나 수정할 수 없게 설정(서버로 데이터가 전달됨)
disabled: 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달되지 않음)
button : 이벤트가 없는 일반버튼
reset : 입력받은 데이터를 초기화 하는 버튼
submit : 입력받은 데이터를 서버에 제출하는 버튼
hidden: 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자
email : 이메일을 입력받는 글상자(@필요)
url: 웹사이트를 입력받는 글상자(http 필요)
tel: 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)
date: 원하는 날짜를 입력받는 글상자
number: 원하는 숫자를 입력받는 글상자
<input type="number" min="최소값" max="최대값" step="증가값">
color: 원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB컬러값으로 서버에 전달)
search: 검색어를 입력받는 글상자
range: 일정 범위안에 값만을 입력하는 조절바
<input type="range min="최소값" max="최대값" step="현재값">
속성
name : 요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용
id: 요소의 유일한 이름을 설정, HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용(HTML 문서내에서 다른요소와 같은 id 를 가질수 없음)
maxlength: 값의 최대길이를 설정
placeholder: 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
value: 서버로 전달할 입력양식의 값을 설정.
required: 데이터를 필수로 입력하도록 강제하는 설정
라벨 태그
- 폼 양식에 이름을 붙이는 요소
- 다른 요소를 연결하면 해당 영역이 넓어짐
- radio, checkbox 의 스타일을 설정시 많이 사용됨
<label for='요소의 id'>텍스트 또는 이미지</label>
버튼 태그
-버튼을 생성하는 요소
-type="reset",type="button",type="submit"(기본값)
- <button></button>
선택상자
여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 선택
<select>
<option value="apple">김사과</option>
<option value="banana">반하나</option>
<option value="orange">오렌지</option>
</select>
여러줄 글상자
여러줄의 텍스트를 입력받는 글상자
<textarea cols="가로 글자수" rows="세로 줄수">value</textarea>
HTML의 디스플레이
1. inline
- content 크기 만큼만 자리를 차지하는 요소
- 텍스트, img, span
- 텍스트의 특징을 가지고 있음
2. block
- line을 모두 차지하는 요소
- p, h, ul, div ...
- 면의 특징을 가지고 있음