HTML 20231127 [개념 설명] - HTML

 

HTML.txt

 

■■■ HTML ■■■


○ 개요
  
   HTML 이란 Hyper Text Markup Language 의 약어로,
   웹 페이지를 기술하기 위한 언어이다.
   마크업 언어(Markup Language)는 텍스트에 태그(ex <title>)를 붙여서
   텍스트가 문서의 어디에 해당하는지를 기술한 것이다.
   기본적으로 시작 태그가 있으면 종료 태그가 있다는 것을 알아두자.
   (ex `<title>문서의 제목</title>`)



○ HTML 의 변천사
   
   최초의 HTML 은 팀 버너스리 라는 CERN(유럽 원자핵 공동 연구소)의
   물리학자가 만들었다.
   이후 W3C(World Wide Web Consortium)이 창립되어
   팀 버너스리의 주도 아래 HTML 에 대한 표준을 관장하고 있다.

   - 1989년
      HTML 의 시작은 CERN의 팀 버너스리가 인콰이어를 제안하면서 시작되었다.
      인콰이어는 CERN의 연구원들이 문서를 이용 / 공유하기 위한 체계였다.
      1989년 팀 버너스리는 CERN 측에 자금 지원을 요청했지만
      인콰이어 프로젝트는 CERN 으로부터 정식으로 채택받지 못했다고 한다.
 
   - 1991년
     비공식적인 CERN의 문서를 보면 1991년 말 팀 버너스리가 HTML 태그를 대중에게 언급했다고 한다.
     HTML 기본서에서 제일 먼저 언급되는 HTML 태그가 1991년에 처음으로 공개된 것이다.
     이 때 만들어진 태그 중 일부가 HTML 4 버전에도 여전히 존재한다.


   - 1992년
     1992년 7월 HTML DTD 1.0 의 첫 번째 비공식 초안이 나왔으며
     11월 HTML DTD 1.1 비공식 초안이 발표되었다.

     ※ DTD(Document Type Declaration)
        DOCTYPE 이라고 불린다.
        DTD 는 HTML 이나 XML 문서에서 사용이 허가되는 요소나 속성을 정의한 것이다.
        즉, HTML 이나 XML 이 특정 형식 정의를 따르고 있다는 것을
        웹 브라우저에 알려주는 것을 말한다.
        간단하게 말하자면, "이러이러한 형식으로 문서가 작성되었습니다."
        라고 선언하는 것이다.


   - (중략...)

   - 1999년 ~ 2000년
   - 1999년 12월 HTML 4.01 이 발표되었다.
     새로운 Style Sheet 추가, Short Table 추가 등의 수정 사항이 있었다.
     2000년 1월에는 W3C에서 XHTML 1.0 권고안이 발표되고
     이를 표준으로 집중시키려 하게 된다.


     ※ XML(eXtensible Markup Language)
        W3C 에서 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다.
        XML 은 주로 다른 시스템, 특히 인터넷이 연결된 시스템끼리
        데이터를 쉽게 주고받을 수 있게 하여 XML 의 한계를 극복할 목적으로 만들어졌다.
    
    - 2001년
      2001년 5월 W3C 에서는 XHTML 1.1 권고안을 발표하였다.
      XHTML 1.1 은 모듈 기반의 XHTML 이다.



    - 2002년 ~ 2006년
      2002년 8월부터 2006년 7월 까지 총 8 번의 XHTML 2.0 초안을 W3C 에서 발표한다.
      하지만, 하위 호환성 문제와 HTML5 에 의해서 XHTML 2.0 은 2009 년에 개발이 중단된다.


    - 2007년 ~ 2014년
      2007년 Web Application 1.0 이 XHTML 2.0 을 앞서면서(호환성 문제)
      W3C 는 Web Application 1.0 을 기초로 HTML Working Group 을 출범시키고,
      이 표준안의 명칭을 HTML5 로 변경하였다. (HTML5 가 이름을 얻은 순간)
      HTML5 는 다양하고 새로운 기능들과 함께 HTML4, XHTML1, DOM Level 2 HTML 을 포함한다.
      (호환성을 갖고 있다는 의미)


      2008년 1월 HTML 명세에 대한 '첫 번째 공개 작업 초안'이 공표된다.
      그리고 현재 HTML5 는 2014년 10월 28일 기준 표준 권고안으로 확정되었다.

      1989년 부터 HTML 은 등장 이후
      1999년에 4.01, 2014년에 HTML5 까지 나오게 된다.


