AI교육과정 - HTML.2

단비·2022년 10월 24일

html

AI교육과정

목록 보기

17/69

😣 닷홈 호스팅 주의사항

HTML 디렉토리에 파일 업로드
첫 페이지는 항상 index.html로 업로드(무조건 소문자)

FTP(File Transfer Protocol)
- 클라이언트 - 서버(C/S)용 프로토콜
- 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공
- 클라이언트가 서버로 파일을 전달
- 주로 대량의 파일을 처리할 때 사용
- 기본포트 : 21번
호스팅
- 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스
ftp-simle
- 비주얼스튜디오코드에 FTP 프로그램 사용
  
  f1 - ftp-simple: conpig -FTP connection setting 을 선택
  
  f1 - ftp-simple: remote directory open to workspace

아이프레임

inline frame 의 약자

웹사이트 안에 또 다른 웹사이트를 삽입

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

폼 태그
- 웹페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
- 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용
```
		<form action="서버에게 전달할 파일위치" method="전송방법">
	form 태그 안에 form 요소를 통해 데이터를 서버로 전달
</form>
```
입력 상자 <input>
- type 속성
  - text: 문자를 입력 받는 글상자
  - password: 비밀번호를 입력 받는 글상자
  - radio: 여러 개의 옵션 중에서 단 하나의 옵션만을 입력 받을 수 있도록 하는 버튼
    - 그룹을 맺기 위해 name 속성의 값이 동일해야함
  - checkbox: 여러 개의 옵션 중에서 다수의 옵션을 입력 받을 수 있도록 하는 버튼 (자바에서 배열로 받을 수 있음)
  - 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>
```
버튼
- 기본 기능은 <input type=”submit”>
- 일반 버튼으로 사용하려면 <button type=”button”></button>
```
<button>버튼에 쓰일 텍스트</button>
```
선택상자
- 여러 개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 선택
```
<select name=''>
	<option value="">아이템1</option>
	<option value="">아이템1</option>
	...
</select>
```
여러줄 글상자
- 여러줄의 텍스트를 입력받는 글상자
```
<textarea name="">value</textarea>
```

HTMl의 디스플레이
1. inline
  - content 크기만큼 자리를 차지하는 요소
  - 텍스트, img, span
  - 문자(텍스트)의 특징을 가지고 있음
2. block
  - 라인을 모두 차지하는 요소
  - p, h, ul, li, div…
  - 면의 특징을 가지고 있음
- span 태그
  - 줄 단위로 영역이 설정
  - inline 특징을 가지고 있음
- div 태그
  - 면 단위로 영역이 설정
  - block 특징을 가지고 있음
시맨틱 태그
- Semantic: 의미론적인
- 의미가 있는 태그를 사용
  
  😋 시맨틱 태그의 장점
1. 검색엔진 최적화
2. 스크린 리더를 사용하여 페이지를 탐색할 때 도움
3. 끝없는 div를 탐색하는 것보다 효율적
4. 개발자에게 명확한 의미를 전달
- header
  - 페이지의 제목과 같은 소개 내용을 포함
  - heading 태그나 로고 저작권 정보, 검색 양식, 작성자 이름 등을 포함
- nav
  - 메뉴, 목차 등에 사용
- main
  - 지배적인 컨텐츠 영역을 나타내는 태그
- section
  - 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
  - 섹션에는 항상 제목이 있는 것이 일반적
- article
  - 자체로 의미가 있는 웹사이트 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서
  - 게시물, 잡지 또는 신문기사
- footer
  - 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트를 포함
- aside
  - 간적적으로 문서와 관련된 내용
  - 사이드바 또는 콜아웃 상자

indent-rainbow : 들여쓰기에 컬러가 입혀짐

CSS(Cascading Style Sheets)
- 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
CSS 문법
- HTML <head> 요소 안에 <style> 요소를 사용하여 CSS 문법을 적용
```
선택자 {속성명1: 속성값;...}
```
주석문
- / ~ / 사이에 내용을 입력
CSS를 적용하는 방법
1. inline 스타일
  - HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
2. 내부 스타일
  - HTML 문서의 <head>~</head> 사이에 <style>~</style> 요소를 사용하여 적용하는 방법
3. 외부 스타일
  - 웹 사이트 전체의 스타일을 하나의 파일에서 변경
```
<link href="css 파일경로" rel="stylesheet">
```
  😑 rel
  
  현재 문서와 링크된 문서 사이의 연관 관계를 명시
선택자
1. 전체 선택자
  - 스타일을 모든 요소에 적용
  😣 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선
2. 요소 선택자
  - 특정 요소가 쓰인 모든 요소에 스타일을 적용
  🙄 상속
  
  부모 요소의 속성값이 자식 요소에게 전달되는 것

단비

tistory로 이전! https://sweet-rain-kim.tistory.com/

이전 포스트

AI교육과정 - HTML.1

다음 포스트

AI교육과정 - HTML.2

AI교육과정

AI교육과정 - HTML.1

AI교육과정 - CSS.1

0개의 댓글