자바스크립트로 Form 인자값 얻기 (GET) 포스트에서는 GET 방식으로 전송된 폼 데이터를 CGI 프로그램(PHP, ASP, JSP 등) 없이 자바스크립트만으로 얻어서 처리하는 방법을 서술하였습니다. 여기서는 PHP로 GET 방식의 폼 데이터를 받아 처리하는 방법을 서술합니다. PHP에서는 자체적으로 폼 데이터의 값을 얻는 메소드를 지원하기 때문에 굳이 자바스크립트처럼 사전에 데이터 값을 얻기 위한 함수를 정의하지 않아도 된다는 장점이 있습니다. 먼저, … “PHP로 Form 인자값 얻기 (GET)” 더 읽기
이 포스트에서는 CSS를 이용하여 상자의 모퉁이를 둥글게 만드는 기법을 서술합니다. 예전에는 둥근 모퉁이를 구현하려면 배경 이미지를 이용하거나 플래시를 사용하여 둥근 모퉁이 버튼을 만드는 등의 방법을 사용하였지만, 현재는 CSS만으로도 둥근 모퉁이를 구현할 수 있어서 굳이 이런 방법을 쓸 이유가 없게 되었습니다. CSS에서 둥근 모퉁이를 구현하는 프로퍼티는 border-radius입니다. 일단 다음 코드를 봅시다. .radius_box { display: inline-block; padding: … “상자 모퉁이 둥글게 만들기” 더 읽기
이 포스트에서는 CSS로 홀수와 짝수에 따라 다르게 표시되는 기법을 서술합니다. 사무실에서 다루는 문서의 표나 각종 요금 고지서 등의 표를 보면 홀수줄과 짝수줄의 색이 다르게 입혀져 있는 것을 볼 수 있습니다. (참고로 마이크로소프트 엑셀 등 스프레드시트 프로그램에도 이 기능이 있습니다.) 이 기능은 CSS로도 구현할 수 있습니다. 다음 코드를 봅시다. p:nth-child(2) { color: blue; } 이 CSS … “홀짝에 따라 다르게 표시되는 CSS” 더 읽기
오늘날의 HTML 문서를 보면 DOCTYPE 태그가 맨 윗 줄에 있습니다. 이는 문서의 형태를 정의하기 위한 태그로 영문 용어는 Document Type Definition. 줄여서 DTD라고 부릅니다. 이는 마크업 문서의 형태가 무엇인지 알리기 위한 선언용 태그입니다. 우선 XML의 예를 봅시다. <?xml version=”1.0″ encoding=”UTF-8″?> XML 문서에서는 일반적으로 이런 형태의 DTD를 내장하고 있습니다. 이는 이 문서가 XML 문서임을 알리기 위한 … “DTD 정의하기” 더 읽기
이 포스트에서는 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 태그에 들어갈 내용들” 더 읽기
이 포스트에서는 PHP로 XML 문서의 데이터를 읽어들이는 방법을 설명합니다. 설명하기에 앞서 우선 XML 문서를 하나 준비합니다. <?xml version=”1.0″ encoding=”UTF-8″?> <girlgroup> <name alias=”GFRIEND”>여자친구</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> <album order=”EP 4집”>THE AWAKENING</album> </albums> </girlgroup> 언제나처럼 이번에도 예시는 … “PHP로 XML 파싱하기” 더 읽기
이 포스트에서는 PHP로 SVG 문서를 만드는 방법을 설명합니다. 방법은 PHP로 간단한 XML 만들기 포스트에 설명한 방법과 대동소이합니다 SVG가 XML 형식으로 되어 있기 때문입니다. 일단 코드는 다음과 같습니다. <?php // Create SVG XML $svg = new SimpleXMLElement(‘<svg />’); $svg->addAttribute(‘version’, ‘1.1’); $svg->addAttribute(‘xmlns’, ‘http://www.w3.org/2000/svg’); $svg->addAttribute(‘xmlns:xmlns:xlink’, ‘http://www.w3.org/1999/xlink’); // Width and Height $svg->addAttribute(‘width’, 100); $svg->addAttribute(‘height’, 100); // Elements $rect = … “PHP로 SVG 문서 만들기” 더 읽기
이 포스트에서는 자바스크립트로 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)” 더 읽기