○ HTML 과 웹 브라우저

   우리가 보는 웹 페이지는 사실 HTML 문서이다.
   텍스트 기반으로 작성한 문서를 웹 브라우저가 시각적으로 향상된 형태로
   해석해서 우리에게 보여주게 되는 것이다.
   웹 브라우저마다 여러가지 장단점이 있다.
   우리나라 같은 경우는 ActiveX 등 여러 이슈로 인터넷 익스플로러를 
   많이 사용하게 되었지만, HTML 5 를 가장 잘 지원하는 브라우저는 크롬이며, 
   지금에 와서는 브라우저들마다 큰 차이가 없게 되었따.
   (2023년 11월 27일 기준)


    ※ HTML5 호환성 정보 확인 → http://html5test.com


★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
○ HTML5 웹 표준 기술과 API

   1. 웹 페이지의 내용은 HTML로 작성한다. (구조)
   2. 웹 페이지의 스타일은 CSS로 작성한다. (표현)
   3. 웹 페이지의 상호작용(동작, 행위)은 Javascript 로 작성한다. (기능)
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

   ※ 구조와 표현과 기능을 분리한다~!!! check~!!!

   오래전부터 이와 같은 개발 방식을 사용하고는 있었지만
   HTML5 부터 웹 표준 기술로 확립되었다.
   이와 같이 작업하면 웹 프로그래머와 웹 디자이너라는 업무 영역을
   나눌 수 있기 때문에 효율적인 개발이 가능하다.

○ HTML4.01 에서 HTML5로 넘어오면서 바뀐 점은
   『https://ko.wikipedia.org/wiki/HTML5』
   를 참조하여 확인할 수 있도록 한다.

   해당 URL 의 Document 에서 빠진 항목을 보충하자면
   - 오프라인으로 웹 어플리케이션 실행 가능
   - 드래그 앤 드롭
   - 웹 스토리지
   - 위치 정보 제공
   - 웹 SQL 데이터베이스
   - 파일 업로드와 관리 기능 제공
   - 웹 소켓 API
   등이 있다.
    
 


http://localhost:3306/WebApp01/FirstHTML.html


http://www.naver.com:80

웹 서버 포트번호가 80이다. (생략 가능)



도메인 등록   (비용) -- url을 구매하는것.

http://www.kimhojin.com:80 → http://211.238.142.155:80 root

웹 호스팅 서비스  (비용)
   문서 적재

 

 

 

개인 필기

 

html, css 활용해서
웹에서 찾아보면서 하기...

이력서, 자기소개서 만들어서 제출해보자...
(취소취소)




웹 서버 → 클라이언트
	←

서버(은행직원) 클라이언트(은행방문손님)


인터넷 =/= 웹



Web(world wide web, w3) 팀 버너스 리

[w3c : 1994년에 창설한 재단]

웹 표준 및 html 표준을 지정하는 기관이다.(강제성 없음.)

html4(1997.12) → html5

html4가 가장 오래, 가장 안정적으로 사용했던 버전이다.


인터넷 공용공간 안에 웹을 기반으로 한 문서 존재.
파일 자체를 번역, 해석...

웹 문서를 어떤 규약에 따라 작성? -HTML4가 가장 많음.
그 문법에 준해서 만들어져 있는 것.
이를 해석하여 읽을 수 있게끔 하는 것이 웹 브라우저.


웹 브라우저 전쟁에 대한 책을 읽어보세요.
웹 브라우저 1차, 2차 전쟁... HTML이 어떻게 변해왔구나. XML이 뭐구나... 등을 알 수 있다.


넷스케이프 : 가장 점유율이 높게끔 구성한 브라우저.
마이크로 소프트에서 자신이 만든 윈도우 운영체제 안에 인터넷 익스플로러를 넣은 형태로 판매.

