웹과 HTML

Unhi Park·2022년 1월 17일
0

WEB

목록 보기
2/3
post-thumbnail

HTML

= HyperText Markup Language
= 웹페이지를 만드는 컴퓨터 언어

  • html 언어의 장점 1. 쉬움 2. 중요함

  • public domain - 저작권이 없음
    웹은 특정 기업이 독점하지 않기 때문에 많은 발전이 있었음

  • tag 검색 - https://www.w3schools.com/tags/default.asp
    - 줄바꿈 - br 닫는 태그 필요없음
    - 문단 - p/p
    p가 더 좋은 태그, 왜냐하면 단락이다 라는 의미론적으로 표현해줄 수 있음
    p는 시각적으로 자유도가 떨어지지만 css라는 기술이 있음
    css에서 tag와 tag 사이에 여백을 나타내는 코드가 있음
    css를 통해 훨씬 더 정교하게 제어 가능하기 때문에 의미에 맞는 코드를 사용하는게 좋음.

  • HTML이 중요한 이유
    - 편집기를 이용해서 글을 쓴다는 것은, 콘텐츠를 만든다는 것은 내부적으로 html 코드를 생산하는 행위임.
    - 지식인의 제목은 깔끔하고 내용에 대한 정보가 담겨있지만,
    일반인의 제목은 내용에 대한 정보가 아닌, 그저 꾸밈이 되어있음.
    - 검색엔진은 전세계에 있는 모든 웹페이지를 다운로드 받아서, 그 웹페이지의 html 코드를 분석함.
    그 코드에 있는 내용에서 웹페이지의 제목과 내용등을 tag를 근거로해서 정리 정돈함.
    검색엔진에 노출되지 않는다는 것은 실질적으로 존재하지 않는다는 의미를 가짐.
    웹을 화려하게 만든것보다 웹이 갖고있는 본래의 의미, 정보를 탄탄히 하는 것이 훨씬 중요함.
    깔끔하게 하기 위해서 이미지를 이용해 글을 쓴다면 검색엔진에는 존재하지 않음 그래서 비지니스적으로 비효율적임
    - 웹의 핵심적인 철학은 접근성(accessibility)임. 웹은 모든 운영체제에서 동작하고 웹페이지의 소스코드는 누구나 볼 수 있고 웹은 저작권이 없는 순수한 공공재임.
    이것이 웹이 다른 기술과 구분되는 특별한 기술임.

  • 속성(Attribute)
    속성 = TAG의 심화된 문법
    이미지를 웹페이지에 포함시킬때 사용하는 태그의 이름은 img 임.
    하지만 태그의 이름만으로는 정보가 부족함
    속성 attribute 은 태그의 이름만으로는 정보가 부족할때 속성을 통해 더 많은 의미를 부여할 수 있음.

  • 부모 자식과 목록
    parent
    child /child
    /parent
    리스트, 테이블 만들때 이용

  • 문서의 구조

    • title tag
      사용자에게 웹페이지의 제목을 명시적으로 알려줄 수 있을 뿐만 아니라 검색엔진과 같은 기계들은 title tag를 책 표지와 같은 정보로 이용
    • meta tag
      웹브라우저가 어떤 방식으로 파일을 열어야 하는지를 결정
    • body tag
      본문을 body로 묶어야함
    • head tag
      본문을 설명하는 tag를 head로 묶어야함
    • html tag
      전체를 html로 묶어야함
    • a tag
      link하는 태그, 새탭에서 열고싶다면 target="_blank"

인터넷과 웹

  • 차이
    인터넷 안에 웹을 비롯한 웹과 동급인 여러가지 서비스(FTP, email 등)가 있음
  • 인터넷
    1960년에 인터넷 등장
    핵 화두
    당시 통신 시스템은 중앙 집중적이었기 때문에 핵 공격을 당하면 통신이 마비됨
    핵 공격에도 견딜 수 있는 강인한 통신 시스템이 필요했고 그 결과 인터넷이 발명됨
    인터넷은 중앙이 없음

  • 1990년에 웹이 등장
    웹의 시작은 swiss에서 ..! 왜? 스위스 제네바에는 CERN이라는 저명한 물리학 연구소가 있음.
    팀 버너슬리 - Enquire - 웹의 전신
    연구소에 인터넷이 들어와서 웹의 전신과 인터넷을 합성해서
    1990년 10월에 웹페이지 에디터를 만들고
    1990년 11월에 world wide web을 만들고
    1990년 12월에 웹 서버(info.cern.ch)를 만듦
    웹을 통해 인터넷이 대중화됨. - 원시웹
    참고)info.cern.ch - 최초의 웹사이트

서버와 클라이언트

인터넷이 동작하기 위해서는 컴퓨터가 최소한 2개가 있어야 하고 2개의 컴퓨터가 서로 정보를 주고받음.

  • Web Browser
    web browser가 설치된 컴퓨터가 요청 - client
  • Web Server
    web server가 설치된 컴퓨터가 응답 - server

하드디스크 안에 index.html이 저장되어있음
브라우저와 서버는 인터넷 으로 연결되어있음
웹 브라우저가 설치되어있는 컴퓨터는 인터넷을 통해서 전기적인 신호를 웹 서버가 설치되어있는 컴퓨터에 보냄
그 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음
웹 서버가 index.html 파일을 하드디스크에서 찾아서 웹 브라우저가 설치되어있는 컴퓨터로 다시 보내줌
두 개의 컴퓨터가 정보를 주고 받음

web server 사용

  • web server
    자신에 컴퓨터에 서버 설치
  • web hosting
    대행해주는 업체에게 맡김

인터넷이 연결되어있는 컴퓨터 한대한대를 host라고 함
웹 서버를 운영하기 위한 컴퓨터, host를 빌려주는 회사를 web hosting 업체라고 함.

free static web hosting - bitballon, neocities, amazonS3, google cloud storage, azure blob

웹서버 설치

웹서버를 내 컴퓨터에 설치한다면, 지금 한 컴퓨터 안에 web browser와 web server 둘 다 있음

Internet Protocal address - IP 주소
127.0.0.1 웹브라우저가 설치되어있는 컴퓨터를 가리키는 특수한 주소
전세계에 있는 모든 컴퓨터가 웹브라우저에 127.0.0.1을 치는 것은 웹 브라우저가 설치되어있는 각자의 컴퓨터에 웹서버를 가르키는 것.
웹 브라우저가 웹서버에 접속해서 파일을 요청하고 웹서버가 설정이 되어있는 파일을 읽어서 return 해줌.

http:// Hyper Text Transfer Protocol
웹브라우저와 웹서버가 서로 통신할때 사용되는 통신 규약인 http를 이용해서 데이터를 가져옴

  • file:///Desktop/web/index.html은 웹브라우저가 웹페이지를 직접 연거임
  • http://127.0.0.1 은 웹 브라우저가 같은 컴퓨터에 설치되어있는 웹서버에 접속해서 웹서버가 웹페이지를 읽어서 웹브라우저가 돌려줌

부록

  • 동영상 삽입 - 유튜브 공유 소스 확인
  • 댓글 기능 추가 - Disqus, LiveRe
  • 채팅 기능 추가 - tawk
  • 방문자 분석기 - analytics.google.com

0개의 댓글

관련 채용 정보