웹솔루션개발 25년 노하우! 해피CGI의 모든것

flexbox를 이용하여 레이아웃을 구성을 하고자 한다면 꼭 참고하면 좋은 사이트입니다. 10가지의 레이아웃을 소개하고 있습니다 http://wit.nts-corp.com/2018/07/27/5274 lexbox 속성이 나온지는 꽤 되었지만, 브라우저의 지원 및 실무에서는 실제로 사용하지 않는 경우가 많은게 사실입니다 브라우저도 많이 업그레이드되어 장점이 많은 flexbox를 활용하면 보다 다양하고 손쉬운 레이아웃을 만들수 있으면 좋겠네요. 위 링크에서 flexbox에 대한 자세한 내용을 확인할 수 있습니다.

욕실인테리어 홈페이지

jQuery 를 이용하여 데이터를 차트화 할 수 있습니다. 차트 종류가 다양하게 제공되는데요. 꼭 서버의 모니터링 툴을 만들때 cpu 사용량이나 메모리 사용량 등에 쓰면 좋을듯 하네요 ^^; 아래의 코드로 쉽게 시작 할 수 있습니다. ^^ // Create a Zeu TextMeter. var textMeter = new zeu.TextMeter('text-meter'); // Update display and percentage value. textMeter.displayValue = 'ZEU'; textMeter.value = 90; *License : MIT

CKEditor Youtube Plugin 입니다. CKEditor 에는 youtube Plugin 이 있었습니다. 예전의 Youtube Plugin 보다 기능이 더 강화 되었네요. ^^ *Youtube Plugin 에 추가 기능 안내 1.반응형 선택 기능 2.비디오 이미지와 링크만 달기 기능 3.플레이어 컨트롤 표시 기능 * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예)http://example.com/ckeditor/plugins/youtube - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = ..

위와 같이 셀렉트 박스에 이미지 아이콘 등을 넣을수 있습니다. 소스는 첨부 파일의 소스를 참고하시면 됩니다.

Richtext Editor 기반의 텍스트위주의 에디터 입니다. 첨부파일을 다운로드 받아서 압축을 해제하여 demo.html 파일을 웹브라우저로 열어보면 에디터 프로그램의 데모확인이 됩니다. 텍스트 위주의 입력이 가능하며, 이미지링크, 하이퍼링크, 텍스트정렬, 텍스트 하이라이트 정도의 심플한 기능만 가지고 있으며, 에디터를 구성하는 프로그램 자체가 위 그림 처럼 파일이 3개 뿐이어서 상당히 쉽게 웹페이지에 붙여넣을수 있게 되어 있네요. 출처는 https://www.sourcecodester.com/javascript/12538/simple-richtext-editor-based-pelljs.html 입니다.

inputmask는 INPUT 박스에 정보 입력시 지정된 형식으로만 입력이 가능하도록 도와줍니다. - 라이센스 MIT - 사용 방법 1. 사용할 페이지 상단에 jQuery 라이브버리와 inputmask 라이브러리 링크를 걸어줍니다. 2. input 박스를 추가하고 data-inputmask 속성을 사용하여 형식을 입력해 줍니다. 3. inputmask 플러그인을 호출합니다. 4. 세부 옵션은 아래 페이지를 통해 확인 가능합니다. https://www.jqueryscript.net/form/Easy-jQuery-Input-Mask-Plugin-inputmask.html - 결과물

- 라이센스 MIT - 사용 방법 1. 작업할 페이지 상단에 jquery 라이브러리, 부트스트랩 링크를 추가합니다. 2. jquery 라이브러리 하단에 Bootstrap Multiselect 라이브러리 링크를 추가합니다. 3. SELECT 박스를 추가합니다. 4. 플러그인을 호출합니다. 5. 세부 옵션이나 기본 설정을 변경합니다. - 결과물

http://countdownjs.org/demo.html 데모페이지에서 확인하는 방법을 먼저 안내드립니다. 위 countdown date 값에 구하고 싶은 날짜를 입력하면, 설정된 일정에 맞게 카운트 정보가 출력됩니다. 구하고자 하는 카운트는 "millennaia(천년단위)" 부터 "milliseconds (밀리세컨)" 단위까지 카운트 정보를 담을 수 있습니다. 구하고자 하는 object 단위를 실시간으로 확인할 수 있어 어떤 값이 담겨 출력중인지도 확인할 수 있습니다.

빈영역에 div를 위치시킬때 컨텐츠를 세로 및 중앙 정렬을 할 수 있는 팁입니다. 영역내에 빈 div 공간을 위치 시킴으로써 출력하기 위한 블럭의 vertical-align:값 을 조정하여 컨텐츠 내용을 상하로 조절할 수 있습니다. 그리고 background영역의 text-align을 조정하여 좌우 정렬을 조정할 수 있습니다. HTML 내용 CSS .background{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; text-align:center; } .background .inner_block{display:inline-block; *display:inline; *zoom:1; width:0; height:10..