소금인형 - SW개발자?

태그가 완전히 로드될때, javascript 실행하기 하는 이벤트 요소(Attribute)입니다. HTML Audio/Video DOM loadeddata Event 해당 프레임에서 비디오/오디오가 로딩이 완료되면 실행되 었는지 확인 해주는 이벤트입니다. onloadeddata 이벤트를 이용해서, 자동 플레이도 만들 수 있습니다. (하단 '자동 플레이 예제'를 참조하세요) Syntax In HTML: In JavaScript: Using addEventListener(): 예제 자동 플레이 예제 Your browser does not support HTML5 video. 자동 플레이 경우, muted="muted" 속성이 있어야 자동 재생이 됩니다. 음소거(muted)로 되어 있지 않은 비디오는 자동 재..

display Property (속성) display 속성은 요소를 어떻게 보여줄지를 결정하는 속성입니다. 4가지 속성 값을 많이 사용합니다. HTML element 요소(태그)마다 기본값이 다릅니다. none : 보이지 않음 block : 블록박스 inline : 인라인 박스 inline-block : block과 inline의 중간 형태 그 외도 다양한 속성 값들이 있습니다. contents flex : 요소들을 블록 박스 단위로 쌓아서 정렬한다. (한쪽방향으로만 정렬) grid : 요소들을 블록박스 단위로 격자 모양으로 정렬한다. (좌우, 상하 2차원 정렬) inlin-block inline-flex inline-grid inlin-table run-in table : 요소를 처럼 처리합니다. ta..

Bootstrap에서 마우스를 올릴때, 설명을 나타내는 Tooltip을 이쁘게 뜨게 하는 방법입니다. 방법은 간단합니다. 툴팁 관련 html 소스와 javascript를 추가해 주면됩니다. Hover over me 다음과 같이 입력하면, 마우스를 올리때, 툴팁이 뜹니다. 사용되는 js와 css파일들 [ Tooptip 예제 ] Tooltip Hover over me 참고: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Unordered List 이나, Ordered List 의 하위에 속한 List 에 기호나, 숫자를 표시 되지 않게 하는 CSS 스타일 list-style:none 속성 "list-style: none" CSS를 추가하면, unordered list () or ordered list ()의 bullet or number제거됨 unordered (bulleted) list 예제 최상단의 에 "list-style:none" CSS를 추가해 주면서, Coffee, Tea, Milk에 표시가 제거됩니다. Coffee Tea Black tea Green tea China Africa Milk HTML 결과물 >> 여러번 반복되면, 인라인 style코드를 CSS class로 선언해서 사용해도 편하겠죠. ... C..

프로그램을 개발하다보면, 사용자의 입력을 받는 곳에 커서를 처음 위치해준다는 것은 작은 배려이지만, 많은 부분 사용자에게 마우스 커서를 한번 찍지 않아도 되는 이득을 줄 수 있습니다. 의 autofocus 속성을 알기 전에는 javascript를 이용해서 커서를 이동시켰답니다. [ 옛날 javascript 소스를 이용한 Input박스에 커서 이동하기 ] ... 결론적으로 해당 방법은 믿을만 하지만, 별로 필요 없는 코딩 낭비(?) 였습니다. 해결 방법은 autofocue 속성을 이용하는게 편리하고 유용합니다. [ 쉬운 해결법 ] 페이지가 로딩되는 순간 해당 Input 박스로 커서가 이동됩니다. Browser Support Chrome IE firefox safari opera autofocus 5.0 1..

HTML를 통해서 웹의 UI화면과 내용을 넣다보면, 특수 문자를 입력하는 방법에 다양한 방법들이 있답니다. HTML 파일의 File type 포멧을 UTF-8을 이용해서 해당 문자로 입력하는 방법도 있고, 개인적으로 많이 사용하는 코드는 HTML ENTITY코드를 사용하는 방법입니다. 보통 Empty Space(공백)을 입력할때, 와 같은 HTML Entity를 사용하는데. 저는 형식으로 HTML CODE를 값을 자주 사용합니다. 화폐 단위 표시나, 1/4과 같은 문자 표시나 자주 사용되는 항목들의 코드값을 정리해둔 사이트가 있어서 남겨둡니다. ¼ 쿼터의 표시의 경우, ¼를 사용하면 이쁘게 표시가 됩니다. ⅆ ⅉ (dj문자값 ⅆ ⅉ) ♻ (리사이클♻) 다양한 문자 코드를 이용해서, 디자인 없이도 간단한 ..

