웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
이 웹앱은 전광판 웹앱 실험적으로 만들기 포스트의 코드를 기반으로 만든 웹앱으로, 특별히 홍대에서 활동하는 댄스팀 레드크루(Red Crew)의 리더 이강용 군을 응원하기 위한 웹앱으로 제작하여 보았습니다. 스마트폰이나 태블릿 기기의 웹 브라우저로 이 웹앱을 구동시켜서 사용하면 됩니다. 스마트폰의 경우 화면 회전 기능을 활성화시킨 후 가로화면으로 놓고 들고 계시면 됩니다. 아직은 실험단계로 추후 업데이트가 가능합니다. 8월 13일 업데이트: … 더 보기 “응원용 전광판 웹앱 (홍대 레드크루 버전)”
<a> … </a> 태그로 버튼을 만들 때 다음과 같은 경우를 생각해 볼 수 있을 것입니다. <a href=”#” onClick=”user_defined_function();”>Button</a> 이와 같이 링크는 #으로 처리하고 클릭하면 미리 정의된 자바스크립트 함수를 실행하게 하는 방식이 있습니다. 이 방식의 경우 문제점이 하나 있는데, 버튼을 누르고 나면 위의 주소 표시줄 끝에 # 표시가 생길 수 있다는 점입니다. 이 상태가 되면 순간적으로 … 더 보기 “<a> 태그로 만든 버튼 누를 때 # 표시 뜨지 않게 하기”
LED 전광판 웹앱을 만드는 실험적인 시도를 해 보았습니다. 한글과 라틴 문자를 지원하며 여러 색을 입힐 수 있는 전광판입니다. 예전에 전광판 효과로 나타내는 자바 애플릿이 있었지만 현재 자바 애플릿이 쇠퇴하는 추세에 있는 관계로 전광판 애플릿을 대체하기 위한 목적으로 실험적 개발을 하여 보았습니다. 전광판 데이터는 XML 파일에서 받아오는 형식입니다. 예를 들어, 이 예제에 사용된 demo.xml 파일의 내용은 … 더 보기 “전광판 웹앱 실험적으로 만들기”
이 포스트에서는 반응형 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. CSS에 미디어쿼리 기능이 있습니다. 같은 웹 페이지라도 인쇄하기 위한 레이아웃은 화면에 표시하기 위한 레이아웃과 다르게 해야 할 필요가 있고, 화면도 기기에 따라 해상도가 천차만별이기 때문에 다양한 해상도에서 레이아웃을 다르게 하기 위해 다양한 환경 조건에 따라 모양을 다르게 할 수 있는 기능을 제공합니다. CSS에 미디어쿼리를 적용하는 … 더 보기 “반응형 CSS 만들기”
이 포스트에서는 CSS로 롤오버 버튼을 만드는 방법을 포스팅합니다. 예전에는 롤오버 버튼(마우스를 대면 모양이 바뀌는 버튼)을 만들려면 보통의 버튼 이미지와 롤오버 버튼 이미지를 준비해 놓고 자바스크립트를 써서 마우스를 대면 롤오버 버튼 이미지로 변하게 하는 방식을 사용했습니다. 하지만 CSS를 이용하면 간단한 텍스트 버튼의 경우는 자바스크립트 없이 CSS만 가지고도 롤오버 버튼을 만들 수 있습니다. 이것은 CSS를 이용하여 링크에 … 더 보기 “CSS로 롤오버 버튼 만들기”
NW.js의 초기 선언 설정법에 관한 내용입니다. NW.js 프레임워크 소개 포스트에도 서술한 것처럼 NW.js 앱을 만들려면 package.json 파일이 필수적으로 있어야 합니다. 일단, 가장 간단하게 설정한 예를 보겠습니다. { “name”: “helloworld”, “main”: “index.html” } name과 main입니다. 최소한 이 두 개는 필요합니다. name은 앱의 이름, main은 처음으로 보여줄 문서입니다. 필수적인 것은 아니지만 추가로 “version”: “1.0.0” 식으로 앱의 버전을 … 더 보기 “NW.js의 선언 설정”