🗒️ 2017/05 (184)

1. 2017.05.19 타이머를 사용한 예

   - JavaScript의 타이머를 이용하면 애니메이션을 작성할 수 있음. * 타이머 - JavaScript는 일정 시간마다 처리를 반복하기 위한 타이머라는 기능이 있음. - 타이머와 canvas를 이용하면 JavaScript로 애니메이션을 작성할 수 있음. [타이머를 이용하기 위한 메서드] 1) setInterval() 메서드 - 처리의 완료와 관계없이 일정 간격마다 다른 처리를 반복함. setInterval(처리 내용, times); 반복할 간격 : 시간의 단위는 밀리초(ms) 2) setTimeout() 메서드 - 이 메서드를 실행하면 일정 시간이 지난 후 다른 처리를 호출함. setTimeout(처리 내용, times); 대기 시간 간격 : 시간의 단위는 밀리초(ms) [타이머를 정지시키기 위한 메..
2. 2017.05.19 도형 그리기 4

   * 선 스타일 설정하기 - 선의 두꼐를 지정하려면 lineWidth 프로퍼티로 픽셀 수를 지정해야 함. lineWidth=2; - 선의 끝 모양(캡)은 lineCap 프로퍼티로 지정함. lineCap="round"; butt 캡을 설정하지 않음. (기본값) round 둥근 캡을 설정함. square 사각 캡을 설정함. - 패스로 연결한 선의 스타일은 lineJoin 프로퍼티로 지정함. lineJoin="round"; bevel 모가 나지 않도록 함. round 둥근 모양으로 만듦. miter 끝이 뾰족한 모양으로 만듦. (기본값) ※ miterLine 프로퍼티를 작게 설정하면 너무 뾰족하게 되는 것을 방지할 수 있음. (기본값 10) * 음영 설정하기 - 음영을 설정하려면 shadowBlur, shado..
3. 2017.05.19 도형 그리기 3

   * 베지에 곡선 그리기 - 베지에 곡선은 제어점을 이용하여 그려지는 곡선임. - 왠지 복잡하고 어려울 것 같은 이미지가 떠오르지만, 다양한 곡선을 직관적으로 그릴 수 있음. 프로퍼티 및 메서드 기능 quadraticCurveTo(cpx, cpy, x, y) 제어점이 하나인 2차 베지에 곡선을 그림. cpx와 cpy로 제어점의 좌표를, x와 y로 패스 그리기의 끝점의 좌표를 지정함. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 제어점이 2개인 3차 베지에 곡선을 그림. cp1x와 cp1y로 첫 번째 제어점의 좌표를, cp2x와 cp2y로 두번째 제어점의 좌표를, x와 y로 패스 그리기의 끝점의 좌표를 지정함. cvs.moveTo(0, 0); cvs.quadraticCurv..
4. 2017.05.19 도형 그리기 2

   * 패스를 사용한 그리기 - 패스란, 점과 점을 연결한 선을 말함. * 그리기 흐름 - 패스로 그리는 방법은 조금 복잡함. - 패스는 stroke()나 fill()로 그리지 않는 한 표시되지 않음. [패스의 메서드] 메서드 기능 beginPath(); 패스 그리기를 시작함. 그때까지 그렸던 패스는 모두 리셋됨. moveTo(x, y); 패스 그리기의 시작점 좌표를 저장함. x와 y좌표를 설정함. lineTo(x, y); 패스 그리기의 끝점을 설정함. x와 y좌표를 설정함. lineTo() 메서드로 좌표를 계속해서 그으면 복잡한 도형을 그릴 수 있음. stroke(); 패스의 선을 그림. strokeStyle 프로퍼티로 색이나 스타일을 지정할 수 있음. fill(); 패스를 둘러싸인 부분을 칠함. 패스가 ..
5. 2017.05.19 도형 그리기 1

   * 기본적인 그리기 [선과 칠하기 스타일] 프로퍼티 기능 strokeStyle 선의 색이나 스타일을 지정하거나 구함. 지정 방법은 CSS와 똑같음. fillStyle 칠할 색이나 스타일을 지정하거나 구함. 지정 방법은 CSS와 똑같음. [사각형] 메서드 기능 strokeRect(x, y, w, h); 사각형을 그림. x와 y에 좌표를, w와 h에 폭과 높이를 대입함. fillRect(x, y, w, h); 사각형을 칠함. x와 y에 좌표를, w와 h에 폭과 높이를 대입함. clearRect(x, y, w, h); 사각형 영역을 제거함. (투명으로 돌아감) x와 y에 좌표를, w와 h에 폭과 높이를 대입함. - 예) 1 2 3 4 5 6 7 8 9 10 11 12 function draw() { var c..
6. 2017.05.19 canvas를 사용한 그림 그리기

   - JavaScript를 이용하면 HTML 상에 도형을 그릴 수 있음. * canvas - HTML5의 주요 기능 중 하나인 canvas는 HTML5에서 추가된 canvas 요소와 JavaScript를 사용하여 그림을 그림. [canvas 태그] - canvas로 그림을 그리려면 HTML 문서상에 그리기 영역(캔버스)을 작성해야 함. - 작성 시에는 canvas 태그를 사용함. - canvas는 투명하므로 CSS로 테두리 선을 긋거나 하지 않으면 아무것도 표시되지 않음. width 속성은 가로 폭을, height 속성은 높이를 설정함. 단위는 픽셀. 아무것도 지정하지 않는 경우 폭 300픽셀, 높이가 150픽셀로 설정됨. [JavaScript 측 준비] - 먼저 JavaScript에서는 조금 전에 작성한..
7. 2017.05.19 Ajax란?

   * Ajax - Ajax는 Asynchronous JavasScript+XML(비동기 JavaScript+XML)의 약자임. - Ajax는 기술적으로 새로운 것이 아니라 JavaScript에 CSS나 HTML, XML 등을 조합한 것임. - 본래는 Google의 지도 서비스인 'Google 맵'에 사용되던 기술을 제임스 개릿(James Garrett)이 2005년 발표한 기사에서 'Ajax'라고 부른 것이 시작임. - 기술적으로 핵심이되는 것은 'XMLHttpRequest'라는 JavaScript의 오브젝트로, 이를 사용하여 비동기적으로 서버와 통신함으로써 페이지를 이동시키지 않고도 데이터를 송수신할 수 있음. - 예를 들어, Google 맵에서는 마우스를 움직이면 페이지는 그대로인데, 지도의 축척을 바..
8. 2017.05.19 HTML5의 통신 관련 기술

   - 웹 페이지끼리 데이터를 주고받을 수 있음. * Web Messaging - JavaScript에서 오리진이 다른 문서 간에는 보안상의 이유로 데이터의 주고받기나 오브젝트의 액세스에 제한이 있음. - HTML5에서는 Web Messaging이 도입되어 오리진이 서로 다른 웹 페이지끼리도 안전하게 데이터를 주고받을 수 있게 되었음. * Server-Sent Events - Server-Sent Events는 웹 페이지의 푸시(서버가 클라이언트에게 자동으로 정보를 송신하는 것)를 수행하는 API - 다수의 클라이언트에게 일제히 정보를 발신하는 데 이용할 수 있음. * Web-Socket - 지금까지 서버와 클라이언트와의 통신은 리퀘스트와 리스폰스가 한 단위로 되어 있어서, 쌍방향 통신을 실시간으로 수행하는..
9. 2017.05.19 백그라운드와 오프라인

   - Web Workers는 JavaScript의 처리를 백그라운드에서 수행함. - Application Cache는 오프라인 시 캐시를 취급함. * Web Workers - JavaScript는 본격적인 스크립트 언어이므로 복잡하고 시간이 걸리는 처리도 실행 가능함. - 하지만 처리를 하는 동안 사용자를 기다리게 하면 곤란할 것임. - HTML5에는 시간이 걸리는(무거운) 처리도 가능하도록 JavaScript의 처리를 백그라운드에서 실행할 수 있는 Web Workers가 추가됨. - 백그라운드에서 작동하는 JavaScript의 코드를 '워커'라고 부름. - 웹 브라우저와 워커는 이벤트를 통해 데이터를 주고받음. * 요프라인 상태의 웹 애플리케이션 - 모바일 단말기와 같이 무선으로 네트워크 환경을 사용할 ..
10. 2017.05.19 스토리지와 파일

    * Cookie의 제한 - 지금까지 웹 브라우저 측에서 값을 저장하기 위한 기술로는 Cookie가 있었음. - 하지만 Cookie는 서버와의 통신을 전제로 고려된 것으로, 저장 영역으로 사용하기에는 적합하지 않음. - 보안상 문제로 인해 웹 브라우저에서 무효로 설정하고 있는 사람들도 있음. - Cookie는 저장할 수 있는 용량이 4KB 밖에 되지 않음. * HTML5의 스토리지 - HTML5에서는 데이터 저장을 위한 장치가 몇 가지 마련되어 있음. - 모두 전용 JavaScript API(메서드, 프로퍼티)를 사용하여 조작함. [Web Storage] - 키와 값을 세트로 해서 데이터를 저장하는 방법. - 간단히 일기 및 쓰기, 저장이 가능한 것이 특징 [Indexed Database API] - 트랜..
11. 2017.05.19 그래픽

    * HTML에서의 그래픽 - 지금까지는 HTML에서 Flash와 같은 애드온을 사용하지 않는 한, 서버의 처리를 반영한 자유로운 도형을 표시할 수 없었음. - HTML5에서 등장한 canvas와 SVG는 애드온 없이 서버의 처리에 따라 도형을 그릴 수 있음. - canvas나 SVG를 이용하면 그래프나 도형을 손쉽게 웹 페이지에 표시할 수 있음. * canvas - canvas는 웹 페이지 안에 비트맵 이미지(픽셀이라 불리는 점의 집합체)를 그림. - 도형을 그리는 방법은 HTML 측에 그림을 그릴 캔버스가 될 canvas 요소를 준비해 두고 JavaScript를 사용하여 그림. 1. HTML에서 캔버스를 준비한다. 2. JavaScript로 그린다. var canvas = document.getElem..
12. 2017.05.19 GPS와의 연동

    * Geolocation API - HTML5에서는 Geolocation API를 사용하여 GPS를 탑재한 단말기의 위치를 알 수 있음. - Geolocation API를 활용한 웹 애플리케이션으로는 자신의 근처에 있는 가계를 찾는 기능 등을 생각할 수 있음. - GPS 기능이 없는 단말기의 경우는 IP 주소 등으로 대략적인 위치를 추적함. * Geolocation API 이용하기 - Geolocation API에는 위치 정보를 구하는 두 종류의 메서드가 마련되어 있음. - 위치 정보를 한 번만 구하려면 아래와 같은 메서드를 사용해야 함. navigator.geolocation.getCurrentPosition(suc, err, opt); : 성공 시 호출되는 함수(필수) : 실패 시 호출되는 함수 : ..
13. 2017.05.19 드로그 앤 드롭 지원

    - HTML5에서는 웹 페이지 내부 또는 웹 페이지 외부에서 드래그 앤 드롭을 할 수 있음. * 드래그 앤 드롭 - 드래그 앤 드롭은 파일 복사 등에서 일상적으로 사용되는 조작인데, HTML5에서는 웹 페이지의 내부 또는 웹 브라우저의 외부에서 드래그 앤 드롭을 지원함. - 이로 인해 요소끼리나 웹 브라우저, 다른 소프트웨어 사이에 정보를 주고받을 수 있게 되었음. * draggable 속성 - 웹 페이지 내에서 드래그할 요소에는 draggable 속성에 "true"를 지정함. - 원래부터 드래그할 수 있는 요소도 있음. - 또한 웹 브라우저에 따라서는 선택한 상태가 아니면 텍스트를 드래그할 수 없는 경우도 있음. 여행을 떠나는 유미나 * 이벤트 처리 - 드롭할 위치를 설정하는 데는 dropzone 속성..
14. 2017.05.19 멀티미디어 지원

    * 멀티미디어 콘텐츠 다루기 - HTML5에서는 음악이나 동영상을 처리할 수 있음. 음악/음성 동영상 - 이러한 기능들은 그냥 웹 페이지에 넣어서 재생만 하는 것이 아니라 속성을 지정하면 여러 가지 제어가 가능하다는 특징이 있음. - 예를 들어 아래와 같이 지정하면 재생, 정지와 같은 컨트롤이 표시됨. 재생할 수 없습니다. (시작 태그와 종료 태그 사이에는 태그를 지원하지 않는 웹 브라우저를 위한 대체 콘텐츠를 작성할 수 있음.) - 속성 프로퍼티명 값 preload 콘텐츠를 미리 읽어 들일 것인지를 지정함. 아래의 값을 지정함. none : 읽어 들이지 않음. metadata : 메타 데이터만 읽어 들임. auto : 자동(기본값) autoplay 이 속성을 지정하면 콘텐츠 읽기가 완료됨과 동시에 재생..
15. 2017.05.19 태그의 의미 부여

    - 태그에 의미를 부여하면 내용을 기계적으로 판별할 수 있음. * 태그의 의미 부여 - 태그에 부가 정보(태그 정보)를 추가하면 컴퓨터가 그 요소의 의미를 해석하기 쉬워짐. - 그러면 검색 엔진 등에 대해 주소나 전화번호와 같은 정보를 쉽게 제공할 수 있음. - HTML5에서는 세 가지 방법을 사용하여 태그에 의미를 추가하고 있음. [마이크로 데이터] - HTML5에서 도입된 사양으로, 요소를 아이템(한 건의 데이터)으로 간주하여 의미를 부여함. - 아래와 같이 고유한 속성이 마련되어 있음. 유미나 1) itemscope 속성 - 이 요소(~)가 아이템이라는 것을 선언함. 2) itemtype 속성 - 각 프로퍼티가 무엇을 나타내는 지에 대한 정의(vocabulary)가 써 있는 장소를 지정함. 3) i..