jQuery Mobile을 이용해서 작업을 하다보면, Header의 바와 ui-content의 사이가 다른 곳보다 여백이 커서 보기가 싫을 때가 있습니다. class="ui-contenct"영역에 간단한 inline CSS 스타일 값을 줌으로 해결 할 수 있습니다. // padding-top: 0px으로 여백을 줄입니다. 해당 여백은 ui-content에 어떤 요소(Element)를 넣어주는 냐에 따라 다르게 나타나긴 합니다. 해당 부분에 대한 UI를 만드시다가 여백이 너무 크시다 싶으면 해당 css추가로 해결 하시길 바랍니다. 참고: 2018/06/02 - [Web/jQuery] - jQuery Mobile의 listview search data-filter 위치 Fixed jQuery Mobile의 ..

일반적으로 HTTP 통신의 접근은 권한 인증을 하지 않고, 시용하는 방법을 많이 사용하고 있습니다. 그러나, RFC 7235 (규약 내용)에 보면, HTTP TTP 인증은 서버는 클라이언트(웹브라우저 등)의 요청간에 401(Unauthorized) 응답으로, 최소한 한 번의 인증 시도(WWW-Authenticate)를 통해서, 응답 헤더(HTTP header)에 무인증(Unauthorized) 권한 부여 정보를 제공합니다. 클라이언트에서 서버로 HTTP 권한 인증 처리 과정에서, 서버에서는 Username과 Password를 요구할수 있게 처리가 가능하며, 이걸 Basic 인증라하며, 이 인증 정보가 맞는 사용자에게 정보를 보여주게 할 수 있습니다. 여기서, 해당 정보를 wget과 같은 유틸리티로 웹 페..

Bootstrap 3에서 가장 인기 있는 달력이라면, 단연 Eonasdan 라이브러리 달력을 최고로 손꼽습니다. 해당 Bootstrap 3 Date/Time Picker v4.17.47까지 나와 있습니다. (01/14/2020) 진행 중인 프로젝트에 Bootstrap 4를 사용하게 되었는데, 과거 Eonasdan Date Picker가 Bootstrap 4를 지원을 하지 않게 되어서, Bootstrap 4에 지원되는 Date Picker가 필요하게 되었답니다. Bootstrap 4에 완전하게 지원되는 Date Picker인 Tempus Dominus를 찾게 되었죠. Tempus Dominus은 Eonasdan 라이브러리의 업그레이드된 버전이죠. Tempus Dominus 라이브러리: https://tem..

Proxima Nova폰트는 2005년에 Mark Simonson에 의해 디자인한 매우 인기있는 서체입니다. 저도 개인적으로 매우 좋아하는 폰트이고요. 영문 폰트 웹에서 많이 사용되는 폰트입니다. Proxima Nova폰트는 이탤릭체, 세미 볼드체, 볼드체, 엑스트라 볼드 및 블랙 7가지 종류를 제공합니다. Adobe의 Creative Cloud플랜을 사용하면 다운로드가 가능합니다. https://fonts.adobe.com/fonts/proxima-nova?red=a Proxima Nova | Adobe Fonts Mark Simonson founded his studio specializing in lettering and typography in 2000. He had started out as a..

Web페이지에서도, Word의 페이지 나눔 처리가 가능합니다. 객체 태그에 style인라인 값으로 style="page-break-after: always;" 추가해주면, 다음 태그부터는 다음 페이지로 인쇄가 됩니다. (예제: CSS 인라인으로 추가) [ 웹페이지 화면 ] 상단 테이블 영역과 하단 테이블 영역이 화면에 보일 때는 붙어 보입니다. 그러나, 인쇄를 하면 다른 페이지로 인쇄가 됩니다. [ 프린트 인쇄 미리보기 ] page-break-after의 CSS를 이용해서, Word의 페이지 나눔 처리가 가능 해집니다. 또 다른 적용 방법은 인라인 방식이 아니라, CSS함수 선언하는 방식을 말한다. CSS @media print { footer { page-break-after: always; } } H..

