웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
오늘날의 HTML 문서를 보면 DOCTYPE 태그가 맨 윗 줄에 있습니다. 이는 문서의 형태를 정의하기 위한 태그로 영문 용어는 Document Type Definition. 줄여서 DTD라고 부릅니다. 이는 마크업 문서의 형태가 무엇인지 알리기 위한 선언용 태그입니다. 우선 XML의 예를 봅시다. <?xml version=”1.0″ encoding=”UTF-8″?> XML 문서에서는 일반적으로 이런 형태의 DTD를 내장하고 있습니다. 이는 이 문서가 XML 문서임을 알리기 위한 … 더 보기 “DTD 정의하기”
플래시 없이 HTML5와 SVG, CSS와 자바스크립트를 이용하여 구현해 본 라듐시계(원본 포스트)의 로마 숫자 버전입니다. 라듐 특유의 푸른 야광빛을 구현하였습니다. 시각 숫자는 로마 숫자로 표현하였으며, 시각에 따라 회전되게 구현하였습니다. 본래 4에 해당하는 로마 숫자는 IV이지만 시계에서는 전통적으로 IIII를 사용한다는 점을 고려하여 여기서도 IIII로 표현하였습니다. 링크는 다음과 같습니다: https://pjw48.net/webapp/radiumclock/roman.html
이 포스트에서는 HTML5에서 사용하지 않게 된 태그들을 설명합니다. 먼저, CSS로 대체할 수 있어 사용하지 않게 된 태그들입니다. <basefont> <head> 안에 넣어서 기본 글꼴을 지정하는 태그입니다. 현재 모든 브라우저에서 지원하지 않습니다. <big> 글자를 크게 하는 태그입니다. CSS 속성으로 font-size 속성을 주는 것으로 대체합니다. <center> 가운데로 정렬하는 태그입니다. CSS 속성으로 text-align: center; 속성을 주는 것으로 대체합니다. <font> … 더 보기 “HTML5에서 사용하지 않게 된 태그들”
파이썬으로 퀵 정렬 알고리즘 구현하기 포스트에서 간단하기 퀵 정렬 알고리즘을 구현하여 보았습니다. 이번에는 같은 알고리즘으로 2차원 배열을 정렬하는 상황을 가정해 봅시다. unsorted = [[5, 7, 3], [3, 4, 5], [4, 2, 6], [2, 6, 4]] for xx in unsorted: print(“%s” % xx) print() for xx in quicksort(unsorted): print(“%s” % xx) 이렇게 2차원 배열을 퀵 정렬 … 더 보기 “파이썬으로 퀵 정렬 알고리즘 구현하기 2”
이 포스트에서는 파이썬에서 퀵 정렬 알고리즘을 구현한 포스트입니다. 여기서는 퀵 정렬 알고리즘을 병합 정렬 알고리즘 기반으로 구현하였습니다. 코드를 봅시다. def quicksort(arr, desc = False): if len(arr) <= 1: return arr # only 2 or more try: # numeric array pivot = (max(arr) + min(arr)) / 2 except TypeError: # non-numeric array i = len(arr) // … 더 보기 “파이썬으로 퀵 정렬 알고리즘 구현하기”
제이쿼리 웹앱과 XML 간의 AJAX 연동을 실험하여 보았습니다. 실험 대상은 예전에 제이쿼리 웹앱 디자인 예시로 사용한 걸그룹 여자친구 관련 웹앱입니다. (원본: https://pjw48.net/portfolio/jwa/) 연동할 XML 문서를 다음과 같이 만들었다고 가정합니다. <?xml version=”1.0″ encoding=”UTF-8″?> <gfriend> <mainpage> <image>images/gfriend_2015.jpg</image> <description>여자친구 공연 사진</description> </mainpage> <profile> <image>images/gfriend_2017_greeting.jpg</image> <description><![CDATA[ <p>여자친구(GFRIEND)는 2015년 1월 25일 데뷔한 걸그룹으로 소속사는 쏘스뮤직이며 멤버 수는 6명입니다.</p> <p>데뷔앨범은 미니앨범 … 더 보기 “jQueryUI – XML 연동 실험”
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 문서 만들기”
루비로 간단한 XML 파일을 설명하는 포스트입니다. 본래 티스토리에 올렸던 포스트를 코드를 개량하고 분량을 다른 XML 생성 포스트에 맞춰 축소한 후 이 곳에 다시 포스팅합니다. 루비로 XML 파일을 생성하려면 Builder 라이브러리가 필요합니다. 콘솔 명령창에서 ‘gem list –local’이라고 쳐서 나오는 목록 중에 ‘builder’가 없으면 설치해야 합니다. builder를 설치하려면 ‘gem install builder’라고 치시면 됩니다. builder 라이브러리가 설치됐으면, 다음과 … 더 보기 “루비로 간단한 XML 파일 만들기”