이 포스트에서는 HTML5에서 사용하지 않게 된 태그들을 설명합니다. 먼저, CSS로 대체할 수 있어 사용하지 않게 된 태그들입니다. <basefont> <head> 안에 넣어서 기본 글꼴을 지정하는 태그입니다. 현재 모든 브라우저에서 지원하지 않습니다. <big> 글자를 크게 하는 태그입니다. CSS 속성으로 font-size 속성을 주는 것으로 대체합니다. <center> 가운데로 정렬하는 태그입니다. CSS 속성으로 text-align: center; 속성을 주는 것으로 대체합니다. <font> … “HTML5에서 사용하지 않게 된 태그들” 더 읽기
HTML5 시대에 맞게 홈페이지 코딩하기 포스트에서 이어지는 포스트입니다. 이 포스트에서는 HTML5 문서의 head 태그 안에 들어갈 내용에 대한 설명입니다. head 태그는 body와 함께 HTML 태그의 차상위 태그로(최상위는 html) body가 문서의 내용을 서술하는 부분이라면 head는 문서의 속성을 지정하는 부분입니다. 다음 코드를 봅시다. <!DOCTYPE html> <html lang=”ko”> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <meta … “HTML5 문서의 head 태그에 들어갈 내용들” 더 읽기
이 포스트에서는 자바스크립트로 JSON 파일을 만드는 방법을 소개합니다. PHP로 JSON 파일 만들기에서 코딩한 것처럼 생성하는 과정은 간단합니다. 다음과 같습니다. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ var obj = new Object(); obj.name = “여자친구” obj.members = [“소원”, “예린”, “은하”, “유주”, “신비”, “엄지”]; obj.albums = {“EP 1집”: “Season of Glass”, “EP … “자바스크립트로 JSON 파일 만들기” 더 읽기
이 포스트에서는 제이쿼리를 써서 JSON 데이터를 파싱하는 방법을 설명합니다. JSON 데이터 파싱 방법은 기본적으로는 XML 파싱할 때와 같지만, JavaScript Object Notation이라는 의미답게 XML 파싱에 비해 코드가 간결해진다는 특징이 있습니다. 우선 JSON 문서가 다음과 같이 있다고 가정합니다. (편의를 위해 데이터를 여러 줄에 걸쳐서 전개하였습니다.) { “name”: “여자친구”, “members”: [ “소원”, “예린”, “은하”, “유주”, “신비”, “엄지” ], … “자바스크립트로 JSON 파싱하기 (jQuery)” 더 읽기
이전의 자바스크립트로 XML 파싱하기에서는 제이쿼리(jQuery)를 사용하지 않고 순수 자바스크립트로만 AJAX를 사용하였습니다. 하지만 제이쿼리를 이용하면 코드를 더욱 간결하게 만들 수 있습니다. 제이쿼리를 사용하여 이전 포스트의 자바스크트 부분의 코드를 다시 작성할 경우, 다음과 같이 됩니다. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $.ajax({ type: “GET”, url: “xml_sample.xml”, dataType: “xml”, success: function (xml) … “자바스크립트로 XML 파싱하기 (jQuery)” 더 읽기
이 포스트에서는 자바스크립트로 XML 문서의 데이터를 읽어들이는 AJAX 기법을 사용하는 방법을 설명합니다. 우선, XML 문서가 다음과 같이 있다고 가정합니다. <?xml version=”1.0″ encoding=”UTF-8″?> <girlgroup> <name>여자친구</name> <members> <member>소원</member> <member>예린</member> <member>은하</member> <member>유주</member> <member>신비</member> <member>엄지</member> </members> <albums> <album order=”EP 1집”>Season of Glass</album> <album order=”EP 2집”>Flower Bud</album> <album order=”EP 3집”>Snowflake</album> <album order=”정규 1집”>LOL</album> </albums> </girlgroup> 이 XML 문서의 파일 이름이 … “자바스크립트로 XML 파싱하기” 더 읽기
HTML 문서의 폼(Form)을 보내는 방법은 GET 방식과 POST 방식이 있습니다. URL에 데이터를 실어 보내는 GET 방식은 데이터를 자바스크립트로 얻을 수 있습니다. 자바스크립트로 GET 인자값을 얻는 함수 선언은 다음과 같습니다. function receive_get_data(param) { var result = null, tmp = []; var items = window.location.search.substring(1).split(“&”); for (var i = 0; i < items.length; i++) { tmp = … “자바스크립트로 Form 인자값 얻기 (GET)” 더 읽기
이 글은 필자의 티스토리 블로그에서 포크하였습니다. (원글 링크) 요즘 웹 사이트를 보면 모바일로 접속하였느냐 일반 PC로 접속하였느냐에 따라 페이지가 다르게 보여지는 경우들이 있는데요. 이 포스트에서는 모바일 접속 여부에 따라 다르게 보여지는 기능을 구현하기 위한 자바스크립트를 설명합니다. /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 일단 이 한 줄의 코드만으로도 모바일인지 아닌지 간단하게 검출 가능합니다. 만약 모바일에서 접속했다면 true 값을 돌려줄 것이고 … “접속한 기기가 모바일인지 아닌지 확인하는 자바스크립트” 더 읽기
1990년대 후반에서 2000년대 초반 즈음에 한국에 인터넷이 보급되기 시작하면서 개인 홈페이지 열풍이 불었을 때 홈페이지의 HTML 코딩을 다음과 같이 했을 것입니다. <html> <head> <title>제목</title> </head> <body background=”배경그림” bgcolor=”배경색” text=”글자색” link=”링크색” vlink=”방문링크색” alink=”활성링크색”> <p><font size=”5″ color=”글자색”>Hello, world!</font></p> <p>Hello, world!</p> </body> </html> 그 당시는 컴퓨터로만 인터넷을 하던 시대였지만, 스마트폰으로 인터넷을 하는 시대가 오면서 오늘날 이런 형식의 홈페이지 … “HTML5 시대에 맞게 홈페이지 코딩하기” 더 읽기