🗒️ Programming/HTML5 (39)

1. 2017.05.19 HTML5의 특징

   - HTML5에서는 HTML4에 비해 태그의 의미를 분명히 하도록 되어 있음. * 문서형 정의의 간략화 - HTML5에서는 HTML 문서의 맨 앞에 쓰는 DOCTYPE 선언의 표기를 간략화하고 있음. HTML5 : HTML 4.01 : 문서형 정의(DTD: Document Type Definition) : HTML4에서는 HTML문서의 형과 버전, 언어를 정의함. - 웹 브라우저는 이 선언을 보고 HTML 문서가 어떤 버전으로 작성되었는지를 판단하고 동작을 바꿈. - HTML5에서는 표준 스타일을 CSS, 표준 스크립트를 JavaScript로 정하고 있음. 이 때문에 type 속성을 생략하고 CSS나 JavaScript를 그대로 이용할 수 있음. [CSS] HTML5 : HTML 4.01 : [JavaS..
2. 2017.05.19 HTML5란?

   * HTML5 - 2012년 3월 W3C(World Wide Web Cnsortium)가 사양을 책정한 차세대 마크업 언어. - HTML 4.01을 대신하여 점점 고도화되는 웹 애플리케이션, 웹 콘텐츠를 처리할 수 있도록 사양을 고려하고 있음. - 지금까지는 그래픽 그리기나 페이지 이동을 수반하지 않은 통신 등 HTML에서 구현할 수 없는 기능은 Adobe Flash나 Microsoft Silverlight와 같은 애드온을 통해 구현해 왔으나 HTML5에는 이러한 것들이 표준 사양으로 들어가 있음. HTML 사양의 역사 1993년 HTML 1.0 1995년 HTML 2.0 1997년 HTML 3.2 1997년 HTML 4.0 1999년 HTML 4.1 (사실 W3C는 HTML을 대신할 마크업 언어로 XH..
3. 2017.05.18 HTTP 리스폰스 헤더

   - 서버는 웹 브라우저(클라이언트)의 요청에 대해 HTTP 리스폰스를 보냄. - 리스폰스의 구문은 아래와 같음. Status: HTTP/1.1 200 OK // 통신 상태(200번은 성공을 나타냄.) Content-Length: 21185 Content-Type: text/html // 내용이 HTML이라는 것을 나타냄. Content-Location: http://www.cyber.co.kr/index.html Last-Modified: Wed, 02 Nov 2011 11:05:28 GMT Accept-Ranges: bytes ETag: "1fb559544f99cc1:2a5" Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET Date: Thu, 08 Mar 2012 ..
4. 2017.05.17 XHTML

   * XML이란?- XML이란, HTML과 비슷한 마크업 언어의 일종으로, HTML처럼 웹 페이지를 표시하는 것이 아니라 다양한 데이터를 취급하는 데 널리 사용됨.- 또한 HTML보다 규칙이 엄격하여 확장성이 뛰어남.- HTML은 정해진 태그를 사용하여 웹 페이지를 나타냄.- XML은 작성자가 자유롭게 이름 붙인 태그를 사용하여 범용적인 데이터를 나타냄. * XHTML이란?- XML의 작성 규칙을 HTML에 도입하여 HTML의 장점과 XML의 장점을 조합한 마크업 언어. * XHTML의 작성 규칙- XHTML은 HTML과 높은 호환성을 갖고 있지만 작성 방법에 있어서는 몇 가지 차이가 있음. 1) 요소와 속성은 소문자로 작성함.그림책에 대해 (O)그림책에 대해 (X) // HTML에서는 요소와 속성의 대소..
5. 2017.05.17 메타 요소

   - 메타 요소를 지정하면 HTML 파일에 정보를 부여할 수 있음. * 메타 정보 - HTML 파일 안에는 메타 정보라는, 화면에는 표시되지 않는 정보를 심어 넣을 수 있음. - 메타 정보에는 웹 페이지 언어의 종류 등을 저장하는데, 이는 웹 브라우저나 검색 엔진용 정보로 이용됨. * meta 태그 - meta 태그는 메타 정보를 지정하기 위한 태그. - 속성의 종류에 따라 HTML 문서의 내용이나 문자 코드, 검색 엔진용 키워드 등을 지정할 수 있음. - meta 요소는 해더()안에 작성함. - name 속성을 지정하면 작성자의 정보나 키워드 같은 문서 정보를 심어 넣을 수 있음. - http-equiv 속성을 지정하면 언어나 스타일 같은 정보를 심어 넣을 수 있음. ... ... * 메타 정보의 종류 ..
6. 2017.05.17 요소의 지정

   * id와 class - 속성 중에는 글로벌 속성이라는 거의 모든 요소에 지정할 수 있는 것이 있음. - 그중에서도 중요한 것이 'id 속성'과 'class 속성' - 이러한 것은 스타일시트나 JavaScript와의 연결에 사용됨. * id 속성 - id 속성은 요소에 식별자를 지정함. - 하나의 도큐먼트 안에는 동일한 이름의 id를 지정할 수 없음. * class 속성 - class 속성은 요소에 클래스명을 지정함. - 하나의 도큐먼트 안에 동일한 클래스를 여러 개 지정할 수 있음. * 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 그림책 소개 p.text { color: #999999; } #header { ..
7. 2017.05.17 폼 (Form)

   - 폼은 데이터를 선택하거나 입력하기 위한 부품. - 폼의 내용은 form 요소 안에 작성함. action 속성을 사용하여 송신할 곳의 URL을 지정하거나 method 속성을 사용하여 통신 방법(GET 또는 POST)을 지정할 수 있음. 1) GET : 보내진 데이터는 URL의 일부(파라미터)로 주소 표시줄에 나타남. 2) POST : 보내진 데이터는 URL에 표시되지 않음. 긴 데이터를 보낼 때 적합함. 1 2 3 4 5 이름을 입력하세요. Colored by Color Scripter cs * type 속성의 종류 1) text : 텍스트 한 줄분의 입력 폼(텍스트 상자)을 나타냄. (type 속성을 직정하지 않는 경우는 이 형식이 됨.) maxlength 속성을 사용하여 최대 문자 수를 지정할 수 ..
