(7)HTML_기본문법
하이퍼 링크
- 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
- 인라인 태그
<a href='이동할 사이트 또는 문서의 경로'>링크에 사용할 문자 또는 이미지</a>
✔호스팅
서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스
FTP(File Transfer Protocol)
- 클라이언트 - 서버(C/S)용 프로토콜
- 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공
- 클라이언트가 서버로 파일을 전달
- 주로 대량의 파일을 처리할 때 사용
- 기본포트: 21
✔ 닷홈 호스팅 주의사항
- 첫 페이지는 항상 index.html 업로드(파일이름 소문자로 꼭 작성하기!)
- html 디렉토리에 저장해야 함
- 파일질라 다운: FTP 클라이언트 프로그램으로 사용
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 diretory open to workspace
책갈피
- <a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정
<a href="#도착지에 쓰일 name">링크에 사용될 문자 또는 이미지</a>
<a name="도착지 name">문자 또는 이미지</a>
<태그 id="도착지 name">문자 또는 이미지</태그>
테이블
- 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성
- <table> 로 시작 </table> 끝냄
- <tb>로 행을 생성, <td>로 셀을 생성
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</talbe>
- <th>: 셀의 제목, 가운데 정렬, 굵은 글씨
colspan 속성
- 셀을 가로로 합침
<td colspan="합칠 열의 개수">
- rowspan 속성
<td rowspan="합칠 행의 개수">
colgroup
- colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함
<table>
<colgroup>
<col style="css문법1">
<col style="css문법2">
<col style="css문법3">
</colgroup>
<tr>
<td>1</td> <1-- css문법1 적용-->
<td>2</td> <2-- css문법1 적용-->
<td>3</td> <3-- css문법1 적용-->
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
caption
- 표에 제목을 붙일 때 사용
- 기본 위치는 표의 상단 중앙
아이프레임
- inline frame의 약자
- 웹사이트 안에 또 다른 웹사이트를 삽입
<iframe src='삽입할 페이지의 주소 또는 문서위치' style = '크기를 설정할 css 코드'></iframe>
target 속성
- _blank: 새탭에서 열림
- 아이프레임의 name: 해당 아이프레임에서 열림
폼 태그
- 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
- 사용자가 입력한 데이터를 서버로 보낼 떄 form 요소를 사용
<form action='서버에게 전달할 파일위치' method='전송방법'>
form 태그 안에 form 요소를 통해 데이터를 서버로 전달
</form>
✔전송방법
- get: url에 데이터를 포함하여 전달
- post: body에 데이터를 포함하여 전달
- input 태그: 입력 상자
- type 속성
- text: 문자를 입력받는 글상자
- password: 비밀번호를 입력받는 글상자
- radio: 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼
- ✔그룹을 맺기 위해 name 속성의 값을 동일하게 해야함 (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를 가질 수 없음)
- maxlength: 값의 최대 길이를 설정
- placeholder: 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
- value: 서버로 전달할 입력방식의 값을 설정
- checked: 라디오 또는 체크박스중에서 미리석택하는 과정을 설정
- readonly: 데이터를 볼 수 있으나 수정할 수 없게 설정
- disabled: 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달되지 않음)
- required: 데이터를 submit할 때 데이터를 필수로 입력하도록 강제하는 설정
라벨 태그에서- 폼 양식에 이름을 붙이는 요소
- 다른 요소를 연결하면 해당 영역이 넓어짐
- 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
- 라인을 모두 차지하는 요소
- p, h, ul, li, div ...
- 면의 특징을 가지고 있음
span 태그
- 줄 단위로 영역이 설정
- inline 특징을 가지고 있음
div 태그
- 면 단위로 영역이 설정
- block 특정을 가지고 있음
시맨틱 태그(Semantic)
- Semantic: 의미론적인
- 의미가 있는 태그를 사용
시맨틱 태그의 장점
- 검색엔진 최적화
- 스크린 리더를 사용하여 페이지를 탐색할 때 도움
- div>div>div>div>... 끝없는 div를 탐색하는 것보다 효율적
- 개발자에게 명확한 의미를 전달
<header> </header>
- 페이지의 제목과 같은 소개 내용을 포함
- heading 태그나 로고, 검색양식, 작성자 이름등을 포함
<nav> </nav>
- 메뉴, 목차등에 사용
<main> </main>
- 지배적인 컨텐츠 영역을 나타내는 태그
<section> </section>
- 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
- 섹션에는 항상 제목이 있는 것이 일반적
<article> </article>
- 자체로 의미가 있는 웹페이지 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서
- 개시물, 잡지, 블로그 또는 신문기사
<footer> </footer>
- 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트 등을 포함
<aside> </aside>
- 간접적으로 문서와 관련된 내용
- 사이드바