HTML5 검색 결과

해당 글 10건

bPopup.js - JQuery 레이어 팝업 플러그인 사용하기

웹 개발을 하다보면 팝업을 호출해야 할 경우가 매우 많다.복잡한 기능을 수행하는 팝업 뿐 아니라, 상세 정보를 보여준다던가 혹은 단순히 사진 크게 보기 정도의 용도로도 팝업은 다양한 상황에서 필요하다.이 때, 매우 간단하게 모달 레이어 팝업을 구현할 수 있는 제이쿼리 플러그인이 있어서 사용해 보았다.바로 jquery.bpopup.js 플러그인이다. 간단하게 bPopup.js를 사용하여 레이어 팝업을 만들어 보고, 몇몇 옵션들에 대한 테스트를 해 보자. 우선 bPopup을 사용하기 위해서는 기본적으로 jQuery와 bPopup.js를 불러온다.jQuery는 1.3.x 이상의 버전이 권장된다고 한다. bpopup 개발자의 사이트(http://dinbror.dk/bpopup/) 에서 플러그인을 다운받아 제이쿼..
프로그래밍 & IT/Spring & HTML 2017. 3. 24. 18:06

dataTables row selection(행 선택) 구현 예제

강력한 Jquery Grid plugin인 dataTables에서 행 선택을 구현해 보자.row selection 기능을 구현하는 방법은 두 가지가 있다.행 선택에 대한 스크립트를 직접 구현하는 방법과, datatables 확장 플러그인을 사용하는 방법이다. 확장 플러그인을 사용하게 되면 더 간단한 코드를 구현할 수 있고, 다양한 선택 옵션들을 쉽게 변경할 수 있지만 별도의 js와 css를 불러와야 하므로 기본보다 다소 무겁다.하지만 해당 플러그인의 js와 css의 라인수가 많지 않기 때문에 속도나 데이터에 큰 차이가 없다. 때문에 훨씬 간단하게 코딩 가능하고 별도의 강력한 기능을 제공하는 extenstion 플러그인을 사용하는 것을 추천한다. 먼저 직접 코딩하여 구현하는 방법부터 알아보자. 123456..
프로그래밍 & IT/Spring & HTML 2017. 3. 21. 20:15

Thymeleaf Layout 환경에서 javascript 스크립트 사용하기

Spring boot 환경에서 뷰 리졸버로 thymeleaf를 사용하고 있다.thymeleaf가 제공하는 layout 기능을 사용해 편리하게 메뉴바와 content가 들어갈 공간 등을 잘 잡아 놓았다. [ thymeleaf layout 구성하기 : http://www.leafcats.com/9 ] 이 환경에서 새로 발견한 유용한 플러그인 테스트를 위해 연습용 페이지에서 스크립트를 작성해 보았는데, 아예 스크립트가 작동을 하지 않았다.레이아웃의 템플릿을 잡아놓은 mainLayout.html 파일에서 작성한 스크립트는 정상적으로 동작 하는데, 정작 컨텐츠가 들어갈 html 페이지의 스크립트가 동작하지 않는 것이었다. 문제를 찾기 위해 스크립트 코드 위치를 body 안쪽에도 넣어 보고, header에도 넣어 ..
프로그래밍 & IT/Spring & HTML 2017. 3. 14. 01:17

datatables Cannot read property 'length' of undefined 에러 해결

얼마 전 새로운 부서로 오면서 이 곳에서 사용중이던 시스템의 UI개선 프로젝트를 담당하게 되었다.기존 소스를 뜯어 보던 중 데이터 그리드를 그리는 부분에서 수많은 하드 코딩이 난무하는 것을 발견하였고, 그리드 디자인 자체도 마음에 들지 않았다.이 시스템의 그리드를 datatables로 뜯어 고치려고 일을 벌려놨는데, 막상 손을 대다 보니 생각보다 쉬운 일은 아니었다. 무엇보다 어떤 에러가 발생했을 때, 분명 예전에도 봤던 것이고 해결한 경험이 있었는데 또 같은 부분에서 시간을 낭비하고 있는 것이 가장 힘들었다. 개발을 하다 에러가 발생하고 해결한 과정을 블로그로 정리하면 다음에 또 이런 일이 있을 때 도움이 될듯 싶다. 이번에 쓸데없이 한시간 넘게 낭비한 부분이 datatables에서 그리드를 그릴 때 ..
프로그래밍 & IT/Spring & HTML 2017. 3. 9. 19:36

HTML5 탄생 배경과 HTML5의 특징

불과 몇 년 전까지만 해도 '코딩' 이라는 것은 프로그래밍을 직업으로 하는 전문 개발자들의 영역이었다. 개발자가 아닌 일반적인 대중들에게 있어서 코딩은 마치 중문학과 학생에게 있어서의 상대성이론과 같이 "나와는 전혀 상관 없는 것" 으로 느껴졌을 것이다. (중문학과를 무시하는 것이 아니다. 그만큼 친숙하지 못하다는 뜻이다.) 하지만 요즘 "코딩" 이라는 것은 몇 년 전보다는 확실히 우리 옆에 조금 가깝게 다가왔다.정부에서 프로그래밍 교육 의무화를 추진한다거나 하는 것에 대한 의미가 아니다. 실생활에서 소소한 코드를 수정할 필요성이 증가한 것이다.특히 티스토리나 워드프레스 등을 통해 블로그를 운영하는 분들은 본인도 모르게 코드를 다룬적 있으며, 분명 한번쯤은 '나도 코딩을 할 수 있었다면..' 하는 생각을..
프로그래밍 & IT/Spring & HTML 2017. 3. 7. 19:02

DataTables로 Spring 서버와 Ajax 통신 사용해 그리드 테이블 그리기

ajax를 사용하지 않더라도 dataTables로 테이블을 그리는 것은 가능하다.하지만 추후 대형 데이터를 고려 해 server side paging을 해야 할 필요성을 생각 했을 때, ajax통신을 활용하여 데이터를 주고 받는 것이 유리하다. 또한 그 밖에도 ajax사용해 값을 조회하면 전체 페이지가 리로드 되는 것에 대한 신경을 쓰지 않아도 된다. 서버에서 사용자 정보를 가져와 datatables로 그리드를 그릴 것이다. 서버와의 통신은 ajax로 이루어질 것이다. step1. html 소스1234567891011 Email Name User Status Super User Colored by Color Scriptercs테이블의 id는 "userTable"로 했다. 컬럼으로 구성될 항목은 "Emai..
프로그래밍 & IT/Spring & HTML 2017. 2. 12. 01:29

서버에서 넘겨준 List 데이터로 thymeleaf Grid 그리기

웹 개발을 하다보면 List 데이터로 View단에서 Grid를 만들어야 할 경우가 많다. 특히 비지니스성의 관리 화면일 경우에는 서버에서 값들을 조회해 그리드로 뿌리는 일이 절반이라고 해도 과언이 아니다. Spring boot로 서버를 구성하고, 뷰 리졸버로 thymeleaf(타임리프) 를 사용할 경우 이 작업이 매우 간단하게 이루어진다.(개인적으로 기존 jsp를 사용할 때나, 굳이 비동기로 처리할 이유가 없다면 제이쿼리 ajax를 사용하는 것보다도 더 편리하다고 생각한다.) 타임리프에서 제공하는 여러 속성들 중, 'th:each'와 'th:text'를 사용한 방법이다. 시스템에 등록된 사용자를 조회해서 출력하는 예제를 통해 직접 만들어 보았다. 1. Spring Controller에서 데이터 전송 미리..
프로그래밍 & IT/Spring & HTML 2017. 2. 6. 20:57

Spring(spring boot)에서 Thymeleaf를 사용한 HTML로의 값 전달

최근 Spring boot가 나오고, Spring의 진입장벽이 현저하게 낮아지며 급속도로 확산되고 있는듯 싶다.Spring MVC로 서버 개발을 할 때, 화면 랜더링 처리를 담당하는 기술로는 주로 JSP를 표준으로 많이 사용해 왔다. 그동안 몇몇 프로젝트를 하며 항상 jsp로 화면 랜더링을 해 왔는데, 요새는 이게 또 구식이란다. Spring boot에서는 기본적으로 JSP와 Thymeleaf(타임리프), Velocity 등을 지원 하는데, 이 중 Thymeleaf를 적극적으로 미는 느낌이다.각각의 장, 단점이 있기에 같이 쓸 수 있으면 좋은데 현재로서는 불가능한 것으로 알고 있다. (Spring boot의 단점인 빡빡한 태그 규칙 문제는 http://leafcat.tistory.com/27 를 참고) ..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 18:02

thymeleaf로 HTML 에서 Spring boot 서버단으로 값 전달하는 세가지 방법

thymeleaf 에서 Spring boot로 구동되는 서버단으로 값을 전달할 때에 다양한 방법이 있을 수 있다.그 중 생각나는 세가지 방법을 로그인 프로세스 예시를 통해 알아보도록 하자. 1. 전통적인 html form submit html form 태그로 감싸 포함된 항목들을 get 혹은 post 방식으로 submit하여, 서버의 컨트롤러에서 HttpServletRequest로 받는 방식이다. Login Colored by Color Scriptercs 위와 같이 loginForm이라는 id의 form이 email과 password를 감싸고 있다.이 form은 submit type의 버튼을 통해 /login.do로 HttpServletRequest에 값을 담아 전달한다. 이제 값을 전달받을 /logi..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 18:01

thymeleaf에서 legacy html5 사용하기(spring boot 사용)

Thymeleaf를 사용하며 가장 불편한 점은 이렇다. Thymeleaf가 결국 html을 well-formed XML로 변환하기 때문에 일반적인 습관으로 html을 작성할 때에 생각보다 많은 오류를 발생시킨다.(예를 들면 input이나 link, meta tag 등에서 닫힘 태그를 주지 않는 경우) 이데 Thymeleaf는 Legacy HTML5 Mode를 지원 한다. (이 모드를 사용할 경우 제한되는 부분은 추후 다시 확인해 볼 필요가 있다.) spring.thymeleaf.mode = HTML5 일 때 thymeleaf의 default mode는 html5이다.이 상태에서 link 태그를 닫지 않고 아래와 같이 meta, link 태그를 선언한다. 그 뒤, 이 html5 페이지에 접근하게 되면, 에..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:30