본문 바로가기

HTML5

JSTL foreach 구문에서 break 처리하기 참조예제 JSTL forEach문에서 break 는 공식적으로는 없습니다.하지만 변수선언을 통한 로직을 이용하는방법과 스크립릿을 사용하는 방법으로 구현은 가능합니다.로직 사용방식은 아래와 같습니다. ${status.count} 더보기
html5 다중파일 처리 여러개의 파일 업로드폼 처리 파일 작성폼 태그는 이런식으로 구성되어 있습니다. 태그를 IE 브라우저에서 실행해보면 스타일이 적용되지 않은 기본 구성일 경우 아래와 같이 나오죠. 찾아보기 버튼을 클릭하면 파일선택팝업이 나오는데 이때 선택할 수 있는 파일은 한 개로 제한되어 있습니다. 따라서 여러개의 파일을 동시에 전송하기위해서 등록가능 파일개수만큼 파일태그를 구성하거나 파일태그를 동적으로 여러개 생성하는 등 스크립트를 이용한 구현이 필요했습니다. html5에서는 추가된 속성인 multiple 이란 속성만 추가해 주면 하나의 파일태그에서 여러개의 파일이 등록가능해집니다. 다만 파일리스트를 볼수 없다는 점은 결국 추가적인 구현이 필요하겠다는 생각이 드네요. 콤보리스트등과 간다하게 연동할 수 있는 방법이 있는지는 확인해 봐야 할거 같습니다.. 더보기
html5 input 필드에 기본 텍스트 표시 후 클릭시 사라지게 하기 최근 대부분 인터넷 포털의 로그인 아이디 패스워드 입력 박스에는 아래와 같이 "아이디" "비밀번호" 등 입력안내 문구가 기본값으로 세팅되어 있습니다. 과거 html 버전에서는 입력 값을 설정한 후 이벤트 에 대한 스크립트 처리를 통해서 keyin 이나 click 이벤트 발생시 펑션구현을 이용해서 기본 세팅값을 클리어해주는 역할을 해줬죠.. 구현된 예시는 아래링크 참고 :: [jQuery plugin] 기본값이 있는 inputbox 만들기 html5에서는 구현할 필요없이 자체 기능으로 제공합니다. inpit 타입에 placeholder 라는 속성값을 추가해주기만 하면 끝나네요.. 두 줄이면 이미지와 같은 형태로의 구현이 가능합니다. 더보기
html5 output 태그 사용팁 (슬라이더 값 출력) 관련 서적에서 샘플을 찾아보니 output 으로 보여지는 값을 세팅할 이벤트로 onchange 를 사용했네요. onchange 의 문제는 이동할때 바로 이동위치의 값이 출력되지 않고 마우스클릭을 해제했을때야 값이 세팅되는것입니다.. pc 크롬브라우져에서만 테스트를 해봤는데. 아마도 모바일 브라우져도 동일하지 않을까 생각이 되구요. 예제 솔루션 4-4: range input 타입 폼에 슬라이더 추가하기 귀하의 매직 넘버를 선택하시오: 5 range 의 value 값은 output 태그 내용 과 일치를 시켜주었습니다. 로딩 초기 화면에서 동일한 수치를 보여주기 위해서 입니다. 해당 소스를 실행해보면 range 를 이동시키는 동안 output 의 값이 변경되지 않습니다. 이를 이동되는동안에도 값의 변경상태를 .. 더보기
html5 프레임워크 [DaVinci Studio] html5 를 기반으로 하는 UI프레임워크 중 가장 생산성이 뛰어나다는 생각이 드네요. 기존에 사용되는 오픈소스를 조합하여 만든것은 기존의 프레임워크과 같으나 디바이스 환경 별 미디어 쿼리 적용을 드래그만으로 가능하도록 해주고(N-Screen Edi) 데이터 바인딩 또한 전용 에디터를 이용하여 드래그 방식의 편리함을 제공합니다. 홈페이지에 나온 다빈치 스튜디오 소개 DaVinci Studio는 이클립스 플러그인으로 개발된 강력한 프로젝트 관리자와 코드 에디터를 제공합니다. N-Screen 환경을 시뮬레이션 할 수 있는 에뮬레이터와 하이브리드 에플리케이션을 손쉽게 만들 수 있는 빌드 서버를 제공합니다. 웹 에플리케이션 개발에 필수적인 툴체인(Data Binding Editor, N-Screen Editor.. 더보기
[Node.js] 웹소켓 Socket.io 설치 후 인식안될때 npm install -g socket.io 입력하여 간단히 소켓을 설치했습니다. ㅎㅎ Socket.io 설치 후 예제 작성하여 실행하였는데.. 헐. D:\>cd nd D:\nd>node server.js module.js:340 throw err; ^ Error: Cannot find module 'socket.io' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object. (D:\nd\server.js:2:10) at Module._compile.. 더보기
[Node.js] express 생성 코드 참고 참고한 블로그 express 프로젝트_폴더명 하면 간단하게 익스프레스 기본 껍대기가 생기게 됩니다. 자동 생성된 파일 중 app.js 을 node 명령어로 실행하구요. 그 파일 내용 은 아래와 같습니다. /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('.. 더보기
[Node.js] 기본 모듈 설명 (자주 사용되는것들) 자세한 내용 참고 기본 모듈의 형태나 사용방법은 유닉스환경과 유사한부분이 있어 관련 개발경험이 있을경우 접근이 용이한 장점을 가지고있습니다. Globals - 전역 객체 (보통 생략하고 씁니다) File System - 파일 시스템 관련 모듈로서 파일 읽기, 쓰기, 수정, 권한 등을 담당 'fs' Path - 파일 및 디렉토리의 경로와 관련된 모듈 'path' HTTP/HTTPS - HTTP 서버와 클라이언트 구현 관련 모듈 'http' Debugger - 노드를 디버깅하기 위한 모듈 더보기
CORNERSTONE SK 오픈소스 HTML5 프레임워크 http://cornerstone.sktelecom.com/ 소개페이지 http://cornerstone.sktelecom.com/2/livedoc/ DOC http://cornerstone.sktelecom.com/2/guide/#title 가이드 http://martian36.tistory.com/1197 참고 블로그 리뷰 SK 텔레콤 ? 에서 개발한 html5 프레워크입니다. 모바일 및 데스크탑 환경에서 동작하는 고품질의 웹 페이지 또는 웹 앱을 제작할 수 있는 Client-side Framework 라고 정의합니다.. UI 용 프레임워크라는 의미겠네요.. 얼핏 설명 들어봐서는 반응형 웹이 적용된듯합니다. 문법을 보면 센차와 비슷해보이고..(mvc 패턴 어쩌구 하는 얘기도 나옵니다) 얼만큼의 편의성.. 더보기
[웹개발]탐색기에서 드래그앤 드롭으로 편리하게 파일 업로드 파일 업로드할때 멀티드래그 하는 방법에 대해서 html5 를 이용한 드래그앤 드롭 파일리스트 상용 innoAP api 사용 최근 게시판 소스들은 파일첨부할때 드래그앤 드롭기능을 이용해서 파일 선택창을 사용하지않고 여러개의 파일을 동시에 올릴 수 있도록 지원해주고 있습니다. html5 에서는 더 편리하게 지원해주는거같고 그게 아니더라도 구현은 가능할것같습니다. miplatform 에서 연동되는 방법은 좀 찾아봐야 할듯.. 추가내용 ======================================================================= 이런데가 있군요.. 사용기간 무제한, 멀티, 대용량 파일 업로드가능등... InnoAP - 이노릭스 - INNORIX - 파일전송 솔루션 전문기업 - .. 더보기
드래그 파일업로드 폼 만들기 파일 업로드할때 멀티드래그 하는 방법에 대해서 html5 를 이용한 드래그앤 드롭 파일리스트 최근 게시판 소스들은 파일첨부할때 드래그앤 드롭기능을 이용해서 파일 선택창을 사용하지않고 여러개의 파일을 동시에 올릴 수 있도록 지원해주고 있습니다. html5 에서는 더 편리하게 지원해주는거같고 그게 아니더라도 구현은 가능할것같습니다. miplatform 에서 연동되는 방법은 좀 찾아봐야 할듯.. 더보기
[모바일,html5] 안드로이드,아이폰 바로가기 아이콘 생성 shortcut icon 아이폰의 경우 바탕화면에 바로가기 만들면 해당 화면을 캡쳐하여 아이콘을 만들어버립니다. 아래 방법은 정해진 이미지를 아이콘으로 생성하는 방법입니다. 반응형웹,html5,모바일,웹앱,하이브리드앱,뷰포트,shortcut iconshortcut icon,바로가기 아이콘,PhoneGap,Sencha Touch,Android,안드로이드,아이폰,IOS,iPhone,크롬,Explorer8,Explorer9,Explorer10 더보기
[모바일,html5] 뷰포트 viewport 선언으로 디바이스,방향전환에 반응하는 웹페이지 구현 반응형웹,html5,모바일,웹앱,하이브리드앱,뷰포트,viewport,PhoneGap,Sencha Touch,Android,안드로이드,아이폰,IOS,iPhone,크롬,Explorer8,Explorer9,Explorer10 모바일웹 구현시 고려해야 할 부분중 가장 중요하면서 기본적인 내용으로 다양한 디바이스에 보여지는 웹페이지 사이즈를 자동으로 조정하는기능이 필요합니다. viewport 에 선언된 값(width)으로 100% 크기가 정의되어 디바이스 별 화면 사이즈 및 방향전환에 맞춰진다고 생각하시면 될듯. 아래 설정으로 간단히 구현 가능합니다. content="width=device-width" : 가로값 ('디바이스 크기에 맞추겠다' 고 선언) intial-scale=1.0 : 처음 로딩 화면 비율 mi.. 더보기
[jstl] foreach 구문 break 처리 참조예제 JSTL forEach문에서 break 는 공식적으로는 없습니다. 하지만 변수선언을 통한 로직을 이용하는방법과 스크립릿을 사용하는 방법으로 구현은 가능합니다. 로직 사용방식은 아래와 같습니다. ${status.count} 스크립틀릿 사용방식입니다. break; 더보기
[html]html5 가이드 pdf [문서 제공 사이트] HTML 5 GUIDE 한국 웹 표준 커뮤니티, 윤석찬, 신현석, 정찬명, 경준호, 권정혁 html5-guide.pdf 더보기
html5 메뉴얼 강좌 1. HTML5 소개 .6 1.1 HTML 5 의 배경.7 1.2 HTML5 개요.12 1.3 HTML5 표준 문서들 22 1.4 HTML5와 웹개발 방법론의 변화 .26 1.5 FAQ.29 2. HTML5 마크업32 2.1. 구조와 문법 .33 2.2. 요소와 속성 .36 2.3 HTML5 예제.54 2.4 HTML 4.01과의 비교58 3. CSS3 소개 63 3.1 CSS2와 차이점64 3.2 CSS3 브라우저 지원현황64 3.3 CSS3 실전 적용 69 3.4 CSS3 명세 읽는 법 .80 3.5 FAQ.80 4. HTML5 API.85 4.1 HTML5 미디어 요소86 4.2 HTML5 API92 4.3 리치 웹 API108 4.4 FAQ.122 5. HTML5와 모바일 125 5.1 모바일에서.. 더보기

티스토리툴바