on
21.11.30 - 웹의 시작/HTML5/VS Code
21.11.30 - 웹의 시작/HTML5/VS Code
* 클라우드는 하드웨어와 관련된 것을 네트워크를 통해 빌려쓰는 것
- 인터넷이라는 네트워크 인프라를 통해 다른 쪽에서 남는
여유자산을 네트워크를 통해 빌려주는 서비스이다.
IaaS (인프라를 빌려쓰는 것)
PaaS (플랫폼을 빌려쓰는 것)
SaaS (소프트웨어를 빌려쓰는 것)
* 프론트엔드의 가장 기본이 되는 기술은 HTML
가장 처음에 나왔을 때 혁신적인 기능이 '하이퍼링크'
Mark up : 마크(기호)를 통해서 데이터를 표시하는 것
마크라는 정의된 규칙만 지킨다면 무한대의 확장이 가능함
- 버너스 리 (HTML의 창시자)
미 국방부에서 알파 프로젝트를 했고, 알파넷을 만듦
인터넷이 처음 나왔을 때는 RFC라는 그림이 하나도 없는 형태
url : 네트워크 상에 어떠한 리소스가 어디에 있다는 위치를
가지고 나타내어 식별하는 방법
URI - URL, URN
http://www.naver.com/data/file?param=data
스킴 호스트 경로 자원(파일) 파라미터
프로토콜 IP, Domain Path
CGI (Common Gateway Interface)
내가 원하는 파일이 어디 있는지 호출할 수 있음
* 모놀리식 -> 마이크로 서비스
-> 클라우드
개발, 운영 분리 -> 개발 + 운영 = DevOps
* Front-End = HTML(데이터) + CSS(스타일) + JavaScript(가공, 연산, 전달 등 동적 처리)
* Back-End = 개발 언어(Java) + 프레임워크(Spring)
- 스프링 단계 : MVC -> Boot -> Cloud
* Cloud = (AWS) IaaS -> PaaS
* 손 많이 움직이고 말로 표현하려 노력하자
- 용어가 입에 붙을 수 있도록 계속 소리내어 말하는 연습
- 프로젝트 과정 블로그 포스팅하기
(외부에서 볼 수 있도록 만들자)
* 참고 사이트
- 하나를 골라서 정해진 분량을 매일 익히자
https://www.w3schools.com/
https://developer.mozilla.org/ko/docs/Web/Tutorials
https://opentutorials.org/course/3084
* 유비쿼터스는 정보통신부, 사물인터넷은 과학기술정보통신부
유비쿼터스는 사람을 위해 정보들이 활용되는 것,
사물인터넷은 쏟아내는 정보를 가공하는 것
* 모자익 -> 넷스케이프
* 자바 애플릿 듀크 캐릭터: 그래픽 카드, 사운드 카드, 네트워크 인터페이스 카드,
하드디스크를 직접적으로 제어했던 것
=> 플러그인 기술 (브라우저의 기능 확장을 위해서 제공)
* HTML은 브라우저의 경쟁 때문에 탄생함
개발자에게도, 유저에게도 동일한 방법으로 만들고 이용할 수 있는
표준이 만들어졌다는 것이 HTML5의 큰 의미
* HTTP의 특징
- 요청(request)/응답(response) 구조
- stateless = 상태를 유지하지 않음
- 요청하지 않아도 제공하는 게 아니라,
가져가서 소비할 때까지 끊어버리는 게 효율적인 서버
/채팅, 주식은 요청하지 않아도 제공되는 케이스)
* 동일한 페이지가 나오면 정적인 자원,
로그인과 같이 달라진다면 동적인 자원
* 서버 프로그램은 동적인 자원을 만들어줌 (백엔드)
Java, C#, Ruby, Python, Javascript
<->
클라이언트 프로그램은 서버가 제공해주는 내용을 사용자들에게 보여줌 (프론트엔드)
SSS(server-side-script) : ASP, JSP, PHP
CSS(client-side-script) : Javascript, VBScript
* 노드js = 자바스크립트 실행환경
(노드js가 나오기 전엔 브라우저에서만 실행이 가능했음)
* 자바스크립트는 데이터 타입이 가변적이고 유연하게 변형될 수 있어 쉬움
* 자바스크립트에 문제가 발생하지 않도록 명확한 타입을 붙이는 게 타입스크립트
* VS Code 확장 프로그램 설치
Korean(사용법) Language Pack for Visual Studio Code
Live Server
JavaScript (ES6) code snippets
Auto Rename Tag
Bracket Pair Colorizer 2
Prettier - Code formatter
* , ... 숫자는 중요도
* 하나의 요소(Element, =Tag)에는 공백과 함께 속성(Attribute)이 올 수 있다
- 속성 = 요소의 부가 정보
* 동일한 표현 방법
=
=
= =
* 단축어
html:5 => html5 문서 템플릿을 생성
div => 생성
div#abc =>
div.xyz =>
div.xyz.ijk =>
#container =>
.container =>
도 똑같이 적용
script:src
link:css
공유하기 글 요소 저작자표시
from http://hyunsil-k.tistory.com/6 by ccl(A) rewrite - 2021-11-30 18:26:51