16. 2017.05.19 콘텐츠 모델 (Contents Model)

    * 콘텐츠 모델 - 기존의 HTML 4.01이나 XHTML 1.0에서는 요소의 대부분이 '블럭 레벨 요소'(문서에 있어서 단락에 해당)와 '인라인 요소'(문장의 일부에 해당)로 분류되었음. - HTML5에서는 '카테고리'라는 개념을 도입하여 요소를 좀 더 엄밀하게 분류하고 있음. - 콘텐츠 모델은 이 '카테고리'를 바탕으로 정의된 것으로, 각 요소가 그 안에 들어갈 수 있는 콘텐츠(문자, 음악, 동영상 등)를 세분화한 것. - 예를 들어 동영상과 음악을 문장에 포함시킬 때 사용할 수 있는 video, audio 등의 요소는 'Embedded(임베디드)'라는 콘텐츠 카테고리에 속함. - 여러 카테고리에 속하는 요소도 있고, 어떤 카테고리에도 속하지 않는 요소도 있음. - 주요 카테고리와 이용 방법은 아래와..
17. 2017.05.19 글꼴 다운로드

    * 웹 브라우저의 글꼴 이용 - OS에는 많은 글꼴이 표준으로 들어가 있지만 모두 동일한 글꼴을 갖고 있는 것은 아님. - 글꼴이 없으면 웹 브라우저는 가능한 한 비슷한 글꼴로 표시하려고 하지만 그래도 환경에 따라서는 다른 분위기로 표시되는 일이 있음. - CSS3에는 웹 서버로부터 빌요한 글꼴을 다운로드하여 표시할 수 있는 장치가 마련되어 있음. - 이 글꼴을 '웹 글꼴'이라고 함. - 이것으로 어떤 환경에서도 거의 똑같은 모양의 글꼴을 나타낼 수 있게 되었음. - 웹 글꼴의 형식으로는 WOFF(Web Open Font Format, 확장자는 .wof)가 일반적이지만, 이 밖에 TrueType, OpenType, Embedded OpenType, SVG 글꼴도 이용할 수 있음. - 공개되어 있는 서버의..
