eadgnus

input 태그: 
                 입력상자

type 속성

text: 문자를 입력받는 글상자
password: 비밀번호를 입력받는 글상자
radio: 여러개의 옵션중에서 단 하나의 옵션만을 선택할수 있도록 하는 버튼
          ✔ 그룹을 맺기 위해 name속성에 값을 동일하게 해야함
checkbox: 여러개의 옵션 중에서 다수의 옵션을 입력받을수 있도록 하는 버튼
          ✔ 그룹을 맺기 위해 name속성에 값을 동일하게 해야함
file: 원하는 파일을 서버로 전송하기 위한 글상자
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="최대값" value="현재값">

사용 가능한 속성

name:         요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용

id:               요소의 유일한 이름을 설정. HTML 문서에서 해당 요소의 스타일을 주거나
                   동적인 프로그래밍을 할때 사용(같은 HTML문서 내에서 다른 요소와 같은 id를 가질수 없음)

maxlenth:    값의 최대 길이를 설정

placeholder: 입력 전 특정 데이터를 입력하도록 안내 하는 값을 설정

value:          서버로 전달할 입력 양식의 값을 설정

checked:     라디오 또는 체크박스 중에서 미리 선택하는 옵션을 설정

readonly:     데이터를 볼수 있으나 수정할수 없게 설정 (서버로 데이터가 전달됨)

disabled:     입력 필드를 사용할수 없게 설정 (서버로 데이터가 전달x)

required: 데이터를 submit할때 필수로 입력하도록 강제하는 설정

라벨 태그

- 폼 양식에 이름을 붙이는 요소 
- 다른 요소를 연결하면 해당영역이 넓어짐
- radio, checkbox의 스타일을 설정시 많이 사용
<label for='요소의 id' 텍스트 또는 이미지</label>

버튼 태그

- 버튼을 생성하는 요소
- type="reset", type="button", type="submit"
<button>버튼 클릭</button>

선택상자

- 여러개의 욥션이 드롭다운 리스트로 되어 있으면 그 중에서 단 하나의 옵션만을 선택
<select name="">
<option value="apple">김사과</option> # value 값이 서버로 전송됨
<option value="banana">반하나</option>
<option value="orange">오렌지</option>

여러줄 글상자

여러줄의 텍스트를 입력받는 글상자 (얘만 벨류를 가운데다가 사용)
<textarea cols="가로 글자수" rows="세로 줄수">value</textarea>

HTML의 디스플레이

1. inline
- content 크기 만큼만 자리를 차지하는 요소
- 텍스트, img, span
- 텍스트의 특징을 가지고 있음

2. block
- 자리를 모두 차지하는 요소
- p, h, ul, li, div ....
- 면의 특징을 가지고 있음

span태그

- 줄 단위로 영역이 설정
- inline 특징을 가지고 있음

div 태그

- 면 단위로 영역이 설정
- Block 특징을 가지고 있음

시맨틱 태그(Semantic)

- Semantic(의미론적인)
- 의미가 있는 태그를 사용

시맨틱 태그의 장점

- 검색엔진 최적화
- 스크린 리더를 사용하여 페이지를 탐색할 때 도움
- div>div>div>div>div>div>... 끝없는 div를 탐색하는것 보다 효율적
- 개발자에게 명확한 의미를 전달

<header> </header>

- 페이지의 제목과 같은 소개 내용을 포함
- heading 태그나 로고, 검색양식, 작성자 이름등을 포함 
- div랑 똑같다

<nav> </nav>

- 메뉴, 목차등에 사용
- div랑 똑같다

<main> </main>

- 지배적인 컨텐츠 영역을 나타내는 태그 
- div랑 똑같다

<section> </section>

- 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
- 섹션에는 항상 제목이 있는것이 일반적

<article> </article>

- 자체로 의미가 있는 웹페이지 부분이며, 독립적으로 배포 또는 재사용 되도록 의도된 문서
- 게시물, 잡지, 블로그 또는 신문기사

<aside> </aside>

- 간접적으로 문서와 관련된 내용
- 사이드바

