웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
이 포스트에서는 NW.js 프레임워크를 소개합니다. 구글 V8 자바스크립트 엔진으로 개발된 Node.js 플랫폼이 있습니다. NW.js는 이 Node.js 플랫폼을 기반으로 고안된 프레임워크로, 구글 크롬에 사용하는 크로미움 엔진을 내장하여 HTML 문서로 웹앱이 내장된 네이티브 애플리케이션(하이브리드 앱)을 만들 수 있게 하는 프레임워크입니다. NW.js 프레임워크로 “Hello, world!”라는 문구를 출력하는 앱을 만들면 다음과 같이 됩니다. 이처럼 UI가 구글 크롬의 그것과 같습니다. … 더 보기 “NW.js 프레임워크 소개”
이 포스트에서는 HTML5에서 추가된 <mark> … </mark> 태그에 관한 내용입니다. <mark> 태그는 비주얼적인 태그이면서도 특이하게도 HTML 4.01에서는 없었다가 HTML5에서 새로 생긴 태그입니다. 비주얼적인 태그는 HTML 문서에서 배제하는 추세임을 감안해 본다면 특이한 사례라는 생각이 들 수도 있겠습니다. 하지만 <mark> 태그가 추가된 이유는, 이미 글자를 굵게 하기 위한 태그로 <b>가 있음에도 <strong>이 따로 존재하는 이유와 같습니다. 즉, … 더 보기 “HTML5에서 추가된 유용한 태그 <mark>”
자바스크립트로 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”
이 화면에서 직접 실행하실 수 있습니다. Source: < > to < >< > to < > Clear Conv Dest: Copy 설명 코드에 포함되어 있는 < >를 < >로 변환하는 웹앱입니다. HTML 문서에 < >를 그대로 사용할 경우 태그의 시작으로 잘못 인식하여 의도하지 않은 결과가 일어날 수 있어서 이를 < >로 변환하는 과정이 필수적인데, 이 변환 … 더 보기 “HTML < ... > 변환기”
이 포스트는 루비로 퀵 정렬 알고리즘을 구현한 포스트입니다. 필자의 티스토리 블로그에도 퀵 정렬 알고리즘을 구현한 포스트가 있지만 여기서는 조금 개량한 코드를 서술합니다. def quick_sort(a, desc = false , randompivot = true) return a if a.length <= 1 # only 2 or more begin pivot = (a.max + a.min) / 2 rescue pivot = a[randompivot ? … 더 보기 “루비로 퀵 정렬 알고리즘 구현하기”
오늘날의 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에서 사용하지 않게 된 태그들”
