![[HTML] 웹 개요(주의사항, 기본구조)+VSCODE 설치](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fln67d%2Fbtrh9QmziW1%2FekXxMUGeJMWKctneoDqWGK%2Fimg.png)
✍인터넷
: 전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며
프로토콜을 이용하여 통신 초기에는 군사용과 민간용으로 구분되었고 민간용이 지금의 인터넷이 되었다.
✍웹(WEB)
: 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간 인터넷의 통신망 위에서 작동하는 서비스
-역사 : 팀 버너스리가 하이퍼링크(Hyper Link)를 포함하는 문서의 개념 제안
월드 와이드 웹(WWW)을 개발 및 배포
웹 표준 단체 W3C 창설
✍웹 표준
: 모든 브라우저에서 웹 서비스가 정상적으로 보여질 수 있도록 하는 것
- 각기 다르게 보여지면 사용자만 피해본다
표준안으로 HTML5를 웹 표준으로 권고
MS는 잘 안 따르는 반면 타사는 적극적으로 받아들임
MS 신 버전은 웹 표준 받아들임
🚩 웹 처리 과정
: 네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고 HTML이라는 마크업(Markup) 언어를 통해 자료를 주고 받음
- 각기 다르게 보여지면 사용자만 피해봄 표준안으로 HTML5를 웹 표준으로 권고 MS는 잘 안 따르는 반면 타사는 적극적으로 받아들임
DNS : Domain Name Server
http규약에 맞게 ㅈ소를 작성하면 dns를 거쳐서 원래 ip로 변환
그 ip에 맞는 google서버에서 메인페이지에 해당하는 html을 http규약에 맞게 반환
🚩 웹 특징
⭐HTTP(Hyper Text Transfer Protocol) 사용
⭐HTML(Hyper Text Markup Language)로 작성된 문서 연결
텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공
1. ⭐반응형 웹
웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경
✍HTML
: 웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hyper Text Markup Language)
- 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일
문자열과 이를 감싸는 일종의 해석기호인 태그들로 이루어져있다.
1. 마크업과 마크업 언어
마크업(태그)는 문서의 논리적인 구조를 정의하고 출력장치에 어떤 형태로 보일 것인지 지시하는 역할 마크업 언어는 마크업(태그)의 형식과 규칙을 정의한 언어
🚩 HTML5
1. 특징
- 구조적 설계 지원(시멘틱)
- 그래픽 및 멀티미디어 기능 강화
- CSS3 및 Javascript 지원
- 다양한 API 제공
- 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
- 웹 브라우저가 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
2. ⭐⭐⭐구성요소⭐⭐⭐
요소 기억하기!!
시작 태그+ 종료태그 + 내용= 요소
속성+ 속성 값= 속성 (시작태그에만 작성)
3. ⭐주의사항
- 태그는 대 · 소문자를 구분하지 않으나 소문자를 권장함
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로 공백을 추가하기 위해서 특수기호 를 이용해야 함
4. 기본 구조
참고) <!doctype>
더보기
doc = document
<html></html>
: html문서 시작, 끝 표시 lang은 이 페이지가 어느 나라 언어로 되어있는지를 의미
- 속성
: html 뒤에 붙는 lang을 속성이라고 함
- 속성 값
: 속성에 대한 값을 설정한 것이 속성 값 lang의 속성 값으로는 “설정 언어“가 올 수 있다.
<!-- -->
: HTML에서 사용하는 주석 코드 작성내용에 대해 설명하는 곳에 사용
브라우저는 주석 부분을 해석하지 않고 넘어간다.
Visual Studio Code 설치
반응형
'Frontend > HTML & CSS' 카테고리의 다른 글
| [CSS] 개요 , 선택자(span, id, class,*) (0) | 2021.10.27 |
|---|---|
| [HTML] w3school (0) | 2021.10.26 |
| [HTML] 영역, 이미지, 하이퍼링크, 폼 태그 (0) | 2021.10.26 |
| [HTML,CSS] 태그, 선택자 정리 사이트! (0) | 2021.10.25 |
| [HTML] 글자, 목록, 표 태그 + 예제 1~5 (0) | 2021.10.24 |