HTML 기본 내용(http 프로토콜 / 웹서버 / WAS / 클라이언트 / 웹개발 / 이클립스)

•  HTML(Hyper Text Markup Language) : 태그(Tag)를 사용하여 웹문서를 구조적으로 표현하기 위한 언어
  → 브라우저 엔진에 의해 해석되어 실행(출력)되는 언어 - 출력 전용 언어
• CSL(Client Script Language) : 클라이언트에서 해석되어 실행되는 언어 - HTML, CSS, Javascript
• 태그를 사용하여 웹문서(HTML 문서) 작성 - 태그는 대소문자를 구분하지 않는다.
• 시작태그와 종료태그가 하나의 그룹으로 묶여져서 사용된다. - HTML 태그중에는 독립 태그도 존재한다.
• 시작태그와 종료태그 안에는 하위태그(자식태그) 또는 태그내용을 작성하면 된다.
• 시작태그에는 속성과 속성값을 사용하여 태그를 다양하게 표현할 수 있다.
  → 태그에는 동일한 이름의 속성 사용이 불가능하다.
• DOCTYPE : 웹문서의 종류를 표현 - HTML5를 사용하여 작성된 웹문서(HTML 문서)임을 나타낸다.
• html 태그 : HTML 문서를 작성하기 위해 사용되는 최상위 태그
  → 하위태그 : head 태그, body 태그를 쓸 수 있다.
• head 태그 : HTML 문서에 대한 정보를 제공하기 위한 태그(브라우저에게 제공)
  → 하위태그 : meta 태그, title 태그, style 태그, script 태그, link 태그 등을 쓸 수 있다.
• meta 태그의 charset 속성을 사용해 HTML 문서의 문자형태(CharcterSet - Encoding)를 속성값으로 설정
  → 브라우저가 HTML 문서를 응답받아 해석해서 실행하기 위한 문자의 인코딩(Encoding) 방식을 제공한다.
  → 기본 속성값 : ISO-8859-1(서유럽어)
• title 태그 : 브라우저의 이름을 변경하기 위한 태그
• body 태그 : 브라우저에 출력될 내용을 제공하기 위한 태그
  → 하위태그 : header 태그(머릿부), nav 태그(메뉴), section 태그(몸체부), acticle 태그(본문), aside 태그(보조문), footer 태그(꼬릿부), div 태그, span 태그, h1 태그, p 태그 img 태그 등
• body 태그의 하위태그를 박스모델로 표현하며 블럭 레벨 태그와 인라인 레벨 태그로 구분한다.
• 블럭 레벨 태그 : 하나의 태그로 라인(Line) 전체를 모두 사용하는 태그
  → div 태그, p 태그, h1 태그, ol 태그, ul 태그 등
• 인라인 레벨 태그 : 하나의 태그로 라인(Line)의 일부분을 사용하는 태그
  → span 태그, img 태그, input 태그, select 태그 등
  → 인라인 레벨 태그의 하위태그로 블럭 레벨 태그를 사용할 수 없다.
• hr 태그 : 수평선을 출력하기 위한 태그
• width 속성 : 태그의 폭을 변경하기 위한 속성 - 속성값 : 크기(px)
  → 크기 또는 위치를 표현하는 단위 : px(기본) - 절대값, 백분율(%) - 상대값(부모크기 기준으로)
• p 태그 : 문단을 출력하기 위한 태그
• 태그 내용이 태그(박스모델)의 폭을 벗어날 경우 자동 줄바꿈 처리되어 출력된다.
• 엔터(Enter)를 사용해 줄바꿈 처리가 불가능하며 다수의 공백을 하나의 공백으로 처리한다.
• br 태그 : 줄바꿈 처리하기 위한 태그
• HTML에서 사용 불가능한 문자는 회피문자(Escape Character)로 표현하여 작성해 출력 처리 한다.
  → &nbsp; : 공백, &lt; : < 문자, &gt; : > 문자, &amp; : & 문자 등
