3일만에 끝내는 HTML, CSS, JS 기초

HTML5 웹 워커 및 서버 전송 이벤트 HTML 페이지에서 스크립트가 실행될 때, 페이지는 스크립트가 끝나기 전까지는 반응하지 않게 됩니다. 웹 워커는 백그라운드에서 작동하는 자바스크립트인데, 다른 스크립트와는 독립적으로 동작하며 웹 페이지의 성능에도 영향을 주지 않습니다. 따라서 웹 워커가 백그라운드에서 실행중인 동안에도 버튼 클릭, 데이터 선택 등 중단없이 할 수 있게 됩니다. 크롬, 파이어 폭스, 사파리, 오페라 및 IE10 이상에서 동작합니다. 자바스크립트 동작 시간: 웹 워커 시작 웹 워커 중지 먼저, 아래의 자바스크립트를 실행했을 때 결과를 지속적으로 보여줄 곳을 로 지정하였습니다. 그 다음 자바스크립트의 웹 워커 시작, 및 중지 함수를 호출할 수 있도록 버튼을 생성하고 onclick 이벤트..

HTML5 애플리케이션 캐시 애플리케이션 캐시는 HTML5 에서 소개되었는데, 웹 애플리케이션이 캐시되면 인터넷 연결 없이도 (캐시된 자원들을) 사용할 수 있게 됩니다. 애플리케이션 캐시는 세가지의 이점이 있습니다. 오프라인 브라우징 : 오프라인에서도 사용자가 애플리케이션을 사용할 수 있습니다. 속도 측면 : 캐시된 자원들은 더 빠르게 로드 됩니다. 서버측 부하 감소 : 브라우저는 갱신된 자원만 서버로부터 다운로드 합니다. 크롬, 파이어 폭스, 사파리, 오페라 최신 버전들이 애플리케이션 캐시를 지원하고, IE10 에서부터 지원합니다. 단, IE8, IE9 에서는 사용할 수 없습니다. 아래는, 오프라인 브라우징을 할 수 있도록 캐시 매니페스트(명시문)를 추가한 HTML 문서입니다. ... 애플리케이션 캐시..

HTML5 내부 저장 기능 HTML 내부 저장 기능은, 웹 애플리케이션이 사용자의 브라우저 내에 데이터를 내부적으로 저장할 수 있는 기능으로 쿠키보다 유용합니다. HTML5 이전에는, 애플리케이션 데이터는 쿠키에 저장하여야 했습니다. 내부 저장 기능은 쿠키 보다 보안이 더 좋습니다. 또 웹 사이트 성능에는 영향을 주지 않으면서도 더 많은 데이터를 내부에 저장할 수 있습니다. 쿠키 와는 달리, 저장 한도가 최소 5MB 이상으로 훨씬 크고 또 정보가 서버로도 전송되지 않습니다. 내부 저장 기능은 "접속근원 (=도메인과 프로토콜)" 당 하나씩 생성할 수 있고, 하나의 근원을 갖는 모든 페이지 들은 동일한 데이터로 저장하고 접근할 수 있습니다. 크롬, 파이어 폭스, 사파리, 오페라 및 IE8 이상에서 완전하게 ..

HTML5 드래그 앤 드롭 HTML5 에서는 드래그 앤 드롭이 표준의 일부가 되었습니다. 어떤 태그 들도 드래그 앤 드롭을 할 수 있습니다. 크롬, 사파리, 파이어 폭스, 오페라, IE9 이상에서 드래그 앤 드롭 기능이 완전하게 지원됩니다. 먼저 드래그 할 태그에 draggable 속성을 "true" 로 설정하고, ondragstart 속성에 드래그 되면 실행될 자바스크립트 함수를 넣어 줍니다. draggable="true" ondragstart="drag(event)" 위에서 ondragstart 속성이 drag(event) 함수를 호출합니다. drag(event) 함수는 드래그 될 데이터를 정의합니다. drag() 함수가 호출되면 dataTransfer.setData() 함수가 드래그 된 데이터 형식..

HTML5 지리위치 정보의 사용 HTML 지리위치 API 는 사용자의 지리적 위치를 얻는데 사용합니다. 프라이버시 침해 문제가 있기 때문에, 위치정보는 사용자의 동의가 있는 경우에만 사용될 수 있습니다. 크롬, 파이어 폭스, 사파리 그리고 IE9 이상에서 완전하게 지원됩니다. 그리고, 지리위치는 스마트폰에서 GPS 기능을 사용하면 더 정확한 위치를 찾을 수 있습니다. HTML 위치 정보 기능은 getCurrentPosition() 메소드(함수)를 가지고 있는데, 이 함수는 사용자의 위치정보를 위도(북향, latitude) 와 경도(서향, longitude) 값으로 받아옵니다. 아래 코드로 설명하면, 맨 위에 텍스트를 "w" 라고 정의하였고, 지도가 표시될 위치는 "x" 라고 정의하였습니다. 그 아래 스크..

