미래학자

이번에는 Ajax에 대해 정리해보려 합니다. Ajax는 Asynchronous Javascript And Xml의 약자로, 웹 클라이언트(브라우저 같은)에서 웹서버와 비동기적으로 데이터를 교환하는 방법입니다. 웹 개발하면서 필수적으로 사용하는 기술이기 때문에 jQuery같은 라이브러리에는 Ajax요청 모듈이 내장되어 있습니다.직접 Ajax요청을 하는 것이 어렵지 않기 때문에 XMLHttpRequest객체를 이용한 Ajax요청을 직접 해보겠습니다. 그리고 fetch API를 사용하여 요청 보내는 것도 해보겠습니다.먼저 XMLHttpRequest 예제를 봅시다. drag and drop 샘플 요청하기 const xhr = new XMLHttpRequest(); xhr.onreadystatechange = (..

HTML5에 유용한 API가 여럿 추가가 되었다. 일부는 브라우저에서 지원하지 않기도 하지만 매우 유용한 것들이 많다.GeolocationLocalStorage, SessionStorageFIleGeolocation API(GPS)앱 중에는 위치 기반 서비스가 있고, 모바일 폰에서 웹에서 접근하는 사용자의 위치를 가져올 수 있다. (사용자의 허용을 해야함)네이버 홈페이지에 가서 다음 소스를 실행시켜보자. //navigator.geolocation.getCurrentPosition(successCallback, errorCallback, optionObject); function getLocation() { if (navigator.geolocation) { // GPS를 지원하면 navigator.geo..

이 포스트는 HTML에 대해 전반적으로 다루는 내용이 아닙니다. 제가 공부하다 이전에 HTML에서 소홀히 알았던, 또는 새롭게 알게된내용을 정리하는 포스트 입니다. (많은 내용이 zerocho 님의 내용을 참고하여 만들었습니다. https://www.zerocho.com/) HTML은 웹페이지의 구조CSS는 웹페이지의 디자인JS는 웹페이지의 동작 display (block, inline, inline-block)block 한줄 - div, p, h1, h2, ...inline 자기 너비 만큼 - span.. optGroup meter, progress video웹에서 영상을 재생하기 위해 제공 되는 태그로 poster(영상이 로딩되기 까지 보여줄 이미지), controls(재생 시작, 중지등), loop..

이번 시간에는 블로그에서 많이 사용하는 형태의 블로그 레이아웃을 만들어 보겠습니다. 만들 블로그 형태는 아래의 그림과 같습니다. 전체 구조를 색깔을 칠해 보았습니다. 실제로 구역별로 태그 이름이 , , , 로 되어 있고 이것을 시맨틱 태그라 합니다.이 태그들의 기능은 와 동일하지만, 코드에서 바로 구조로 이해할 수 있는 의미를 가진 태그라 할 수 있습니다. 만약 CSS가 없다면 아래와 같이 레이아웃이 전혀 되지 않죠.

해당 포스트는 한빛소프트 책의 예제를 일부 사용하고 있습니다. html에서 표를 그리는 방법을 간단히 알아보겠습니다.일반적으로 사용되는 다음의 시간표를 그려볼께요. 테이블 태그의 종류태그이름 설명 table 표를 그리는 것을 선언 thead 표의 머리로 표의 첫행을 나타냄 tbody 표의 본문 tfoot 표의 꼬리로 위 테이블에서는 사용되지 않았다. tr 표의 행으로 하나의 행을 감싸는 태그 th 제목요소로 보통 head 내부에 (월, 화, 수, 목, 금)은 th로 작성하였다. td 일반적인 데이터로 1교시, 영어, 체육등은 td로 작성하였다. 조금 복잡한 테이블을 그려보겠습니다. 좀 복잡한 형태인데요, 지역별 홍차는 2칸을 차지고 중국은 총 3칸을 차지 하네요. 일단 코드를 보겠습니다. 이전 코드와 차..