리턴 코드 값에 301 Moved Permanently라는 메시지가 나옵니다. 페이지 로딩이 되면서, header에서 forward처리 될때, 나타나는 HTTP state코드 가끔 프로그램에서 로직을 잘못해서, 권한이 틀려서 페이지 이동을 Header에서 Redirect 처리하는 실수를 할 때가 있다. 그럴 때면, Header를 처리하는 부분의 로직을 디버깅하면 찾을 수 있다. MDN web docs 내용 HTTP 301 Moved Permanently 리다이렉트 상태 응답 코드는 요청한 리소스가 Location 헤더에 주어진 URL로 완전히 옮겨졌다는 것을 나타낸다. 브라우저는 이 페이지로 리다이렉트하고, 검색 엔진은 해당 리소스로 연결되는 링크를 갱신한다[검색엔진 최적화의 관점에서는 '원 콘텐츠가 새..

CSS를 사용하다보면, 윈도우 객체의 Transparent color(투명컬러)와 같이 부모의 색상을 받고 싶을때가 있습니다. CSS에서 "color: inherit;" 을 이용하면, 해당 객체의 부모의 색상을 사용하기에 투명한 느낌처럼 사용이 가능합니다. /* Make second-level headers green */ h2 { color: green; } /* ...but leave those in the sidebar alone so they use their parent's color */ #sidebar h2 { color: inherit; } 참고: (1) https://stackoverflow.com/questions/6722467/how-to-remove-the-default-link-c..

보통 웹에서 2개 이상의 (드롭다운 박스)을 사용해서, 다른 하나의 의 에 대해서 변경이 필요한 경우가 생깁니다. 해당 부분의 방법을 처리를 위해서 jQuery에서 다음과 같이 사용하면 됩니다. SYNTAX $('#아이디').html('New'); // 다름과 같이 사용하면, 새로운 값으로 replace됩니다. 여러개의 을 넣는 예제 O1 O1 $newoptions = "NewO1 NewO1"; $('select#needSelect').html($newoptions); 여기서 셀럭터를 아이디값만 사용해서 $('#needSelect').html($newoptions); 이렇게 해도 됩니다. 참고: Jquery Replace Select Options 또다른 방법은 (추천하는 방법은 아님) 참고: How t..

html5의 input의 타입별로 유용하게 쓰일 때가 많습니다. type="tel"과 같은 경우, 휴대폰에서 숫자 기보드만 입력이 가능하게 변경이 되어서 너무 유용하게 쓰이죠. HTML5의 type내용들 type="button" value="button" type="checkbox" type="color" type="date" type="datetime-local" type="email" type="file" type="hidden" type="image" type="month" type="number" type="password" type="radio" type="range" type="reset" type="search" type="submit" type="tel" type="text" type="t..

구글의 폰트 서비스 Google Fonts https://fonts.google.com/ 한글 구글 폰트 Google Fonts (subset=korean) https://fonts.google.com/?subset=korean 다양한 폰트를 지원합니다. 쉽게 가능하며, 사용도 방법 예제도 너무 잘 나와있습니다. 나눔 명조 사용법 구글의 웹폰트 중에 나눔 명조(Nanum Myeongjo)가 있습니다. 미리보기 화면과, 폰트 다운로드와 다양한 정보들이 있습니다. Google Fonts의 나눔 명조 Nanum Myeongjo: https://fonts.google.com/specimen/Nanum+Myeongjo 나눔 명조는 네이버사로 유명한 NHN사의 무료 폰트 입니다. 화면 표시, 인쇄 용으로도 사용이 ..

문듯 이런 제안이 들어왔답니다. Invoice에 있는 Customer 이름별로 파일을 분류할 수 있는 프로그램을 만들 수 있는지? 보통 PDF파일 내용이 TEXT형태로 되어 있는 문서의 경우, TEXT의 내용을 뽑아서 정리하는 경우는 있어도, 이런 고차원(?)인 요구를 생각해 보지 못했다. "이미지로 된 문자"를->"TEXT 문자인식"->"회사명 구분"->"파일별"로 분류 해당 내용은 말로써는 쉬운 일이지만, 컴퓨터로는 쉽지 않는 일입니다. 오래전부터, 책의 이미지 같은 경우, TEXT문자로 추출하는 프로그램이 있긴 했습니다.. 심지어 스캐너 프로그램에서 OCR에 대한 기능을 추가한 버전도 있었죠. 이미지로 된 문자를 TEXT글자로 변환하기 간단한 한장의 글자 이미지(TEXT가 쓰여진) 파일을 TEXT로..

우연히 Google Play에서 나온 이미지를 Chrome브라우저에서 이미지 저장이 필요해서 받으려고 했더니, WebP라는 포멧으로만 저장이 되더군요. 이 경우 이미지의 주소를 복사해서 "rw"를 제거하고 다시 엔터를 쳐서 이미지를 불러오면, 해당 이미지는 PNG로 저장이 가능합니다. (참고로 IE에서는 해당 이미지를 PNG로 저장이 가능합니다.) 예제) 인스타그램 대표 이미지 주소 https://lh3.googleusercontent.com/2sREY-8UpjmaLDCTztldQf6u2RGUtuyf6VT5iyX3z53JS4TdvfQlX-rNChXKgpBYMw=s180-rw 아래의 주소처럼 "-rw"를 제거하고, 엔터를 입력하면 PNG이미지로 저장이 가능해 집니다. https://lh3.googleuse..