넷스케이프가 더 사용자 편의성을 고려해 만들었지만,
마이크로소프트가 인터넷 익스플로러 만들자 대부분의 사용자가 인터넷 익스플로러를 사용함.
[1차 웹 브라우저 전쟁]


HTML : 에러에 대해 관대하다. 문법적으로 올바르지 않더라도 실행은 시켜준다. 유연하다.

HTML 문법을 조금씩 벗어난 웹이 더 인기를 끌게 됐다.
더 화려하고 독특한 것...


액티브 엑스 플러그인


익스플로러를 제외한 애플, 모질라, 오페라 등의 브라우저 기업들간
독자적인 새 웹 표준 기관 설립 = WHATWG

Markup language : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지.

XML  : 딱딱하고 문법에 굉장히 예민함
HTML : 유연하고 에러에 관대함.

XHTML2.0 폐기


html + xhtml → html5


A 브라우저에서는 보이는데 B 브라우저에서 다 깨져서 보이거나 안 보이면 안 된다!
어떤 프로그램을 통해서 여느냐에 따라 달라지면 안 된다!

---> 표준을 정하자! 이 규칙은 반드시 지켜서 웹을 만들자.


웹 표준을 지키지 않은 브라우저에서는, 시청각 장애인들의 번역(웹에 적힌 내용 읽어주기, 소리 글자로 표현)
이 정확히 이루어지지 않음.



==>> 웹 표준


익스플로러가 최고 점유율.


크롬 사파리 파이어폭스 인터넷 익스플로러 엣지 등이 독보적이었다.


구글 : 검색엔진 최고. -> 크롬이 검색엔진 유사해서 가장 사용율이 높음





웹 : 요청을 주고받는것.

url : 웹에서 어떤 대상을 구분하는 주소.


같은 사이트일지라도 브라우저의 종류마다 또는 브라우저의 버전마다 다른 이유는
웹 표준이 없기 때문


웹 표준 기술

HTML5 : 웹 페이지 구성
CSS3 : 스타일 적용
자바스크립트 : 사용자 반응 처리 등등 (기능, 동작, 행위)



HTML = Hyper Text Markup Language


Hyper Text : Link
Markup : <tag>


웹 문서 작성 : HTML
읽기 : 웹 브라우저

하이퍼링크 - 전 세계 문서가 연결(.)되기 때문에 인터넷을 월드 와이드웹(World wide web)이라고 부른다.



CSS : Cascading Style Sheets

Cascade : 연쇄적인 반응이 나타나는 것을 의미
          부모 것을 삭제하면, 연쇄적으로 자식의 레코드가 삭제될 때 사용했던 옵션.


HTML 페이지에 스타일을 지정하는 스타일 시트를 작성할 때 사용하는 언어



자바 스크립트 : 사용자 반응 등을 처리하는 스크립트를 작성하는 언어





글자 태그 (쓰지 마라!)
b : 굵은 글자
i : 기울어진 글자

시작적으로 디자인에 해당하는 문법이므로... HTML에서는 쓰지 말자!


써도 된다! 왜?

시각적인 것을 위해 sub 태그 X
논리적으로 글자를 수식하는 의도로 구조화시켜서 사용했다면 O!!

small : 작은 글자
sub : 아래 첨자
sup : 위 첨자
ins : 밑줄 글자
del : 취소선이 그어진 글자


del = 이것은 삭제된 형태라는 것을 남겨두기 위해 사용.




ul = 순서가 없는 목록 (메뉴 구성 : 짜장면, 짬뽕, 탕수육)
ol = 순서가 있는 목록 (메뉴 구성 : ⅰ짜장면, ⅱ짬뽕, ⅲ 탕수육)



table 표 삽입

태그   설명
==============================
tr = 표에 행 삽입
th = 표의 제목 셀 생성
td = 표의 일반 셀 생성



행들끼리 결합 rowspan

컬럼끼리 결합 colspan



<img> 내용물을 가질 수 없는 태그.


서버 쪽에 전달할 경우 form 태그 영역 안에 작성한다.

 ∨ 논리합
 ∧ 논리곱


submit : form태그 안에 있는 모든 내용을 서버로 전송



<div> ... </div>

공간 분할 태그

<table>
</table>


div - 블럭형식으로 공간분할
span - 인라인 형식으로 공간분할