html, 제목 , 태그 ,EBMF 표시 방법

• WEB이란
  • 어플리케이션이란 
    • WEB브라우져 컨텐츠 service(주문, 정보)를 이용하는 것을 의미한다. 
  • 인터넷 기반의 경우 TCP/IP인 연결지향 프로토콜을 이용하여 오류없이 전송하는 것을 의미한다. 
    • TCP
      • 패킷을 전송하는 역활
      • 패킷의 순서 알려주는 역활 
      • 오류발생을 체크해주는 정보를 포함한다. 
    • IP
      • 컴퓨터의 호스트주소를 분석하여 인터넷을 통하여 연결하는 역활을 맡고있다. 
  • 인터넷네트워크는 TCP와 IP를 통하여 정말 많은 정보/서비스를 전달하고 있다. 

HTTP프로토콜

• 브라우져에서는 웹서버를 연결하기 위해서 어떤 규칙이 있다. (어떻게 전송하는지에 대한 규칙)
• 모든 웹서버, 웹브라우져가 http로 규정이 된 법칙으로 메세지를 보낸다. 
  • 모두가 똑같은 방법으로 제작한다. 
  • 어떤 브라우져를 사용하던지, 어떤 웹서버를 사용하던지 상관없이 
    http에서 정의한 규칙으로 메세지를 주고 받는다. 
  • 브라우져에서 클라이언트에게 보내는 것을 요청 (request)라고 하며
    클라이언트에서 웹서버로 보내는 것을 응답(response)라고 한다. 
    모두Http로 규정이 되어있다. 
  • 클라이언트에서 서버로 메세지를 보낼때 형식을 정의하고, 
    TCP/IP의 작성규칙을 이용하여 HTTP규칙에 의한 작성 메세지를 보낸다. 
• TCP는 어케 재조립하지? IP는 누구에게 보내지? 역활이다. 
• 네트워크망 - > HTTP규칙 작성 -> 와리가리 -> WEB이다. 
  • 우리는 요청메세지를 해석할 줄 알아야한다.
    웹서버를 개발하기 때문에 웹어플리케이션을 분석할 줄 알아야한다는 것이다.

웹개발자 

• 웹서버에서 구동되는 웹어플리케이션을 개발한다. 
• 웹어플리케이션을 브라우져가 보낸 요청메세지를 분석해서 클라이언트의 요청을 처리하고 
  클라이언트에게 적절한 응답content을 제공하는 프로그램이다. 
• 응답컨텐츠는 HTML, 그림, 영상, 첨부파일등이 될 수 있고, 대부분은 HTML의 컨텐츠이다. 
  • 페이지의 소스보기를 확인하면 HTML로 작성이 되어 있는 것을 확인할 수 있다. 
• 그렇기 때문에 우리는 HTML을 작성할 줄 알아야한다. 

URL 

• 리소스의 위치를 나타내는 주소이다. 
• 리소스란 (웹페이지, 웹어플리케이션, 그림, 동영상, 파일 등 )자원을 의미한다. 
• 서버에 있는 자원을 요청할 때 클라이언트가 입력하는 주소다. 
• 일반적으로 웹에서 웹브라우져(클라이언트)의 주소창이 URL을 입력하면,
  웹브라우져가 해당 URL을 서버로 전달한다.
  • 웹서버는 URL이 나타내는 주소에 해당 자원이 존재하면 그 자원을 응답으로 제공한다. 
• 자원을 요청하는 종류
  • 동적자원
    • 웹 어플리케이션
    • 요청할 때마다 달라진다. 
      
      • 누가 요청했는지에 따라서 화면이 달라지기 때문에 미리 만들 수 없다. 
  • 정적자원
    • 웹 페이지 
    • 변하지 않는 문서로 이뤄져 있다. 
      • 미리 작성한 HTML로 응답한다. 
      • 누가 요청했는지 상관없이 동일한 화면을 구현한다. 

여태까지 구현한 APP프로그램으로 컨텐츠를 구현하지 않는다 

• EX 현재 오류를 수정중인 토이프로젝트의 한 부분이다. 

  • 

    워드, 한글, 레포트, 논문 처럼 발표작업을 하는 것처럼 
    서버클라이언트에게도 그런형식의 문서를 보내주어야한다. 
    • 그 문서가 html의 형태의 문서이다. 
      • 정적지원 : 미리 생성한 문서이다. 
      • 동적지원 : 백엔드 개발자들이 주력으로 개발할 servlet(서블릿), JSP, ASP, PHP 를 의미한다. 
    • 문서 작성법에 맞춰서 html이 생성된다. 

HTML