18. 2017.05.19 플렉서블 박스 (Flexible Box)

    * 플렉서블 박스 지정하기 - CSS3에는 기존의 박스보다 유연하게 배치할 수 있는 '플렉서블 박스(Flexible Box)'라는 것이 있음. - 플렉서블 박스를 지정하려면 display 프로퍼티에 flexbox 또는 inline-flexbox를 입력해야 함. - 추가하여 wrap을 지정하면 여러 줄을 만들 수 있음. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 [HTML] BOX1 BOX2 [CSS] #container{ width: 300px; height: 150px; border: 6px dotted #aaaaaa; display: flexbox; } #box1{ background-color: grey; width: 100px; } #bo..
19. 2017.05.19 CSS3의 그라데이션

    * 선형 그라데이션 지정하기 - background 등 이미지와 관련된 프로퍼티에 linear-gradient() 함수를 사용하면 형(평행) 그라데이션으로 칠할 수 있음. background:linear-gradient(45deg, red, white); : 그라데이션 방향 - 다음 방법 중 하나를 지정함. 생략하면 위에서 아래쪽으로 그라데이션 됨. 1) 시작 위치를 bottom left 등으로 지정 2) 각도를 45deg 등으로 지정 3) 종료 위치를 to top right 등으로 지정 ※ Firefox는 1)과 2)를 함께 쓸 수 있음. : 시작색 : 종료색 - 여러 개의 색을 지정할 수 있고, 변화 위치를 지정할 수도 있음. background:linear-gradient(left, gray 0%,..
20. 2017.05.19 CSS3를 사용한 애니메이션

    * 애니메이션 - CSS3의 애니메이션은 키 프레임이라는 어떤 시점의 상태를 정한 체인 포인트와 같은 것을 나열함으로써 작성함. - 애니메이션은 이러한 키 프레임을 보완하듯이 움직임. - 키 프레임은 아래와 같이 @keyframes를 사용하여 설정함. 1 2 3 4 5 6 7 8 9 @keyframes animation{ // 키 프레임명 0%{ // 키 프레임의 위치를 퍼센트 값으로 지정함. color:red; // 여기에 요소의 상태를 작성함. } ... 50%{ ... } ... 100%{ ... } } cs * 애니메이션 관련 프로퍼티 프로퍼티 기능 animation-name 적용할 키 프레임명 animation-duration 애니메이션의 재생 시간 animation-timing-function..
21. 2017.05.19 CSS3의 새로운 스타일 3

    * 멀티 칼럼 지정하기 - columns 프로퍼티를 사용하면 멀티 칼럼(다중 단)의 단의 수와 가로 폭을 지정할 수 있음. columns: 5em 2; : 단의 가로 길이를 auto로 지정하면 다른 프로퍼티에 맞춰 자동으로 조절됨. : 단 수 ※ 아래와 같이 개별적으로 지정할 수도 있음. column-width: 50px; column-count: 2; - column-gap 프로퍼티는 멀티 칼럼의 단 간격을 지정함. column-gap: 4em; - column-rule 프로퍼티는 멀티 칼럼의 구분선을 표시함. column-rule: solid 3px red; : 선 스타일 : 선의 굵기 : 선의 색 ※ 아래와 같이 개별적으로 지정할 수도 있음. column-rule-style: solid; colum..
22. 2017.05.19 CSS3의 새로운 스타일 2

    * 배경 이미지의 표시 위치 지정하기 - background-origin 프로퍼티를 사용하면 배경 이미지의 표시 위치 기준을 지정할 수 있음. background-origin: border-box; - 테두리 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 background-origin: padding-box: - 패딩 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 background-origin: content-box; - 내용 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 * 배경 이미지의 크기 지정하기 - background-szie 프로퍼티를 사용하면 배경 이미지의 크기를 지정할 수 있음. background-size: contain; - 이미지의 가로, 세로 비율을 유지하면서 표시 영역에 이미지..
23. 2017.05.19 CSS3의 새로운 스타일 1

    * 크기를 변경할 수 있는 박스 만들기 - resize 프로퍼티를 사용하면 크기를 조정할 수 있는 박스를 만들 수 있음. 1 2 3 4 5 6 7 8 9 10 11 [HTML] 유미나의 방 [CSS] .myResize { width:200px; height:40px; border:solid black 2px; overflow:auto; resize:both; } Colored by Color Scripter cs 1) resize 프로퍼티 none : 크기 변경 불가 // 초기값 horizontal : 폭만 변경 가능 both : 폭/높이 변경 가능 vertical : 높이만 변경 가능 * 박스에 그림자 효과 주기 - box-shadow 프로퍼티를 사용하면 박스에 여러 가지 그림자 효과를 줄 수 있음. ..
24. 2017.05.19 벤더 프리픽스(Vendor Prefix)

    * W3C의 사양이 결정될 때까지 - W3C에서 책정되는 사양은 아래와 같은 단계를 거쳐 결정됨. - 책정의 마지막 단계가 권고임. - W3C 사이트를 참조할 때는 어느 단계의 사양인지를 확인할 필요가 있음. - 권고 전 사양을 웹 브라우저가 도입하는 경우도 있으며, 웹 브라우저의 기능을 참고하여 사양이 정해지는 경우도 있음. Editor's Draft(편집자 초안) -> Working Draft[WD] (초안) -> Last Call Working Draftg[LC] (최종 초안) -> Candidate Recommendation[CR] (권고 후보) -> Proposed Recommendation[PR] (권고안) -> Recommendation[RED] (권고) * 벤더 프리픽스 - 권고 전 CSS..
25. 2017.05.19 CSS3란?

    * CSS의 특징 - CSS3에서는 이미지를 사용하지 않고도 음영이나 그라데이션을 지정할 수 있어서 표현력이 풍부해짐. - JavaScript를 사용하지않고도 애니메이션을 만들거나 변형할 수 있음. - 단락이나 배치를 세세하게 정의할 수도 있음. - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있음. - 회선 속도가 느린 스마트폰 등의 환경에서도 쾌적하게 웹 페이지를 열람할 수 있음. 내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
26. 2017.05.19 의미가 바뀐 태그

    - HTML5에서 모습은 바뀌지 않았지만 의미가 좀 더 분명해진 태그 * 텍스트 관련 태그 - 웹 페이지의 모양은 CSS에서 조정하도록 바뀌었기 때문에 텍스트의 글꼴을 바꾸는 태그는 텍스트 자체에 의미를 부여하도록 사용 목적이 변경되었음. 태그 변경 전 변경 후 작성 예 굵은 글꼴을 나타냄. 키워드나 제품명 등 다른 것과 구별하고 싶은 곳을 나타냄. 그림책 시리즈의 최신작은 >b>HTML5가 보이는 그림책입니다. 문자열을 이탤릭체로 나타냄. 마음의 소리나 다른 나라의 언어 등 본문과는 다른 부분을 나타냄. 유미나는 '힘내자'>라고 결심했다. 취소선이 그어진 문자열을 나타냄. 정확하지 않았던 내용(또는 관련성이 없어진 내용)을 나타냄. 보통은 취소선이 그어진 문자열이 표시됨. 정가 : 1200원 특가 : ..
27. 2017.05.19 HTML5의 새로운 태그 2

    * 폼의 새로운 속성 - HTML5에서는 폼의 input 요소의 type 속성의 값이 큰 폭으로 확장됨. 속성 기능 search 검색 키워드 입력 tel 전화번호 입력 url URL 입력 email 메일 주소 입력 month 연월 입력 week 주 입력 date 날짜 입력 time 시각 입력 datetime UTD(협정 세계시) 입력 datetime-local 현지 날짜와 시각 입력 number 수치 입력 range 지정 범위의 수치 입력 min 속성으로 최소값, max 속성으로 최대값을 지정함. (생략 시는 0~100) color 색 입력 서버에는 '#ffeaf()' (이스케이프하면 '%23ffeat()')와 같이 문자열이 보내짐. [지원 상황] IE Firefox Opera Safari Chrome ..
28. 2017.05.19 HTML5의 새로운 태그 1

    * 문서의 구성과 관련된 태그 - HTML 문서 안에서 택스트가 어떤 위치에 있는지를 나타내기 위한 태그 - 시각적인 변화는 없지만 텍스트를 의미적으로 구분할 수 있음. 태그 기능 작성 예 일반적인 섹션을 나타냄. 제목을 붙여도 좋을 만한 문장의 모음에 대해 사용함. 오늘의 날씨 맑음 독립된 콘텐츠를 나타냄. 뉴스 기사나 게시판, 블로그의 투고에 사용함. 그림책 정리 유미나는 책갈피를 모티브로 한 캐릭터입니다. 헤더가 되는 콘텐츠를 나타냄. 섹션의 목차나 검색 폼 등에 사용함. 푸터(각주)가 되는 콘텐츠를 나타냄. 저작권과 관련된 정보나 관련 페이지의 링크 등에 사용함. 안녕하세요. 웹 페이지의 내비게이션이 되는 콘텐츠를 나타냄. 페이지의 목차나 항목 리스트 등에 사용함. 목차 일람 HTML5란 CSS란..
29. 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..
30. 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..