예전 구글맵을 사용할 때는 Google Map Key만 받으면 사용할 수 있었습니다. 요즘은 Google Cloud Platform 서비스에서 Key를 받고, Google Maps Platform 서비스를 통해서 Map 서비스를 사용할 수 있습니다. Google Cloud Platform의 서비스 중에 웹용 구글맵(Maps JavaScript API) 사용이 많은 편입니다. 추가로, Google 서비스를 받으려는 계정에 결재수단(신용카드/은행계좌)을 추가해야 합니다. 결재수단 추가 유도를 위해서 $300/12 month의 크레디트를 줘서, 무료 체험을 할 수 있게 있답니다. 13개월이 지나면, 카드/은행계좌를 등록해서 지불하는 방식으로 처리됩니다. 요즘은 Account를 만들 때마다 결제 수단을 연결 항..

jQuery Mobile에서 태그를 사용해서 rows="2"등을 줬을때, 제대로 높이 (height)가 적용되지 않습니다. rows값의 높이 (height)를 적용하기 위해서는 setTime Javascript로 딜레이를 줘서, jQuery Mobile에서 가지고 있는 의 css 높이값을 수정해준다. HTML 예제 5 rows: 10 rows: 15 rows: Javascritp + jQuery setTimeout(function () { //$('.foo').addClass('bar'); $('.foo').css({ 'height': 'auto' }); }, 100); Demo 사이트: http://jsfiddle.net/Palestinian/XXEfV/ 출처: https://stackoverflow...

Web Design들의 작업한 색상들을 보면, 색상의 유행을 느낄 수 있게 된다. 색상의 정의(?)하는 Pantone Color라는 것을 알게 되었다. 팬톤컬러(Pantone Color)는 미국 Pantone사의 규정한 인쇄 및 소재별 잉크를 조색하여 제작한 컬러가이드칩을 말한다. (인쇄에 사용하는 컬러칩은 크게 코팅용(1015색)과 비코딩용(1013색)으로 나뉘며, 코딩용은 coated의 약자인 C를, 비코딩용은 uncoated의약자인 U를 색상 번호 뒤에 붙여 종이의 종류를 구별할 수 있도록 표기) (해당 설명 참고: 2018 어떤 트렌드 컬러의 옷을 입을까?) 우연히 2019년 팬톤컬러 선정 트렌드 컬러라는 말은, Pantone사에서 선정한 올해의 색이라고 것이죠. https://www.panton..

구글의 문서(docs)에서 작업한 내용을 웹에 쉽게 공유 할 수 가 있습니다. Embed방식의 iframe을 이용해서 파일을 쉽게 웹으로 볼 수 있는 방법이 있습니다. 공유를 원하는 파일을 선택 [파일] >[웹에 게시] ( File - Publish to the web..) 웹에 게시 할때, [ Link 형태일 경우 ] Entire Document: 특정 Sheet도 선택이 가능합니다. Web page / Tab-separated values(.csv) / (.tsv) / (.pdf) / (.xlsx) / (.ods)로 공유 가능합니다. Embed형식의 경우, Entire Document: 특정 Sheet만 할 수도 있습니다. iframe으로 되어 있어서 특정 웹문서에 넣어서 사용이 가능합니다. 참고: ..

Bootstrap 4에서 svg 아이콘을 만들수 있습니다. Bytesize Icons https://github.com/danklammer/bytesize-icons/blob/master/README.md svg 아이콘들은 백터 형태이기 때문에 사이즈가 변화되어도, 이미지 처럼 깨짐이 없습니다. 카메라 아이콘 SVG 태그 여기서 width="20" height="20"으로 주면, 사이즈가 줄게 됩니다. stroke-width="3"를 주면 더 두꺼워 집니다. [ 모서리 부분을 값을 선택 ] Style stroke-linejoin stroke-linecap Round round round Bevel bevel butt Miter miter butt [ 두께를 다르게 하는 형태 ] Weight stroke-..

jQuery Mobile Icons (1.4버전) - SVG icons (45개) Text와 이미지를 함께 사용한 버튼이며, SVG icons이기에 사이즈가 늘어나도 깨짐이 없다. 사용법 1) data-icon="arrow-r" 사용법 2) class=" ... ui-icon-클래스" class="... ui-icon-arrow-r" action alert arrow-d arrow-d-l arrow-d-r arrow-l arrow-r arrow-u arrow-u-l arrow-u-r audio back bars bullets calendar camera carat-d carat-l carat-r carat-u check clock cloud comment delete edit eye forbidden f..

