html5 10

thymeleaf (server-side template engine) 사용법 정리 - 2

지역변수 (Local Variables) Thymeleaf에서 지역변수의 범위는 변수가 정의된 DOM을 포함한 하위의 DOM까지를 포함합니다. 예를들면 다음과 같습니다. 1 2 3 4 5 Onions 2.41 Colored by Color Scripter cs 위 fragment는 each 속성을 통한 반복구문인데 여기에 사용된 prod는 를 포함하여 그 하위의 태그에서만 사용이 가능합니다. 위와 같이 반복문 이외에도 th:with속성을 이용하여 지역변수를 사용할수 있는데 구문은 다음과 같습니다. 1 2 3 4 5 6 The name of the first person is Tom. The name of the second person is Jeny. Colored by Color Scripter cs ..

유용한 정보 2017.08.24

thymeleaf (server-side template engine) 사용법 정리 - 1

저희 회사 제품인 CMS 솔루션 bizXpress는 Thymeleaf Template Engine 2.1.5 을 채택하여 사용하고 있습니다. 과거에는 JSP만 사용하다가 Thymeleaf 를 처음 접하면서 조금 생소하고 비교적 까다로운 사용법 때문에 적응하기 힘들었는데 지금은 모든 팀원들이 어려움 없이 잘 사용하고 있습니다. 저희들과 같이 Thymeleaf를 처음 접하는 분들에게 조금 이나마 도움이 될 수 있지 않을까 해서 자주 사용했던 기능들을 예제 위주로 정리 해보겠습니다. Thymeleaf는 Server-side Template Engine으로 순수 HTML문서에 HTML5문법으로 Server-side 로직을 수행하고 적용시킬 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14..

유용한 정보 2017.03.27 (1)

Ionic을 이용하여 하이브리드 앱을 개발해보자 -Intro

Ionic을 이용하여 하이브리드 앱을 개발해보자 (메신저 앱) - Intro 하이브리드 앱 하이브리드 앱은 HTML5, CSS, JavaScript를 사용해 만들어지며 다양한 모바일 플랫폼에서 네이티브 앱으로 실행된다. 표준 웹 개발을 사용하지만, 최종 앱은 기기에서 네이티브 앱으로 실행된다. 네이티브 앱과 웹 기반 앱의 장점만 결합하기위한 방법이다. 장점웹 표준을 사용하여 제작 기존 웹 개발자들이 어렵지 않게 하이브리드 앱 개발 가능신속한 수정, 업데이트 및 배포 가능각 플랫폼에서 네이티브 앱으로 실행됨 단점인터페이스가 표준 네이티브 앱과 다를 수 있음 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있음일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소..

앱 개발 2016.05.13

2015년 취업시장의 HOT ISSUE

2015년 취업시장의 HOT ISSUE 01 비정규직 채용 증가 전체 임금 근로자 (193만 명) 가운데 비정규직 근로자 비중 32.5% Created with Raphaël 2.1.2 20 40 60 80 2011 2012 2013 2014 2015 2015 32.5 chart by http://www.webponent.com/ 02 삼성 공채의 직무적합성평가와 공기업의 NCS전형 도입 기업의 직무 중심 채용에 대해 어떻게 생각하는가? (복수응답) Created with Raphaël 2.1.2 20 40 60 80 A B C D D 16.8 chart by http://www.webponent.com/ A : 기존에 없던 것을 준비해야 돼서 부담스럽고 막막하다 (52.8%) B : 기존과 크게 달라지..

유용한 정보 2015.12.28

HTML5 로 데스크탑 어플리케이션 만들기 2

HTML5 로 데스크탑 어플리케이션 만들기2 안녕하세요. CX 사업본부 MD 왓썹입니다.지난 포스팅에서 HTML 데스크탑 어플리케이션에 대해 알아보았는데요. 이번 포스팅에서는 node-webkit 을 이용하여 데스크탑 어플리케이션을 직접 만들어 보도록 하겠습니다. 1. 설치NodeJS - https://nodejs.orgnode-webkit 은 NodeJS 를 기반으로 하기 때문에 기본적으로 NodeJS 가 설치되어 있어야 합니다.NodeJS 는 위에 링크된 공식 홈페이지에서 각자의 OS 에 맞는 인스톨러를 다운로드 하여 설치하실 수 있습니다. NodeJS 설치가 완료 되었다면 node-webkit 을 설치하셔야 하는데요. OS (Window, Linux, Mac) 별로 설치법이 다소 차이가 있기 때문에..

프론트엔드 2015.12.04

HTML5 로 데스크탑 어플리케이션 만들기!

