🗒️ 2017/05/19 (39)

1. 2017.05.19 WebSocket

   * WebSocket이란? - WebSocket은 서버와 실시간으로 쌍방향 통신을 하기 위한 장치임. - 통상 HTTP 프로토콜에서는 리퀘스트/리스폰스 모델로 통신을 수행하지만, WebSocket에서는 TCP/IP상의 독자적인 프로토콜을 통해 통신을 수행함. - WebSocket은 드래프트75(hixie-75)판 이전과 드래프트76(ietf-hybi-00)판 이후의 사양과 프로토콜의 호환성이 없음. - 웹 브라우저가 자원하고 있는 버전과 서버가 지원하는 버전이 일치하도록 해야 할 필요가 있음. IE Firefox Chrome Safari Opera hixie-76/hybi-00 6 5.0.1 11(무효)※ hybi-07 6 hybi-10 7 14 RFC 6455 10 11 16 ※ Opera에서는 기본값..
2. 2017.05.19 Server-Sent Events

   * Server-Sent Events란? - 보통 서버 측의 상태는 클라이언트가 능동적으로 액세스를 하지 않으면 알 수 없음. - Server-Sent Events는 이러한 제한을 넘어서 서버 측의 상태 변화를 실시간으로 클라이언트에게 통지하기 위한 장치임. 웹 서버 ----------이벤트 스트림 (백그라운드) -------------> 웹 브라우저 ------------------------------------> 웹 서버 서버 측의 상태 변화를 클라이언트에게 통지함. 일단 이벤트 스트림이 완료되면 클라이언트는 자동으로 다시 요청함. - 이벤트 스트림은 통지 내용을 기술한 HTTP 리스폰스인데, 백그라운드에서 자동으로 계속 송수신됨. - 이벤트 스트림의 송수신은 서버 측이 HTTP로 규정된 청크 송신..
3. 2017.05.19 Web Messaging

   * Web Messaging이란? - JavaScript에서는 오리진이 다른 문서 간에 보안상의 이유로 데이터를 주고받거나 오브젝트에 액세스하는 데 제한이 있음. - Web Messaging은 이러한 제한을 넘어서 안전하게 데이터를 주고받을 수 있는 API임. - 오리진은 문서의 URL 중 스킴, 도메인, 포트를 합친 것을 말함. - Web Messaging에는 아래의 두 가지 API가 있음. 1. 크로스 도큐먼트 메시징 : 탭이나 창 단위로 통신을 구현함. 2. 채널 메시징 : 좀 더 작은 단위로 통신을 구현함. * 크로스 도큐먼트 메시징의 이용 - 크로스 도큐먼트 메시징을 이용하려면 송신처의 window 오브젝트의 postMessaging() 메서드를 호출해야 함. var targetWindow = ..
4. 2017.05.19 ApplicationCache

   * ApplicationCache란? - ApplicationCache는 이미지나 HTML/CSS/JavaScript와 같은 리소스의 캐시를 로컬 환경에 마련하는 것으로, 오프라인 시에도 온라인 시와 똑같이 사이트나 웹 애플리케이션을 이용할 수 있도록 하는 장치임. * manifest 파일을 사용하여 캐시 지정하기 - 캐시할 리소스는 manifest 파일에서 정의함. - manifest 파일은 UTF-8 형식으로된 텍스트 파일로, html 태그의 manifest 속성을 사용하여 지정함. - 웹 서버가 송신하는 MIME 타입의 설정은 text/cachemanifest로 해 둚. 1 2 3 4 5 6 7 8 9 10 예제 Colored by Color Scripter cs [manifest 파일의 서식] -..