Bootstrap 4을 사용을 시도해 보고 있는데, Utilites > Dispaly 를 이용해서, responsive display의 hide 처리를 할 수 있는 propety가 있어서, 태그에 ,에 .d-lg-block을 사용해 보려고 했답니다. [ .d-none .d-lg-block 을 사용 했을때, 테이블 깨지는 현상 발생 ] 테이블에 사용할때면, 이상하게 컬럼이 밀리고 깨는지는 형상이 났습니다. (원인은, .d-lg-block을 줬던 부분의 객체가 block형태로 변화되어서, 라인전체를 차지하려고 하기에 발생하는 현상입니다.) 알고 보니. d-lg-block은 block/inline 타입인 , 과 같은 요소에서만 사용을 하였더군요. (참고: https://getbootstrap.com/docs/..

웹메일 오픈소스 웹메일 https://roundcube.net/ ipage.com 호스트 회사에서 사용하는 버전정보Roundcube Webmail 1.3.3 Copyright © 2005-2017, The Roundcube Dev Team This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Some exceptions for skin..

요즘 SEO를 위해서, 네이버 웹마스터에 등록 작업중인데, Sitemap 등록이 필요하다.아쉽게도, Tistory 에는 Sitemap링크 자동 생성이 없어서, Sitemap을 만들어 주는 사이트를 이용하면 됩니다. Sitemap은 XML로 만들어 주는데, 해당 파일을 포스트하면 된다.[Sitemap 등록 순서](1) sitemap xml 파일 만들기(2) sitemap파일 blog에 포스팅하기(3) 네이버 웹마스터도구에 사이틈맵 체출하기 (1) sitemap xml 파일 만들기온라인 XML Sitemap Generator 사이트http://www.web-site-map.com/주소 입력후, 옵션 선택 - XML 파일 다운로드 페이지 이동 링크 - sitemap.xml를 다운로드 받으시면 됩니다. (bro..

요즘 Google Adsence를 진행하면서, SEO(검색엔진최적화)에 대한 부분에 중요성을 다시금 알게 되는 것 같다.네이버의 경우, "웹마스터도구"를 통해서 SEO에 도움을 주는 경우가 있다.아래는 "웹마스터도구 도움말 및 가이드" > "웹 표준 최적화 기본 가이드" 내용이다. 웹 표준 최적화 기본 가이드1. 웹 표준 최적화의 목적여러분의 사이트를 네이버 검색에 반영하기 위한 10가지 지침본문링크 이동2. 웹 사이트를 만들 때같은 내용이라면 되도록이면 단일 호스트 명, 단일 URL을 사용하도록 설정해 주세요.본문링크 이동호스트 명 표준을 따라 주세요. 호스트 명에 밑줄글자(underscore) 사용하지 말아주세요.본문링크 이동robots.txt를 사용하여 검색로봇이 방문할 수 있도록 허용해주세요.본문..

jQuery Mobile에서 Layout Grids (columns) 한 줄에 버튼 여러개 놓기. (최대는 5개 까지 입니다.)two-column (using the ui-grid-a class)three-column (using the ui-grid-b class)four-column (using the ui-grid-c class)five-column (using the ui-grid-d class)화면 구성은 다음과 같다.코드 구성은 아래와 같다. A B {..또는 반복처리..} 참고: http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html 3개의 컬럼 구조 예제 화면.

jQuery 에서 페이지 로딩시 처리하는 함수로 ready 와 on을 많이들 사용하는데, 페이지 로딩에 대한 처리를 한번 알아보려고한다. (참고로, pageinit는 이제 사용하지 않는다고 합니다.) The pageinit event was deprecated in jQuery version 1.4.0. Use the pagecreate event instead. [참고 (jQuery pageinit Event)] http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/jquerymobile/event_pageinit.asp.html jQuery Mobile 1.4 Update: My original article was intended for old way of..