HTML5 로 데스크탑 어플리케이션 만들기! 안녕하세요. CX 사업본부 MD 왓썹입니다. 이번 포스팅에서는 HTML5 로 데스크탑 어플리케이션을 만드는 방법을 알아보도록 하겠습니다. 어플리케이션은 music player 나 채팅 프로그램 등과 같이 어떤 종류의 작업을 돕기 위해 설계된 프로그램으로 응용 프로그램이라고도 합니다.따라서 데스크탑 어플리케이션은 windows 나 맥, 리눅스와 같은 os 에 설치된 응용 프로그램을 말하는데요. 지금까지 데스크탑 어플리케이션을 만들기 위해 윈도우에서는 C++ 을, 맥에서는 Object C 를 이용해 만들어왔기 때문에 웹개발자의 입장에서는 거리가 먼 존재라는 인식을 가지고 있었죠. 하지만 이제는 C++ 이나 Object C 에 대해 잘 모른다 할지라도 HTML과 C..

프론트엔드 2015.10.26

ActiveX 및 NPAPI 이용현황

ActiveX 및 NPAPI란?ActiveX는 마이크로소프트에서 개발한 응용프로그램과 웹을 연동시키기 위해 제공되는 기술입니다. ActiveX는 웹에서 HTML의 정적인 웹 문서에서 탈피하여, 동적이고 화려한 멀티미디어 기술을 동작 할 수 있도록 하는 일종의 인터넷 익스플로러 전용 플러그인(Plug-in) 기술이라고 할 수 있습니다. 또한, NPAPI는 구글 크롬 브라우저가 지원하지 않는 각종 기능(결제, 인증, 보안 등)을 동작하도록 하는 플러그인 기술이며, 구글은 프로그램 충돌, 보안 취약성, 모바일 미지원 등의 문제를 고려하여 ’15.9월에 NPAPI 지원을 중단하겠다고 발표하였습니다. ActiveX 관련기술 ActiveX Control 웹 페이지에 내장되어 실행 가능한 객체로 C/C++. 비주얼베..

프론트엔드 2015.08.17

GITHUB프로젝트들의 인기 순위와 상위 프로젝트 소개

최근에 http://js.org/이라는 사이트가 세상에 등장했습니다. 자기가 만든 프로젝트의 홈페이지를 무료로 호스팅도 해주고 GitHub에 등록된 프로젝트중 상위 1만개 프로젝트의 순위도 표시해 줍니다. 호스팅되는 도메인명은 http://myproject.js.org입니다. 자바스크립트 개발자인 저는 js.org라는 도메인명이 매우 탐이 납니다. 프로젝트 순위는 Git허브에서 Star수와 fork수가 많은 순대로 표시됩니다. 제가 만든 라이브러리는 없었습니다 (ㅠㅠ). 누적 순위와 함께 일간, 주간, 월간 순위도 제공하므로 요새 급부상중인 프로젝트가 무엇인지 금방 알 수 있습니다. 게다가 이 순위 데이터는 하루에 세번씩 업데이트 되고, 외부에서도 사용할수 있습니다. js.org사이트에서는 1만건의 데이..

유용한 정보 2015.07.16

자바스크립트 소팅, 멀티 소팅

자바스크립트 소팅, 멀티소팅에 관하여 웹포넌트 그리드에는 기본기능으로 소팅, 멀티소팅이 있습니다. 기능을 구현하면서 많은 시행착오가 있었습니다. 이 글에서는 당시에 얻은 "자바스크립트를 이용한 클라이언트사이드 소팅"관한 지식을 공유하려고 합니다.자바스크립트의 Array.prototype.sort()메서드에 대해서 알아보고 메서드의 응용, 멀티소팅은 어떤식으로 구현했는지 소개하려고 합니다.sort()메서드의 동작방식sort()메서드를 아무인자도 주지 않고 실행 시키면 사전식으로 정렬이 됩니다. 1 2 3 var letters = ["R","O","F","L"]; letters.sort(); alert(letters); //produces ["F","L","O","R"] cs 하지만 실제세계에서는 날짜비교,..

프론트엔드 2015.06.19 (2)

오늘의 HTML5 현황과 미래

HTML5 간단한 소개 이미지 출처 https://www.powwownow.co.uk HTML5이란 웹 개발 생산성 향상 및 차세대 웹 애플리케이션 플랫폼으로서 더 나은 사용자 경험을 위해 함께 만들어 나가는 개방형 웹 표준이다.2004년부터 전 세계 웹 개발자들이 직접 참여하여 만들어온 표준이기도 하다.HTML5는 HTML4와 비교하기 어려울 정도로 엄청나게 확장된 표준이다. HTML4까지는 웹에서 문서를 표현하고 연결하는 기능에 중점을 두었다면, HTML5 표준은 앱 개발 플랫폼을 목표로 하였기 때문이다. 즉, HTML5에는 멀티미디어 기능으로 비디오, 오디오를 지원하며, 2차원 그래픽 기능인 캔버스 지원 한다. 또한 기존 웹 콘텐츠에서 가장 많이 활용되는 구조를 분석하여 확장 HTML5 Forms ..

프론트엔드 2015.06.19