• pre 태그 : 브라우저에 태그 내용을 그대로 출력 처리하기 위한 태그
• div 태그 : 범위를 설정하기 위한 태그 - 블럭 레벨 태그
• span 태그 : 범위를 설정하기 위한 태그 - 인라인 레벨 태그
• style 속성 : 태그에 CSS 스타일을 적용하기 위한 속성값을 설정
  → 속성값 : CSS 스타일 속성과 속성값을 사용한다.

 

 

• http(https) 프로토콜 : 웹서비스를 제공하기 위해 만들어진 프로토콜
• 서버에 클라이언트가 접속해서 웹문서(웹프로그램) 요청을 하면 서버는 웹디렉토리에서 클라이언트가 요청한 웹자원을 찾아서 웹문서 형태로 응답해준다.(일반적으로 HTML 형태 웹문서로 전달을 하는데, 꼭 그렇지만은 않고 json이나 xml 등으로 전달하는 경우도 있다.)
• 클라이언트가 서버에 접속해서 요청한것에 대해 응답이 완료되면 접속을 끊어버린다. 안그러면 웹서비스를 제공하는 서버의 메모리가 많이 사용되기 때문이다.
  

  

• 클라이언트가 요청할때 클라이언트의 정보들은 Request Message(객체)에 담아서 전달한다.
  리퀘스트 메세지에는 header와 entity body로 나눠져있는데, 정보는 header에 담기고, entity body는 일반적으로 비워져 있다.
  HTML form 태그를 이용할때 get 방식과 post 방식을 모두 사용 가능한데, 만약 post 방식을 사용하면 사용자 입력값을 entity body에 저장해서 요청을 보낸다.
  그리고 form 태그의 get 방식을 사용하면 해당 정보를 URL에 쿼리스트링으로 전달할 수 있는데, 보안성이 취약하고 커다란 데이터를 전달할 수 없다.
  → form 태그의 get 방식 : URL의 쿼리스트링을 통해 전달
  → form 태그의 post 방식 : entity body를 통해 전달
  
  
• 서버가 클라이언트가 요청한 웹문서를 줄때는 Response Message(객체)에 담아서 전달한다.
  리스폰스 메세지에는 header와 entity body로 나눠져있다. heaer에는 상태코드가 있고, entity body에는 응답하는 웹문서가 저장된다.
  그리고 header의 상태코드(Status code)가 200대일때만 entity body에 응답해야되는 웹문서를 잘 전달할 수 있다.
  → 상태코드(Status Code)
  >> 100대 : 실행중인 상태
  >> 200대 : OK → 이게 제일 중요(응답이 제대로 됐다)
  >> 300대 : 다시 요청해봐
  >> 400대 : (에러) 요청을 잘못함(웹문서 만든사람이 요청을 잘못한거)
      ==>> 404 에러 : 웹문서 경로가 잘못됨
  >> 500대 : (에러) 예외발생(실행 프로그램이 잘못한거)
  
  

리퀘스트 메시지 (클라이언트가 서버에 요청할 때)			리스폰스 메시지 (서버가 클라이언트에 응답할 때)
header	클라이언트 정보		header	상태코드(Status Code)
entity body	→ 일반적으로 비워져 있음 → HTML form 태그를 post 방식으로 사용하면 해당 사용자 입력값을 entity body에 저장해서 요청한다.		entity body	→ 응답 내용(웹문서, xml 문서, json 문서 등)을 저장함

 

• 그렇게 요청과 응답이 있으려면 서버의 웹디렉토리에 웹프로그램이 있어야 하고, 그걸 우리는 자바로 만들거다. 그걸 서블릿이라 한다.(서블릿 : 자바로 만드는 간단한 웹프로그램)

• 아파치(웹서버) + 톰캣(WAS)
  → 아파치 톰캣을 다운로드하고 이클립스에 등록해서 필요할때만 실행될 수 있도록 세팅
• 프로젝트 만들때(이클립스 기준)
  → 마우스 우클릭 >> NEW >> Others >> Dynamic Web Project