HTML 유튜브 비디오 재생 비디오 형식 때문에 곤란한 경우가 있습니다. 브라우저 버전마다 지원되는 비디오 형식이 달라지기도 합니다. 그럴때 유튜브 비디오를 사용하면 가장 손쉽게 비디오를 플레이 할수 있습니다. 유튜브는 비디오 ID 를 가지고 있는데 11자리 문자 숫자 및 "_" 로 ID 를 부여합니다. (예를 들면 EtRBMUFBTtE 와 같은 형태) 그런데 유튜브에 먼저 비디오를 업로드 해야 합니다. 업로드 하면 ID 를 알 수 있게 되고 태그를 웹 페이지에 만든 다음, src 속성으로 그 비디오 URL 을 알려줍니다. 그리고, 유튜브에서 공유 버튼을 누르면 "https://youtu.be/I2cGgb1F7Pw" 와 같은 주소가 나오는데, 워드프레스 닷컴 사이트에서는 태그없이 공유 주소만 넣으면 자동..

HTML 기능확장 플러그-인 HTML "플러그-인"은 "헬퍼 애플리케이션"으로도 불리는데, 웹 브라우저의 표준 기능을 확장해 주는 컴퓨터 프로그램 입니다. 잘 알려진 플러그-인으로는 자바 애플릿 같은 것이 있는데, 플러그-인은 웹 페이지에 도 주요 브라우저에서 지원합니다. 태그 또한 HTML 문서내에 객체를 삽입할 때 사용됩니다. 태그는 오랫동안 사용되어 왔었는데, HTML5 이전에는 HTML 규격으로 자리잡지 못하였었습니다. 태그는 닫는 태그가 없습니다. 따라서 대체 문자를 갖지 못합니다. [광고] Udemy 동영상 강의로 보기

HTML5 오디오 웹 페이지에서 오디오의 실행은, HTML5 이전에는 표준이 없었습니다. 이때는 플레시 같은 플러그-인으로 플레이 할 수 있었습니다. HTML5 태그는 웹 페이지에 오디오를 삽입하는 표준 방법을 제공합니다. 크롬, 사파리, 파이어 폭스, 오페라에서 지원하며 IE9 이상에서도 태그를 완벽하게 지원합니다. HTML Audio 태그에서 controls 속성으로 오디오 컨트롤을 생성할 수 있는데, 플레이, 일시정지, 볼륨 컨트롤을 나타나게 합니다. 태그와 태그 사이에 텍스트를 넣으면 태그를 지원하지 않는 브라우저나 사이트에서, 텍스트가 보이게 됩니다. 오디오 태그를 지원하지 않는 사이트 또는 브라우저 입니다. 태그를 여러개 만들어서 다른 형식의 오디오 파일을 링크해 놓으면 브라우저는 맨 처음 인..

HTML5 비디오 HTML5 이전에는 웹 페이지 상에서 비디오를 볼수 있는 표준이 없었습니다. 이때는 플래시 같은 플러그-인으로 비디오를 플레이 할 수 있었습니다. HTML5 태그는 웹 페이지에 비디오를 삽입하는 표준 방법을 제공하며, 크롬, 사파리, 파이어 폭스 및 IE9 이상의 모든 브라우저에서 태그를 완벽하게 지원합니다. 컨트롤 속성으로 비디오 컨트롤을 추가할 수 있습니다. 컨트롤에는 시작, 일시중지, 볼륨 등이 나타납니다. 가로 폭과 세로 높이를 항상 속성값으로 지정해 주는 것이 좋습니다. 그렇지 않으면 브라우저가 비디오가 로딩 될 때 깜빡 거릴 수 있습니다. 태그와 태그 사이에 입력한 텍스트는, 비디오 태그를 지원하지 않는 브라우저에서만 이 텍스트가 비디오 대신에 표시됩니다. 여러 개의 태그로 ..

HTML 멀티미디어 개요 웹 상에서 멀티미디어는 그림, 사운드, 음악, 비디오, 영화, 그리고 애니메이션 등이 있습니다. 웹 페이지는 다양한 형태의 멀티미디어 태그 들을 포함하고 있습니다. 사운드, 비디오, 애니메이션 같은 멀티미디어는 다양한 브라우저에서 다양하게 지원됩니다. 어떤 형식은 플러그-인 같은 추가 프로그램이 필요할 수도 있습니다. 파일 타입을 파일의 확장자로 알 수 있는데, 브라우저가 .gif, .png, .jpg 같은 확장자를 보면 그 파일을 이미지로 인식합니다. 이러한 멀티미디어 파일의 확장자로는 .wav, .mp3, .mp4, .mpg, .wmv, .avi 및 .swf 가 있습니다. 이중에서 .mp4 는 새로 떠오른 인터넷용 비디오 파일 형식인데, 유투브나 플레시 플레이어 그리고 HTM..