• HyperText MarkUp Language 
  • hyperText 
    • 문서의 링크를 클릭하면 연결된 문서로 즉시 이동할 수 있는 기능을 의미한다. 
  •  Markup
    • 문서에서 어느 부분이 제목인지, 본문인지, 링크인지, 그림인지 등을 표시할 때 사용할 때 마크업(태그)를 사용한다. 
    • 문서에서 어느부분에 제목, 본문, 링크, 표, 특별기호를 사용한다. 
  • 웹용의 문서작성을 사용할 때 사용한다. 
  • html은 마크업 문서를 사용하면서, 연결되어 있는 링크를 클릭시 다른 문서로 즉시 이동할 수 있는 문서를 의미한다. 
• html : 컨텐츠를 입력한다
  
  • 제목, 소제목, 본문내용, 목록, 표, 그림등을 포함하는 문서이다. 
• css :  디자인을 작성한다.
  • 레이아웃, 글꼴, 배경색깔, 문서의 스타일을 정의한다. 
• javascrip  : 프로그램을 이용하여 사용자와 상호작용을 한다. 
  • 페이지 전환, 이벤트 처리, 팝업, 서버와의 통신, 화면갱신등을 처리한다. 
•  html과 css는 퍼블리셔의 영역이다. 그리고 javascrip은 퍼블리셔와 개발자의 영역이 확실히 구분이 되어있다.
  만들줄은 몰라도 읽을 줄은 알아야한다. 
• 기본적인 것을 알아야한다. 

W3에서 웹표준을 만든 사이트는 w3school이 있다. 

• 정보를 제공하고, web과 관련된 것은 다 존재한다. 
• 적극적인 활용이 필요하다. 
• 표준에 대해서 작성이 되어있다. 

html의 구성요소 

• 태그 
  • <,> 부등호를 이용하여 만든다. 
  • <태그이름>컨텐츠</태그이름>의 모양으로 이뤄져있다. 
    • 사이에 빈 공백이 존재해서는 안된다. 
    • 태그를 작성할 때는 여는 태그와 닫는 태그를 짝을 맞춰서 정확하게 입력해주어야한다. 
      • 짝을 안맞춰도 프로그램에서는 인식을 하기 때문에 되도록 잘 맞춰서 입력해주어야한다. 
    • 대문자로 작성해도 되지만 원칙적으로는 소문자로 작성해주어야한다. 
  • <태그이름> : 여는 태그 
  • </태그이름> : 닫는 태그 
• 태그는 부모-자식 관계의 태그가 존재한다. 
  • 자식태그는 부모태그 안에서만 사용할 수 있다. 
  • 자식태그를 작성할 때에는 부모태그안에서 들여쓰기를 해주어야한다. 
  • 부모태그는 자식태그만 가질 수 있다. 컨텐츠는 가질 수 없다. 
  • ul - il 태그 
    
    • ul은 li만 가져야한다.
    • li는 ul안에 포함되어야한다. 
    • p는 li의 부모태그가 아니다. 
    • 부모 - 자식관계는 맞게 작성해야한다. 

속성

• 태그는 속성과 함께 사용할 수 있다. 
  • 속성은 태그와 관련된 부가적인 정보, 추가기능을 정의한다. 
  • 형식 : <태그명 속성명="속성값" 속성명="속성값">
  • 속성명과 속성값사이에 공백이 있으면 안된다. 
    • <img src="images/logo.png" width="160" height="70">
  • 속성명과 속성값은 붙여서 적고, 속성값은 ""사이에 적는다. 
    • 숫자도 단순 속성값이기 때문에 ""을 입력해주어야한다. 
  • 동일한 속성명을 여러번 작성 할 수 없다. 
  • 속성명을 적을 때는 특별한 순서가 없다. 
    • 속성명에는 순서가 없지만, 중요속성정보를 앞에 작성해주는 것이 좋다. 
  • 잘못된 예 
    • 속성값에 ""을 제거한다. , ' '을 입력하지 않는다.
    • 속성값을 " ', " ' 으로 묶어 속성값을 감싸는 따음표의 짝이 맞지 않게 한다. 
• 속성
  • 태그마다 고유한 속성을 가지고 있다. 
  • 속성은 원래 사용목적에 맞게 사용해야한다. 
  • 어떤 속성은 속성값이 미리 정해진 것이 있다. 
    • 태그마다 속성이 전부 다다르기 때문에 고유한 속성도 존재한다.
  • w3school 의 html reference : 참조에서 확인한다.
    • attribute : 고유한 속성 
      • 그 태그만 가지는 속성을 의미한다. 
    • global attribute : 전역속성, 공통속성
      • 모든 태그들이 다 가진 속성을 의미한다. 
    • 태그 중에서 중요한 것 

    • 

      이렇게 표시한 4가지가 제일 중요하다. 
    • 중요태그들은 속성은 기억하는 것이 좋다. 
    • data-*로 시작하는 속성은 임의로 추가 할 수 있다. 
      • <img src="images/logo.png" data-title="회사로고"
        data-creator="홍길동" data-pubdate="2019-10-31">
        원래 존재하지 않은 속성을 data-*을 이용하여 임의로 추가하였다. 
    • 그러나 원래 속성은 임의로 정의해서 사용하는 것이 아니다. 
      • 원래 사용목적에 맞게 사용해야한다. 
        어떤 속성은 속성값이 미리 정해진 이유이다. 
    • <input type="속성값">
      <img src="이미지경로"; width="값"; height="값">
      어떤 값은 임의로 적지만 값이 이미 정해진것이 있다. 
