1. 웹이란?
1) 네트워크
- 컴퓨터와 컴퓨터를 연결해주는 망을 말한다.
- 이런 망들이 모여서 더 큰 네트워크인 인터넷이 된다.
2) 인터넷 시초
- ARPANET
3) 웹
- World Wide Web (WWW, W3)
- 인터넷에 연결된 사용자들이 서로 정보(텍스트, 이미지, 영상, 소리 등)를 공유할 수 있는 서비스를 말한다.
4) 웹 서비스
- 웹 (WWW, 통신 프로토콜 – http/https)
- 이메일 (Email, 통신 프로토콜 – STMP/POP3/IMAP)
- 파일전송 (FTP, 통신 프로토콜 – FTP/SFTP)
5) 웹 페이지란?
- 하이퍼텍스트라는 특별한 양식으로 제공하는 웹 문서이다.
6) 웹의 동작
- 클라이언트와 서버 사이를 오가며 동작한다.
- 클라이언트가 요청(request)을 하고 서버는 응답(response)을 한다.
- HTTP 통신 규약을 이용한다.
- 실어 나르는 대상인 문서는 하이퍼텍스트 양식으롷 되어 있다.
- 하이퍼텍스트는 HTML이라는 마크업 언어를 사용해서 작성한다.
7) HTML (HyperText Markup Language)
- 하이퍼텍스트를 마크업하는 언어를 말한다.
- 하이퍼텍스트는 참조를 통해서 하나의 문서에서 다른 문서로 접근할 수 있는 텍스트이다.(하이퍼링크)
- 마크는 표시의미로 표시하는 언어이다.
8) HTML 기본 구조
- <!DOCTYPE html> : 선언으로 시작한다. html의 가장 최신 버전인 html5를 사용한다고 알려주는 것이다.
- <head> 태그 : 페이지에 표시 되지 않는다. 그 대신에 페이지 정보(메타 데이터)를 제공한다.
- <meta> 태그
| <meta charset=”UTF-8″> : 문서에서 허용되는 문자 표시이다. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> : viweport : 요소를 볼 수 있는 화면을 말한다. content : “width=device-width, initial-scale=1.0” = 개인마다 갖고 있는 기기 화면에 맞춘다. |
- <title> 태그 : html 문서 제목을 표현한 것이다.
2. 태그 (Tag)
1) 꼬리표
2) HTML에서는 웹 문서에 정보를 정의해주는 형식이다.
3) <>는 시작을 알리고, </>는 끝을 알려준다.
3. Visual Studio Code 확장 프로그램
1) Auto Close Tag
2) Live Server
3) Material Icon Theme
4) Prettier – Code formatter
4. 태그 이해하기
1) <태그명> 요소 </태그명>
2) <태그명 요소 /> : 닫는 태그가 없는 형태, 자체 닫기 태그(self closing tag). ex) img, input, link 등
3) 작성태그
| h : 제목태그 br : 줄바꿈 p : 문단 지정 div : 영역 지정 span : 범위 지정 link : 현재 문서와 외부 소스를 연결해주는 태그 img : 이미지를 나타내는 태그 form : 폼(입력 양식)을 만드는 태그 button : 버튼을 만드는 태그 ol, ul, li : 리스트를 나타내는 태그 |
4) h 태그
- heading
- 제목을 나타낸다.
- 검색 엔진이 h태그에 기반하여 결과물을 보여준다. 검색되고 싶은 키워드가 있다면 h 태그에 넣으면 좋다.
- 자동으로 줄이 바뀐다.
- 숫자가 커질수록 글자크가기 작아진다.
- html 한 페이지에서 h1 태그는 한번만 사용한다.
5) br, p 태그
6) div 태그
7) link 태그 : 현재 파일이 다른 파일과 연결되어 있는 관계 정보를 표현하는데 사용한다.
| <link rel = “속성값” href=”파일 경로”> => <link rel =”stylesheet” href=”style.css”> – rel : relations – href : hyper-references |
8) img 태그
- image
- 이미지를 삽입하는 태그이다.
| <img src=”경로” alt=”설명” width=”폭” height=”높이”> – src : 이미지 경로 – alt(alternative) : 이미지를 설명하는 문구 – width : 이미지 가로 크기 – height : 이미지 세로 크기 |
9) form 태그
- 사용 시 입력 양식을 만들 때 사용한다.
- input, label 등과 같이 많이 쓰인다.
| <form>form 요소 태그</form> |
<label> : 상품에 스티커 라벨을 붙이듯이 폼에 이름을 붙여주는 것이다.
- for : label이 설명하는 input 등의 id를 지정한다.
- action : form 태그의 input태그 type 속성을 “submit”으로 준다. 제출 버튼을 눌렀을 때 입력값을 처리할 대상을 지정해준다.(이동하라고 지정함.)
- id : 이름의 지정해주는 역할
- type : input태그의 속성을 결정한다.
| – text : 텍스트입력 – checkbox : 체크박스 – password : 패스워드 – date : 날짜 |
10) button 태그
- 클릭할 버튼을 만들 때 사용한다.
| – button : 누를 수 있는 버튼 – submit : form을 제출하는 버튼 – reset : form 입력 값을 초기화하는 버튼 |
11) 리스트 태그 : ol, ul
| – ol (ordered list) : 순서가 있는 리스트를 만들 때 – ul (unordered list) : 순서가 없는 리스트를 만들 때 – li (list item) : 목록을 구성하는 개별 항목(아이템) |
5. HTML 특징
1) 태그의 부모 자식 관계가 있다.
2) HTML과 검색되는 텍스트를 만들 필요가 있다.
3) 검색 엔진 최적화
- 검색 엔진
| – 여러 웹 사이트나 웹 페이지 등을 검색해주는 시스템이나 프로그램 등을 통칭한다. – 웹에서 원하는 정보를 찾는데 걸리는 시간을 최소화해준다. |
- 메타 태그
| – 검색 엔진에 정보를 제공할 목적의 태그 – head 태그에는 메타 데이터가 들어가고 이 메타 데이터는 추후에 검색 엔진이 웹 페이지를 읽을 때 사용된다. |
- 시멘틱 태그 : 웹 페이지 구조를 구성하는 태그이고, 검색 엔진 봇이 읽을 수 있는 문서 구조를 작성하는 데 사용한다.
| <header></header> : 소개 요소 또는 탐색 링크를 나타낸다. <nav></nav> : 주로 메뉴를 구현한다. <section></section> : 본문 내용을 포함하는 공간이다. <article></article> : 독립적 요소이다. <aside></aside> : 사이드바처럼 좌우에 위치하는 공간이다. <footer></footer> : 문서 하단을 정의한다. |
- 비 시멘틱 태그 : 요소에 대하여 어떤 설명도 하지 않는 태그 (div, span)