본문 바로가기

프로그래밍/HTML

갤러리 퍼블리싱한 html 자료입니다. 2018. 12. 7. 갤러리 퍼블리싱한 html 자료입니다. DOCTYPE html> Document @media only screen and (max-width: 480px){ #templateColumns{ width:100% !important; } .templateColumnContainer{ display:block !important; width:100% !important; } .columnImage{ height:auto !important; max-width:480px !important; width:100% !important; } .leftColumnContent{ font-size:16px !important; line-height:125% !important; } .rightColumnContent{ ..
NanumSquare 웹폰트 사용해보기 2018. 4. 20. nanumsquare.css /* * Nanum Square Web Fonts * Copyright (c) 2010, NAVER Corporation (http://www.nhncorp.com) */ @font-face { font-family: "NanumSquareLight"; src: url(/font/NanumSquareL.eot); src: url(/font/NanumSquareL.eot?#iefix) format('embedded-opentype'), url(/font/NanumSquareL.woff) format('woff'), url(/font/NanumSquareL.ttf) format('truetype');} @font-face { font-family: "NanumSquare"; sr..
폰트 사이즈 font sizes 에서 points, pixels, ems, percent 비교 2018. 4. 20. 웹개발하면서 폰트 사이즈에 대한 pt, px, em percent 등 사용하는데 정확하게 비교하는 게 없어서 봤더니 해당 아래 사이트에서 리스트로 잘 보여주네요.https://websemantics.uk/articles/font-size-conversion/ PointPixelEmPercentKeywordDefault sans-serif6pt8px0.5em50%Sample7pt9px0.55em55%Sample7.5pt10px0.625em62.5%x-smallSample8pt11px0.7em70%Sample9pt12px0.75em75%Sample10pt13px0.8em80%smallSample10.5pt14px0.875em87.5%Sample11pt15px0.95em95%Sample12pt16px1em10..
비동기 화면에서 뒤로가기 back 버튼 마우스를 클릭시 window.history.pushState 사용하기 2018. 4. 9. 보통 비동기 화면을 구현 하는 중에 , 뒤로가기 back 버튼 마우스를 클릭할 때가 있습니다.비동기 화면은 동적으로 랜더링 하므로 브라우저에서 url 주소값을 저장하지 않아 제일 첫페이지로 이동하게 됩니다.따라서 브라우저에 url 주소값을 직접 스크립트로 알려주는 방법이 있는데요.window.history.pushState() 함수를 사용해서 브라우저 히스토리를 조작할 수 있습니다. 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/API/History_API 사이트를 참고하세요. Navigation Without Refresh Current Page: / Page 1 Page 2 Page 3 // this should be the Ajax Method.// and..
엑셀을 html 의 table 테이블 html 태그 제공 (https://codebeautify.org) 2017. 11. 6. 엑셀에 너무 많은 데이터가 있는데, 이걸 퍼블리싱 하기엔 너무 노가다? 인지라,,, 이를 한번에 처리해 주는 센스 있는 사이트가 있더군요.https://codebeautify.org/ 여기 사이트인데, 정말 많은 기능을 제공해주는 온라인 사이트 이더군요.그 중에 excel to html 을 선택합니다. 나중에 즐겨사용한다면 즐겨찾기로 https://codebeautify.org/excel-to-html 하시면 됩니다.여기서 browser 를 선택하면 개인 pc 에 있는 excel 엑셀 파일을 선택하면 됩니다. 추가하면 show output 메뉴에서 html 태그를 자동 생성해 줍니다. 너무 멋지죠?
javascript 로 로딩바 만들어 보기 2017. 7. 7. javascript 로 로딩바 만들어 보기 DOCTYPE html> #myProgress { position: relative; width: 100%; height: 30px; background-color: #ddd; } #myBar { position: absolute; width: 1%; height: 100%; background-color: #4CAF50; } 프로그래스바 은주맴 누르삼 function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 1000); function frame() { if (width >= 100) { clearInterval(id); } el..
html 5 환경에서 파일 사이즈 file size 알아내기 2017. 7. 4. html 5 환경에서 파일 사이즈 file size 알아내기ie 는 10 이상부터 지원이 됩니다. https://developer.mozilla.org/ko/docs/Using_files_from_web_applications DOCTYPE html> File(s) size function updateSize() { var nBytes = 0, oFiles = document.getElementById("uploadInput").files, nFiles = oFiles.length; for (var nFileId = 0; nFileId 1; nApprox /= 1024, nMultiple++) { sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] +..
구글 캘린더(구글 달력) 에 일정 추가 하는 방법 2017. 6. 7. 구글 캘린더(구글 달력) 에 일정 추가 하는 방법 1) 템플릿 형태 : 한글은 전부 url encoding 을 하셔서 전송하셔야 합니다. => 설명글의 엔터값은 "%0A" 로 변환하셔서 전송하면 됩니다. 구글캘린더에 일정 추가하기 2) 실전 방법 구글캘린더에 일정 추가하기