스크롤바가 숨겨진 상태에서 스크롤되는 웹 페이지 만들기

웹 페이지를 만들 때 스크롤이 가능하게 하면서도 스크롤바를 숨겨야 할 경우가 있습니다. 모바일 기기에서는 스크롤바가 평소에는 보이지 않다가 스크롤 중에 희미하게 보이지만 데스크톱에서는 오른쪽에 자리를 차지하고 있는데, 이 때 overflow: hidden;으로 CSS를 지정하면 스크롤바는 숨겨지지만 스크롤이 되지 않습니다. 다만, 모종의 방법을 사용하면 스크롤바가 숨겨진 상태에서도 스크롤이 가능하게 구현할 수 있습니다. 스크롤바를 숨기고 웹 페이지를 스크롤할 … 더 보기 “스크롤바가 숨겨진 상태에서 스크롤되는 웹 페이지 만들기”

응원용 전광판 웹앱 (홍대 레드크루 버전)

이 웹앱은 전광판 웹앱 실험적으로 만들기 포스트의 코드를 기반으로 만든 웹앱으로, 특별히 홍대에서 활동하는 댄스팀 레드크루(Red Crew)의 리더 이강용 군을 응원하기 위한 웹앱으로 제작하여 보았습니다. 스마트폰이나 태블릿 기기의 웹 브라우저로 이 웹앱을 구동시켜서 사용하면 됩니다. 스마트폰의 경우 화면 회전 기능을 활성화시킨 후 가로화면으로 놓고 들고 계시면 됩니다. 아직은 실험단계로 추후 업데이트가 가능합니다. 8월 13일 업데이트: … 더 보기 “응원용 전광판 웹앱 (홍대 레드크루 버전)”

<a> 태그로 만든 버튼 누를 때 # 표시 뜨지 않게 하기

<a> … </a> 태그로 버튼을 만들 때 다음과 같은 경우를 생각해 볼 수 있을 것입니다. <a href=”#” onClick=”user_defined_function();”>Button</a> 이와 같이 링크는 #으로 처리하고 클릭하면 미리 정의된 자바스크립트 함수를 실행하게 하는 방식이 있습니다. 이 방식의 경우 문제점이 하나 있는데, 버튼을 누르고 나면 위의 주소 표시줄 끝에 # 표시가 생길 수 있다는 점입니다. 이 상태가 되면 순간적으로 … 더 보기 “<a> 태그로 만든 버튼 누를 때 # 표시 뜨지 않게 하기”

전광판 웹앱 실험적으로 만들기

LED 전광판 웹앱을 만드는 실험적인 시도를 해 보았습니다. 한글과 라틴 문자를 지원하며 여러 색을 입힐 수 있는 전광판입니다. 예전에 전광판 효과로 나타내는 자바 애플릿이 있었지만 현재 자바 애플릿이 쇠퇴하는 추세에 있는 관계로 전광판 애플릿을 대체하기 위한 목적으로 실험적 개발을 하여 보았습니다. 전광판 데이터는 XML 파일에서 받아오는 형식입니다. 예를 들어, 이 예제에 사용된 demo.xml 파일의 내용은 … 더 보기 “전광판 웹앱 실험적으로 만들기”

HTML < ... > 변환기

이 화면에서 직접 실행하실 수 있습니다. Source: < > to &lt; &gt;&lt; &gt; to < > Clear Conv Dest: Copy 설명 코드에 포함되어 있는 < >를 &lt; &gt;로 변환하는 웹앱입니다. HTML 문서에 < >를 그대로 사용할 경우 태그의 시작으로 잘못 인식하여 의도하지 않은 결과가 일어날 수 있어서 이를 &lt; &gt;로 변환하는 과정이 필수적인데, 이 변환 … 더 보기 “HTML < ... > 변환기”

HTML SVG 라듐시계 (로마 숫자)

플래시 없이 HTML5와 SVG, CSS와 자바스크립트를 이용하여 구현해 본 라듐시계(원본 포스트)의 로마 숫자 버전입니다. 라듐 특유의 푸른 야광빛을 구현하였습니다. 시각 숫자는 로마 숫자로 표현하였으며, 시각에 따라 회전되게 구현하였습니다. 본래 4에 해당하는 로마 숫자는 IV이지만 시계에서는 전통적으로 IIII를 사용한다는 점을 고려하여 여기서도 IIII로 표현하였습니다. 링크는 다음과 같습니다: https://pjw48.net/webapp/radiumclock/roman.html

자바스크립트로 JSON 파일 만들기

이 포스트에서는 자바스크립트로 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 파일 만들기”

자바스크립트로 XML 파싱하기

이 포스트에서는 자바스크립트로 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 파싱하기”

자바스크립트로 Form 인자값 얻기 (GET)

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 값을 돌려줄 것이고 … 더 보기 “접속한 기기가 모바일인지 아닌지 확인하는 자바스크립트”