8. 2017.05.17 table 태그

   태그 기능 표(테이블)를 작성함. 요소로 둘러싼 부분이 표기 됨. 표에 행을 추가함. 요소로 둘러싼 부분이 행이 됨. 표에 헤더(제목 행)가 되는 셀을 추가함. 요소로 둘러싼 부분이 셀의 제목이 됨. 표에 셀을 추가함. 요소로 둘러싼 부분이 셀의 내용이 됨. 표의 타이틀(캡션)을 나타냄. * table 태그에서 설정할 수 있는 속성 1) height : 테이블의 높이를 픽셀(도트 단위)로 지정함. 2) width : 테이블의 폭을 픽셀 또는 웹 브라우저의 창에 대한 비율(%)로 지정함. 3) cellspacing : 셀 간격을 픽셀로 지정함. 4) cellpadding : 셀의 여백을 픽셀로 지정함. 5) border : 표의 테두리 폭을 픽셀로 지정함. * td, th 태그에 설정할 수 있는 속성 1)..
9. 2017.05.17 기본 태그

   * 문장의 구분이나 줄바꿈 등에 사용되는 태그 태그 기능 작성 예 하이퍼링크를 추가함. href 속성을 사용하여 링크할 URL을 지정할 수 있음. 다른 페이지뿐만 아니라 매일 주소나 페이지 안의 다른 장소도 링크할 수 있음. 여기를 클릭 ~ 문장에 제목을 붙임. 숫자가 작을수록 큰 레벨을 가리킴. 그림책 단락을 나타냄. 달리 표시할 요소가 없는 경우에 사용하기를 권장함. HTML 태그란 줄바꿈을 나타냄. 줄을 바꿀 문장의 끝에 이라고 씀. 종료 태그 은 필요없음. 줄바꿈 합니다. 번호가 없는 항목 쓰기의 범위를 나타냄. 항목은 로 지정함. aaa bbb 번호가 붙은 항목 쓰기의 범위를 나타냄. 항목은 로 지정함. aaa bbb * 여러 개의 문장을 하나의 단위로 묶는 태그 태그 기능 작성 예 콘텐츠의 단..