아이프레임이란?

- inline frame의 약자
- 웹사이트 안에 또 다른 웹사이트를 삽입

<iframe src="삽입할 페이지의 주소 or 문서위치" style="크기를 설정할 css코드"></iframe>

사용가능 속성:

-target 속성

_blank: 새 탭에서 열림
아이프레임의 name: 해당 아이프레임에서 페이지가 열림

-폼 태그

- 웹 페이지에서 사용자로부터 입력을 받을때 사용하는 태그
- 사용자가 입력한 데이터를 서버로 보낼때 form 요소를 사용

ex)
<form action='서버에게 전달할 파일 위치' method='전송방법'>
form 태그 안에 form 요소를 통해 데이터를 서버로 전달
</form>

✔ 웹사이트의 데이터 전송방법
get: url에 데이터를 포함하여 전달
post: body에 데이터를 포함하여 전달

- 테이블 태그

여러 종류의 데이터를 보기좋게 정리하여 보여주는 표를 작성
- <table>로 시작하고 </table>로 끝냄
-<tr>로 행을 생성, <td>로 셀을 생성

ex)
     <table>
     <tr>
     <td>1</td><td>2</td><td>3</td>
     </tr>
     </table> 

- 테이블에서 사용할수 있는 속성

- <th>: 셀의 제목, 가운데 정렬, 굵은 글씨

1. colspan 속성

- 셀을 가로로 합침
<td colspan='합칠 열의 갯수'>

2. rowspan 속성

- 셀을 세로로 합침
<td rowspan='합칠 행의 갯수'>

3. colgroup 속성

- colgroup 태그 뒤에 나오는 컬럼(th or td)에 적용할 스타일을 해당 태그에서 미리 설정할수 있도록 함

예시:
<table>
<colgroup>
<col style="css문법1">
<col style="css문법2">
<col style="css문법3">
</colgroup>
<tr>
<td>1</td> <!-- css문법1 적용 -->
<td>2</td> <!-- css문법2 적용 -->
<td>3</td> <!-- css문법3 적용 -->
</tr>
<tr>
<td>1</td> <!-- css문법1 적용 -->
<td>2</td> <!-- css문법2 적용 -->
<td>3</td> <!-- css문법3 적용 -->
</tr>
</table>

4. caption

- 표에 제목을 붙일때 사용
- 기본 위치는 표의 상단 중앙

- 책갈피

<a> 태그의 name 속성 or id 속성을 이용하여 책갈피 기능을 설정

<a href='#도착지에 쓰일 name'>링크에 사용될 문자 or 이미지</a>
<a name='도착지 name'>문자</a>

<태그 id='도착지 name'>문자또는이미지</태그>

✔ 호스팅이란?

서버 컴퓨터의 전체 또는 일정 공간을 이용 할수 있도록 임대해주는 서비스

FTP(File Transfer Protocol)

- 클라이언트 - 서버 (C/S)용 프로토콜
- 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공
- 클라이언트가 서버로 파일을 전달
- 주로 대량의 파일을 처리할때 사용
- 기본 포트: 21

✔ 닷홈 호스팅 주의사항
- 첫 페이지는 항상 index.html로 업로드(파일이름 소문자로 꼭 작성하기)
- html 디렉토리에 저장해야함

파일질라 다운:
                        FTP 클라이언트 프로그램으로 사용

ftp-simple 설치:
                        vscode에 설치하여 ftp프로그램으로 사용

- ftp-simple

설정:
    f1키 -> ftp-simple: config - ftp connection setting을 선택

[
{
"name": "아무거나 써도 됨",
"host": "ip 주소",
"port": 21,
"type": "ftp",
"username": "아이디",
"password": "비번",
"path": "/",
"autosave": true,
"confirm": true
}
]

- 접속
          f1키 -> ftp-simple: remotedirectory open to workspace

hyper link 하이퍼링크

    - 다른페이지, 사이트로 연결하는 링크(문자 또는 이미지)

    - 인라인태그이다.

    <a href='이동할 사이트or문서의 경로'>링크에 사용할 문자또는 이미지</a>