[211012] 웹 통신 기초
▶ 웹(WEB)
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
인터넷의 통신망 위에서 작동하는 서비스
▶ 웹 특징
HTTP(Hyper Text Transfer Protocol) 사용
HTML(Hyper Text Markup Language)로 작성된 문서 연결
텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공
▷ 반응형 웹
웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경
▶ HTML
웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hyper Text Markup Language)
웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어짐
정보(문서) ex) 텍스트, 이미지, 멀티미디어(오디오, 비디오)
▷ 마크업과 마크업 언어
마크업(태그)은 문서의 논리적인 구조를 정의하고
출력장치에 어떤 형태로 보일 것인지 지시하는 역할
마크업 언어는 마크업(태그)의 형식과 규칙을 정의한 언어
▶ HTML5
▷ 특징
- 구조적 설계 지원(시멘틱)
- 그래픽 및 멀티미디어 기능 강화
- CSS3 및 Javascript 지원
- 다양한 API 제공
- 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
- 웹 브라우저가 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
▷ 구성 요소
<p align = ‘center’> HTML/CSS </p>
시작태그 속성 속성 값 내부 문자 종료태그
- 시작태그 안에 속성, 속성 값이 설정이 된다.
- 태그를 통해 표현하고 싶은 내용이 내부 문자로 들어가게 된다.
- 대부분의 태그는 시작태그와 종료태그를 한쌍으로 이용, 전부는 아니다 종료 태그 없는 경우도 있긴 하다.
| 구성요소 | 내 용 |
| 태그(Tag) | ‘< ‘와 ‘>’로 묶인 명령어 시작태그(<태그>)와 종료태그(</태그>)를 한쌍으로 이용 |
| 요소(Element) | 시작태그와 종료태그로 이루어진 모든 명령어 하나의 HTML문서는 요소들의 집합 |
| 속성(Attribute) | 요소의 시작태그에만 사용 / 명령어 구체화 역할 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백 |
| 변수/속성값(Argument) | 속성이 가지는 값, 값 입력 시 “ ” 혹은 ‘ ’를 이용 |
▷ 주의 사항
- 태그는 대 · 소문자를 구분하지 않으나 소문자를 권장함
- 시작 태그로 시작하면 반드시 종료 태그로 종료
- 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로 공백을 추가하기 위해서 특수기호 를 이용해야 함
(non break space : 개행(break)이 아닌 공백)
▷ 기본 구조
| <!doctype html> -> 문서유형 (HTML5) <html lang=“ko”> -> 주 언어는 한국어 <head> -> 머리 문서의 각종 정보와 문서 자체에 대한 설명 내용 <title>, <meta>, <link>, <style>, <script> 등 사용 </head> <body> -> 몸체 화면에 출력해서 보여주는 모든 정보/내용 head에 들어가는 태그를 제외하고 모든 태그 사용 </body> </html> |
▶ <html></html>
html문서 시작, 끝 표시
lang은 이 페이지가 어느 나라 언어로 되어있는지를 의미
* 검색 엔진이 페이지 검색 시에 참고, 검색 사이트에서 특정 언어 제외할 때 사용
▷ 속성
html 뒤에 붙는 lang을 속성이라고 함 ex. <html lang=“ko”>
▷ 속성 값
속성에 대한 값을 설정한 것이 속성 값
lang의 속성 값으로는 “설정 언어”가 올 수 있음
| 코드 | de | en | fr | ja | ko | zh |
| 언어 | 독일어 | 영어 | 프랑스어 | 일본어 | 한국어 | 중국어 |
▶ <!-- -->
HTML에서 사용하는 주석
코드 작성 내용에 대해 설명하는 곳에 사용
브라우저는 주석 부분을 해석하지 않고 넘어감
cf.
html 추천 사이트 [1012.21:20]
mozila html
W3Schools