• html작성하기 

• 

  !을 누르고 tab을 누르면 나오는 화면이다. 
  • <!DOCTYPE html>
    • doctype : 문서의 타입
    • html : 문서타입이 html이라는 의미 
  • 최상단에 꼭 위치를 해야하며, 태그는 아니다. 
  • html의 선언부이며, html의 유형을 선언하는 선언 문이다. 
  • html5의 표준을 의미한다. 
  • html1.0의 규칙 
    • <!DOCTYPE html
      
      • html 1.0의 작성규칙이다. 
    • "public -//W3C//DTDXHTML1.0Scrict//EN"
      • 이규칙은 public -공개적인 작성된 규칙이며, 아무나 확인 할 수 있다. 
      • -는 비공인 단체이며, 정부소속이 아니다. 
      • w3c : 정의한 이름 
      • DTDXHTML1.0Scrict : 작성규칙의 이름 아래 경로에 가면 있다. 
      • EN :작성규칙의 작성언어 : 영어다. 
    • "http://....DTD/xhtml...dtd"
      • 문서 작성규칙이 적힌 DTD문서이다. xhtml1.0의 작성규칙을 엄격하게 지켰다. 
    • 이것을 줄인게 html5의 선언부이다. 
      • html5가 마지막이기 때문에 6은 나오지 않는다
        기능은 html5에 추가 된다. 
      • 이 선언부가 나오면 이건 html5로 작성된 문서야 라고 인식하면된다. 
      • 브라우져는 링크가 어디있는지 알아서 가기 때문에 html5는 따로 적지 않아도 된다. 
• 브라우져안에 DTD문서가 있다. 
• 등장횟수에 나오는 기호가 존재한다.

• 

  HTML은 태그를 1개밖에 갖지 못한다. 
•  HEAD태그 사이에는 웹브라우져가 HTML문서를 해석시 필요한 정보를 정의하고, 부가적인 정보를 작성하는 곳이다. 
  • <TITLE>은 제목을 나타낸다. 그렇기 때문에 HEAD에 작성한다. 
  • 스타일 시트를 STYLE을 작성하고 디자인을 작성한다. 
  • META PROPERTY로 부가적인 정보, 프로그램을 자체적으로 활용한다. 

UTF-8문자 

• 해당 문자에 대한 유니코드의 값을 3byte씩으로 표시한 것이다. 
• ex)
  • 기안 84 = %EA %B8 %B0 %EC %95 %88 84으로 변해서 전달이 된다. 
  • 모든문자가 16진법으로 변경되어 저장된다. 
• 그렇다면 왜 유니코드는 2byte인데 3byte로 저장이 될까? 
  • 영어와 한글 + 숫자 처럼 생긴 글자가 있다면 -> 경계가 모호하다
  • 한글은 2byte 영어는 1byte로 1 + 2 + 2byte의 해석은 힘들다. 
  • 글자정보도 포함되며 글자를 구분하고 정보를 표현한다.
• 그렇다면 왜 16진수로 표현될까?
  • 16진수는 4bit로 
    2진수로 표시하면 1110 0101 길이가 길다
    2개로 나누면 1110 과 0101로 나뉘는데 
    1111 이 16진수로 0이고 
    0000 는 F로 15를 나타낸다 . 1단위로 나눠서 숫자를 보낸다. 

태그

• 태그란 컨텐츠를 담는 그릇이다. 
• java에서 int 변수 = 변수를 담는 정수 
  String 변수 = 문자열을 담는 변수 
• 제목 태그란 문서의 제목을 담는 태그 
  바디 태그란 본문의 내용을 담는 태그 이다. 
  • 컨텐츠는 다른 태그, 텍스트, 그림, 영상, 목록, 표, 링크 등이 컨텐츠이다. 
• 컨텐츠의 종류에 맞게 사용해야한다. 
• 구성요소에 맞는 적절한 태그를 사용해서 html을 작성해야한다. 

EBNF표기법 

• 프로그램의 언어의 표기법이다. 
• 확장된 바크스 now의 표기법이라는 언어로 바크스 now는 사람이름을 의미한다. 
• XML을 작성시 유용하며, 
  정규표현식에도 그대로 사용된다. 
• JavaScript에서 사용된다. 
  • A 
    • A를 한번적어라 
  • A+
    • A를 한번이상 표시하세요
  • A?
    • A는 표시하지 않아도 되고, 표시할 경우 한번만 표시할 수 있다. 
  • A*
    • A는 표시하지 않아도되고, 표시할 경우 여러번 표시할 수 있다. 
  • A,B
    • A다음에는 B를 표시한다.
  • A|B
    • A와 B중에 하나를 표시한다.