[프론트엔드 입문] 1-1 인터넷 / HTML - CSS

1. 인터넷 개요

[1] 인터넷 개요

• Inter + Network의 개요
• 네트워크의 네트워크
• 정보 공유를 위해 컴퓨터와 통신망을 연결한 최대의 네트워크

[2] 인터넷 개요 - 역사

• 1969년 네트워크의 네트워크를 구현하여 모든 컴퓨터를 하나의 통신망으로 연결하고자 하는 의도에서 Internet라 명명함.
• 초기 미국 국방부의 연구목적으로 ARPANET으로 시작
• 참여 기관과 연결되는 컴퓨터가 늘어나면서 재정비 필요
  • MILNET : 군사용을 분리, ICP/IP 프로토콜 도입
  • NSFnet : 미국 국립 과학재단 슈퍼 컴퓨터들의 연결
  • Internet : 상업적 목적의 네트워크 연결

[3] 인터넷 개요 - 프로토콜

1) 프로토콜 (Protocol)

: 컴퓨터나 통신 장비 사이에서 메세지를 주고 받는 양식과 규칙체계

2) ARPANET의 프로토콜

• 초기에는 NCP 사용
• 이후 TCP/IP 프로토콜로 대체
  • TCP : 송신자와 수신자 사이의 전송 단계에서 패킷의 주소와 내용을 담당
  • IP : 패킷을 목적지까지 보내는 규칙을 정의한 프로토콜 (절대주소라고도 하며, 숫자와 '.'으로 구성된다)
• 패킷 교환 방식을 사용

[4] WWW (WEB)

• HTTP (HyperText Transfer Protocol) 기반
• 홈페이지 제작 언어를 HTML(HyperText Markup Language)
• 홈페이지 주소를 URL(Uniform Resource Locator), URI(Uniform Resource Identifier)
  • URL와 URI의 차이
    1. 인터넷 상의 파일(자원)의 위치를 의미
    2. 인터넷 상의 자원을 식별하기 위한 정의
• 웹페이지를 검색, 정보 표현 지원은 web-browser
  • Edge, Chrome, Safari, Opera, Firefow 등

[5] HTTP, HTML

• HTTP (HyperText Transfer Protocol)
• HTMl (HyperText Markup Language)
• HTML은 문서를 작성하는 언어
• HTTP는 HTML로 작성된 문서를 전송하기 위한 규약

2. HTML 구성 요소

[1] HTML 구성 요소

[2] HTML 문서의 구조

1) HypterText

• Acctive test
• 다른 웹페이지와 연결하거나
• 특정한 결과가 나타나게 하는 clicker가 된다.

2) Markup Language

: 명령어 태그(Tags)가 고유의 문서 양식과 구조를 정한다.

[3] HTML Version

[4] HTML 특징

1. 모든 플랫폼에서 이전 브라우저들과 호환 가능
2. 간소화된 문법
3. 스크립팅 API 포합
4. 다양한 새로운 기능 추가
   a. web form
   b. 멀티디ㅣ디어 지원
   c. Web storage

[5] HTM5 다양한 추가 기능

[6] HTML 새로운 요소들

1) 구조적 요소

2) 마크업 요소

3. CSS3 소개

[1] CSS 소개

: HTML로만 변형시키기 힘든 문서의 모양 등을 속성을 통해 정의하여, 홈페이지를 꾸밀 때 사용한다.

• <style> ... </style> 사용 (기존 html tag 내에 속성 지정)

4. Javascript 소개

[1] Javascript 소개

• HTML과 상호 작용성과 통적 시각효과 극대호
• 객체기반 스크립트 프로그래밍 언어
• HTML5, Canva 요소에서 자바스크립트와 같이 역동적인 웹페이지 지ㅏㄱ성
• <script> ... </script> 사용

5. HTML 프로그래밍

[1] HTML5 문서 구조