[WEB] HTML과 Internet

• Web
  • public domain
  • 자유로운 개발 가능

• Webpage의 확장자: .html

• Webpage를 만들기 위한 준비물
  • Web Browser
  • editor
    • HTML을 작성하는 프로그램

• 웹 브라우저에서 html 파일 열기
  • html에 작성한 내용을 웹 브라우저에 띄울 수 있다

• HTML(HyperText Markup Language)
  • 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어
  • 마크업 언어
    • 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종

• HTML이 중요한 이유
  • 제목 tag를 기준으로 정보를 찾는 검색 엔진
    • 노출도가 높다
  • 개방성, 접근성
    • ex:) 시각 장애인을 위한 screen reader
    • 만약 이미지로 글을 작성했다면? >> 접근이 어려움

• tag
  • <open> ... </close>
  • 내용을 감쌀 필요 없으면 태그 하나만 사용
    • ex:) <br>
  • tag를 사용하지 않으면 html 파일에서 줄바꿈을 하더라도 웹 브라우저에 반영되지 않는다
  • style="margin"
    • css 속성
    • 태그와 태그 사이의 여백
  • 의미에 맞는 태그를 사용하는 것이 중요하다
    • <br> vs. <p>

• 부모 태그와 자식 태그
  • 태그의 포함 관계
  • ex:) <li>의 부모 태그 <ul>(unordered list)

<parent>
	<child></child>
</parent>

<ul>
	<li></li>
</ul>

• ol(ordered list)
  • 목록 자동 numbering

• <a href=>
  • html tag의 제왕
  • 링크 걸기
  • anchor + hyperlink + reference

• 속성(attribute)
  • tag의 이름만으로는 정보가 부족하다
  • 속성을 통해 더 많은 정보 부여
    • ex:) <img src="temp.jpg" width="100%">

• WEB의 역사
  • internet은 도시와 도로, web은 건물과 자동차
  • internet 내부에 web과 ftp와 email 등이 존재
  • 1960년, internet의 탄생
    • 핵 개발로 비롯된 강인한 통신 시스템 필요
    • 기존 시스템은 중앙 집중
    • 인터넷은 분산 시스템
  • 1990년, web의 탄생
    • 스위스 CERN(유럽 입자 물리학 연구소)의 팀 버너스 리가 web의 전신 개발
    • 컴퓨터로 정보를 표현하는 방법에 대한 연구
    • 연구소에 인터넷이 도입됨에 따라 인터넷과 그의 연구를 합성하여 웹 페이지 편집 프로그램 개발
  • 최초의 웹 브라우저(프로그램)
    • World Wide Web
    • 원시 웹
  • 최초의 웹 서버(프로그램)
    • 도메인 네임: info.cern.ch
    • [참고] http://info.cern.ch/
  • 인터넷의 대중화
    • 웹과의 결합

• 인터넷
  • 컴퓨터 두 대로 실현 가능
    • 웹 서버
    • 웹 브라우저
    • 인터넷이 두 프로그램을 연결

• 웹 서버 컴퓨터(response/server)
  • 주소(도메인)를 가짐
  • index.html 파일 저장
  • ex:) http://info.cern.ch와 index.html
  • 웹 브라우저의 요청에 따라 index.html 파일을 찾아 그 내용을 브라우저에 전달
  • 웹 브라우저와 마찬가지로 설치 후 사용 가능한 프로그램
  • 웹 서버를 다룬다는 것은 내 컴퓨터의 프로그램을 다른 사람(client)들이 사용할 수 있도록 한다는 것
  • 실현 방법
    • web hosting(대행) vs. web server(직접 구현)

• 웹 브라우저 컴퓨터(request/client)
  • 주소를 입력
  • ex:) http://info.cern.ch/index.html
  • 인터넷을 통해 해당 주소로 전기적 신호를 보냄
  • 신호 내부에는 index.html의 내용을 알고 싶다는 메세지가 담김
  • 웹 브라우저가 index.html 파일의 내용을 해석하여 브라우저에 띄움

