[프론트엔드] HTML 1

인터넷
전 세계에 걸쳐 원거리 접속이나 파일 전송, 전자 메일 등의 데이터 통신
서비스를 받을 수 있는 컴퓨터 네트워크의 시스템

클라이언트와 서버
클라이언트(정보를 제공받는 사용자 또는 컴퓨터)
     요청↓(마스크 검색)  ↑응답(마스크 페이지)
서버(정보를 제공하는 사용자 또는 컴퓨터)

웹 브라우저 
사용자의 요청에 맞는 주소로 찾아가서 인터넷의 컨텐츠
(문서와 그림, 멀티미디어 파일 등)를 검색 및 열람 후 사용자에게
응답하기 위한 응용 프로그램의 총칭이다. 

프로토콜(protocol)
넷 상에서 컴퓨터끼리 소통할 때 공용어를 사용해야 이해하기 편하다.
(통신하기 편하다) 그때 사용하는 공용어를 프로토콜이라 한다. 
통신하기 위해 필요한 규약

IP(Internet Protocol) 
네트워크 상에서 다른 컴퓨터와 구별할 수 있도록 고유번호(주소)를 부여하는
프로토콜 000.000.000.000

IP 확인
네이버 -> 내 아이피 검색
윈도우 검색 -> cmd -> ipconfig

 

-------------------------------------------------------------------------------------------------

HTML 
웹 사이트의 골격, 틀을 만드는 언어
~~위치에는 버튼이 있어야 해~, 여기에는 검색창이 있어야 해

CSS
HTML 문서를 시각적으로 만들어주는 언어

Javascript
컨텐츠의 내용을 바꾸고 동작하게 만드는 동적인 페이지 작성용 언어

PHP
서버쪽에서 실행되는 프로그래밍 언어이며, HTML 코드를 프로그래밍적으로 생성

Node.js
확장성 있는 네트워크 개발에 사용되는 자바스크립트 기반의 프레임워크(틀이 있어서 거기에 맞춰서 하면 된다)

React.js
웹 어플리케이션의 사용자 인터페이스(UI)를 만들기 위한 오픈소스 기반의 자바스크립트 라이브러리(디자인을 만들기 위한 라이브러리)

---------------------------------------------------------------------------------------------------------------------

* HyperText
한 문서에서 다른 문서로 접근하는 개념
HyperText를 적용한 언어는 HTML
문서에 주소를 붙이면? URL 
컴퓨터와 컴퓨터 간에 메세지를 주고받을 수 있는 통신규약 HTTP

웹 브라우저를 통해 해석되는 언어
HTML, CSS, Javascript

* HTML
HyperText Markup Language
텍스트로 페이지의 구조와 데이터를 표기하는 언어
HTML 문서는 확장자가 .html이다. 
HTML 문서는 문서를 작성할 수 있는 프로그램이라면 어디서든지 작성이 가능하다. 
HTML 문서는 대소문자를 구별하지 않는다. 
<button>Hello</button>
<Button>Hello</Button> 
HTML 문서는 띄어쓰기, 줄바꿈을 구별하지 않는다. 
HTML 문서는 태그 형태로 괄호(<명령어>)를 사용하여 표현

HTML의 요소
①<p>③You are Best②</p>

① 여는 태그 (Opening Tag) : 요소의 이름(p)과 열고 닫는 꺽쇠괄호로 구성
② 닫는 태그 (Closing Tag)   : 요소의 이름 앞에 슬래쉬(/)가 있다. 
③ 내용(Content)                : 요소의 내용이며, 단순한 텍스트이다.

1~3번을 통틀어 요소라고 한다. 
요소의 이름은 가독성을 위해서 소문자로 작성하는 것을 권장한다.

Visual Studio Code
> 설치파일 실행 > 동의 후 Next >체크박스 네개중 PATH에 추가 체크 확인

코드 실행 > 아이콘 다섯개 중 가장 아래쪽 (extension) >korean 검색 후 언어팩 받기
> 재시작 > Auto Rename Tag 검색 > 설치

파일 > 폴더 열기 > 작업할 폴더 선택 후 열기  

기본 문서 만들기
.html 파일 만든 후 ! +Enter 

 
Live Server 설치
extension > live server 검색 > 맨 위의것 설치

소스코드 > ALT+L,O

HTML의 특수문자
개행(Enter) : <br>
띄어쓰기    : &nbsp!
<   : &lt;
>   : &gt;

HTML의 주석문
HTML 문서에 영향을 주지 않는 설명을 기술하는 구간
<!-- 주석문 내용 -->
<!--개행(Enter) : &lt;br&gt;<br>
-->

* 문단 태그 
내용상 끊어서 구분할 수 있는 부분을 문단이라고 한다. 
문단을 만드는 태그
블록 태그

<p> 내용 </p>


제목 태그
제목을 표현할 수 있는 태그
검색엔진에서 키워드로 사용
가장 큰 <h1>태그부터 가장 작은 <h6> 태그까지 제공
블록 태그