5. 2017.05.19 Web Workers

   * Web Workers란? - JavaScript에서 시간이 걸리는 처리를 수행하면 화면이 멈추고 사용자가 기다려야 하는 일이 있음. - Web Workers는 이러한 무거운 처리를 백그라운드에서 수행하게 함으로써 사용자와의 통신에 영향을 주지 않도록 할 수 있음. [전용 워커와 공유 워커] - Web Workers에서는 백그라운드 처리를 '워커'라 부르는 실행 단위를 사용하여 수행함. - 워커에는 두 가지 종류가 있음. 1) 전용 워커 : 자신의 생성처하고만 통신을 함. 2) 공유 워커 : 여러 상대와 통신을 할 수 있음. [데이터 송수신] - 데이터를 송수신하는 방법은 워커 측과 호출하는 측이 똑같음. 송신 측 -------------------------------------- 데이터 ------..
6. 2017.05.19 File API

   * FIle API란? - File API는 사용자의 환겨에 저장된 파일의 속성이나 내용을 구할 수 있는 API를 말함. - File API에서 취급할 수 있는 파일은 두 종류임. 1. 로 선택한 파일 2. 드래그 앤 드롭한 파일 * File 오브젝트 - 파일을 조작하려면 파일을 나타내는 File 오브젝트를 사용해야 함. - File 오브젝트를 구하는 방법은 타입에 따라 다름. [의 경우] - change 이벤트가 발생했을 때 input 요소의 file 속성에 선택한 파일의 목록이 배열로 저장됨. e.onchange = function() { var f = e.files[0]; // 첫 번째(0번) 파일의 File 오브젝트를 구하고 있음. ※ e는 input 요소의 오브젝트 } [드래그 앤 드롭의 경우]..
7. 2017.05.19 Indexed Database API

   * Indexed Database API란? - Indexed Database API는 Web Storage보다 본격적인 데이터 저장 장치임. - 일반적인 데이터베이스처럼 트랜잭션(일련의 처리를 한 덩어리로 해서 실패한 경우 전체를 원래 대로 되돌리는 장치)을 지원함. [데이터 저장 방법] - Indexed Database API는 관계형 데이터베이스와는 조금 다른 저장 방법을 사용함. - 값을 구할 때 색인이 되는 키(키패스)를 하나 지정할 수 있음. - 검색을 효율적으로 하기 위한 인덱스를 지정할 수 있음. - JavaScript의 오브젝트로 되어 있음. - 값의 행 수가 달라도 저장할 수 있음. * 데이터베이스의 작성과 접속 - 데이터베이스를 작성하려면 window.indexedDB의 open() ..
8. 2017.05.19 Web Storage

   - JavaScript로 데이터를 로컬 환경에 손쉽게 저장할 수 있음. * Web Sotrage란? - Web Storage는 데이터를 사전과 같은 형식으로 웹 브라우저에 저장하는 장치임. - Cookie와는 달리 서버와의 통신으로 데이터가 보내지는 일은 없음 - 또한 4KB라는 용량 제한이 있는 Cookie보다 큰 데이터를 취급할 수 있음. - 키와 값이 세트로 저장됨. * 로컬 스토리지와 세션 스토리지 - Web Storage에는 로컬 스토리지와 세션 스토리지가 있음. - 세션 스토리지는 저장기간이 동일 세션으로 한정된다는 점이 다름. - 어떤 경우이든 오리진을 넘어서 데이터를 공유할 수는 없음. - 세션 스토리지는 일련의 조작 사이에서만 데이터가 저장됨. - 로컬 스토리지에 저장한 데이터는 웹 브라..
9. 2017.05.19 이미지 표시

   * Image 오브젝트 작성하기 - 이미지를 표시하기 전에 JavaScript로 이미지를 다루기 위한 Image 오브젝트를 작성함. [파일을 사용하여 만드는 방법] var image = new Image(); image.src="sample.jpg"; [img 요소에서 꺼내는 방법] [HTML] [CSS] var image = document.getElementById("sample1"); * 이미지 표시하기 - 이미지를 표시하려면 drawImage() 메서드를 지정해야 함. - drawImage 메서드의 작성 방법은 세 가지가 있음. drawImage(image, dx, dy); drawImage(image, dx, dy, dw, dh); 이미지를 붙여 넣을 위치와 크기 drawImage(image, ..
10. 2017.05.19 타이머를 사용한 예

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

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

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

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

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

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

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

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

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

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

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

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

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

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