• 호스트
  • 인터넷에 연결된 하나의 컴퓨터
  • 호스팅(클라우드)
    • 이러한 컴퓨터를 빌려주는 사업
    • 웹을 동작하도록 하는 소프트웨어까지 대행해주는 웹 호스팅
  • 웹 호스팅 업체
    • 웹 서버를 전문적으로 빌려주는 비즈니스

• github을 통해 제작한 웹 페이지 서비스하기
  • settings - pages
  • branch를 master로 설정하고 save
  • 주소 생성(파일 경로)
  • [참고] https://tataki26.github.io/opentutorials-web/html
  • actions를 통해 저장소에서 일어나고 있는 작업들의 상태 확인 가능
    • build - deploy(배치)
  • 변경 사항이 있으면 commit 후, 위 작업 다시 반복

• 호스팅 과정
  • 우리가 가지고 있는 index.html을 호스팅 사이트에 업로드
  • 호스팅 업체에서 호스팅 서버를 활성화 시켜 해당 컴퓨터에 도메인(이름) 부여
  • 방문자가 도메인에 접속하면 웹 서버가 index.html을 읽음
  • 웹 서버가 index.html을 방문자에게 전달
  • 방문자의 웹 브라우저에 웹 페이지(index.html) 표시

• 웹 서버 직접 운영하기(Web Server for Chrome)
  • 웹 폴더 선택 >> 웹 서버 url 제공
  • 서버를 켜야 해당 url에서 웹 페이지 접근 가능

• 웹 서버 vs. 파일 열기
  • 파일 열기(file:///)는 웹 브라우저가 직접 index.html을 연 것
    • 서버와 클라이언트가 각각 다른 컴퓨터인 경우 사용X
  • 웹 서버(http://)를 통한 접속은 같은 컴퓨터에 설치되어 있는 웹 서버에 접속해서 웹 서버가 index.html을 읽어서 웹 브라우저에 전달한 것

• http
  • Hyper Text Transfer Protocol
  • Hyper: 웹 페이지
  • 웹 페이지를 전송하기 위해 고안 된 통신 규약
  • 웹 서버와 웹 브라우저가 통신하기 위한 규약

• Internet Protocol Address
  • 127.0.0.1
    • 나 자신(local host):
    • 웹 브라우저가 설치된 컴퓨터의 웹 서버
  • 컴퓨터와 컴퓨터가 서로 통신할 때 사용하는 IP 주소

• 다른 컴퓨터로 접속해보기
  • 컴퓨터 한 대와 휴대폰 한 대
  • 두 개가 같은 네트워크(wifi)에 접속해야 한다
    • Accessible on local network 설정 ON
  • 새로운 IP 추가
    • 다른 컴퓨터가 접속할 수 있는 IP
  • 휴대폰에서 새로운 IP로 접속
    • 안되면 컴퓨터 방화벽 일시 해제

• 웹 서버 직접 운영하기(Apache)
  • WAMP 설치
    • Windows Apache MySQL PHP
    • Windows 환경에서 Apache 설치하기
    • manager-windows
  • manage servers 탭에서 apache 서버 on/off 가능
  • 서버 on 후, 브라우저에 localhost 입력하여 접속

• http://127.0.0.1/index.html
  • index.html 파일을 웹 브라우저에 출력
  • index.html 위치
    • Binami의 Apache 설치 위치에서 htdocs 폴더에 존재
      - htdocs의 폴더 내부에 작성한 html 코드를 넣으면 그 코드가 실행됨

• 오른쪽 마우스 - 페이지 소스 보기
  • 특정 웹 페이지의 html 코드 확인 가능

• 메뉴얼 보는 팁
  • 예제를 먼저 확인하고 정의를 읽는다

• 통계에 기반한 학습
  • [참고] https://www.advancedwebranking.com/seo/html-study/
  • 자주 쓰는 html tag
    

• html 공식 매뉴얼
  • html specification
  • [참고] https://www.w3.org/TR/2011/WD-html5-20110405/