본문 바로가기
반응형

IT/Web19

art1 [JS] 여러개의 타이머/스톱워치 만들기 (setInterval 활용) JavaScript에서 스톱워치, 남은 시간 등의 표시가 필요한 경우 하나만 만드는 건 간단한데 여러 개 만들려고 하니 시간이 똑같이 가거나, 하나만 적용되거나, 초가 엄청 빠르게 올라가거나 하는 문제가 생기기 일수입니다. 각 object에 각각의 timer를 걸어줘야되는데 생각보다 간단합니다. setTimeout도 가능하지만, setInterval를 활용해 여러 개의 타이머를 만들어보겠습니다. 이 예제에서는 표현하려는 시간을 초 단위 int로 가지고 있고 00:00:00를 만들어주는 예제이며, 다른 경우는 아래 코드에서 각 timer를 거는 법만 참고하시고 표시 방법은 상황에 따라 응용하시면 됩니다. 1. elements 선택 및 time 설정 아래처럼 다건의 타이머를 만들기 위해서 HTML에 시간표시.. 2022. 7. 14.
art1 [JS, jQuery] DOM 시작. document.Ready() / $(function(){}) / window.onload() / window::onload()에 대해 스크립트를 작성하다 보면 위에서부터 실행되다 보니 아직 DOM에 HTML이 호출되기 전이거나, 리소스가 호출되기 전에 스크립트가 실행되는 것을 방지하기 위해 ready()를 종종 보셨을 겁니다. $(document).ready()와 $(function(){}); 그리고 window.onload의 차이는 무엇인지 알아보겠습니다. [jQuery] $(document).ready()와 $(function(){}); 두 소스는 사실 상 같은 역할을 합니다. DOM(Document Object Model) 객체가 생성되는 시점에 실행됩니다. $를 봐서 아시겠지만 jQuery에서만 사용 가능합니다. $(document).ready(function(){}); 에서 앞부분이 생략된 것이며, .ready 이벤트는 사양될.. 2022. 2. 23.
art1 [Web] 웹브라우저에서 현재 내 쿠키 확인하기/쿠키 조회 방법 cookie를 적극 활용하는 것은 추천하지 않지만, 레거시에서 이미 사용하고 있는 경우가 많습니다. 레이어 팝업을 오늘 하루동안 보지 않기 등에서 주로 사용합니다. 내가 현재 보고 있는 브라우저에서 쿠키를 확인하는 방법에 대해 알아보겠습니다. 크롬 개발자도구에서 쿠키 확인 현재 작성 중이 페이지의 쿠키를 확인해보겠습니다. 아래 사진 한장으로 설명 가능합니다. 크롬 개발자도구(F12) 열기 > Application 탭 > Cookies의 현재 화면 선택 Name과 Value로 현재 보고 있는 브라우저의 쿠키 확인이 가능합니다. 쉽죠? 2022. 2. 23.
art1 [HTML] 모바일웹에서 전화걸기, 문자보내기, 메일보내기 모바일 웹을 개발하면서 특정 문자와 이미지를 누르면 바로 전화, 영상통화, 문자, 이메일로 연결되는 기능을 구현하기 위한 방법을 알아보겠습니다. 태그와 onclick 이벤트 두가지 방법으로 가능합니다. 기본적으로 방법은 동일하고, 앞에 링크방법과 콜론(:)을 붙여주면 됩니다. 전화 걸기 링크 tel 표시할 문자 혹은 태그 아이폰의 경우 a태그나 onclick없이도 전화번호 형식의 문자는 자동으로 전화로 링크 가능합니다. 이를 방지하기 위해 메타태그가 걸려있을 수 있습니다. 아래 태그가 있다면 자동링크는 되지 않습니다. 영상통화 걸기 링크 tel-av 표시할 문자 혹은 태그 문자 보내기 링크 sms 표시할 문자 혹은 태그 메일 보내기 링크 mailto 표시할 문자 혹은 태그 2021. 12. 4.
art1 [CSS] 폰트 사이즈 px, em, rem 차이 CSS에서 font-size를 줄 때 px, em, rem 등을 볼 수 있습니다. 그동안은 무지성으로 px 써왔는데 반응형 웹이 등장하면서 em과 rem을 써야만 하게 됐습니다. 각 폰트 사이즈 단위의 특성을 알아보도록 하겠습니다. PX (픽셀) px는 고정적인 단위입니다. 하지만 전세계의 1cm가 같듯이 모든 1px이 같다고는 할 수 없습니다. 픽셀은 모니터에 따라 고정적인 크기로 모니터가 바뀌지 않는 한 브라우저에서는 절대적인 고정값으로 한번 설정한 폰트 사이즈는 변하지 않게 되므로 반응형에 적합하지 않습니다. 따라서, px의 사용은 추천하지 않지만 반응형 웹이 아니라면 얼마든지 사용해도 좋습니다. EM em과 rem은 가변적인 단위입니다. em의 가장 큰 특성은 상위 요소의 폰트 사이즈를 상속받는 .. 2021. 11. 29.
art1 [JS] 유니코드 변환기(Unicode Converter). 자바스크립트 유니코드 변환 방법 유니코드로 쓰는 경우가 많지는 않은데, 일부 레거시에서 특정 내용을 유니코드로 떨궈주는 경우가 있습니다. SFTP로 땡겨와서 저장할라고 보니 이런 상황이면 당황스러울 수 있습니다. 자바스크립트에서 유니코드를 한글로 변환하는 방법을 알아보도록 하겠습니다. 유니코드 변환기 유니코드 or 문자열 입력 유니코드에서 문자로 변환 escape(unicode.replaceAll("\\", "%")); 문자에서 유니코드로 변환 unescape(unicode.replaceAll("\\", "%")); 자바에서 변환하기 [JAVA] 유니코드(Unicode) 한글 변환 유니코드로 쓰는 경우가 많지는 않은데, 일부 레거시에서 특정 내용을 유니코드로 떨궈주는 경우가 있습니다. SFTP로 당겨와서 저장하려고 보니 이런 상황이면 .. 2021. 11. 28.
art1 [JS] 자바스크립트 제곱과 루트 자바스크립트에서 Math 객체의 함수로 제곱과 루트를 계산하는 방법을 알아보자. 제곱 제곱은 Math.pow(값, 제곱수)로 작성합니다. 아래 예제를 참고하세요. Math.pow(2,2); -- 4 Math.pow(2,3); -- 8 루트 루트는 Math.sqrt(값)로 작성합니다. 아래 예제를 참고하세요. Math.sqrt(값); Math.sqrt(4); -- 2 Math.sqrt(25); -- 5 쓸일이 많지는 않아 까먹게된다. 2021. 11. 23.
art1 [Web] jQuery ajax 기본 형태 (HTTP) * 업무에서는 jQuery를 잘 안 쓰지만 앞으로 블로그에서는 종종 쓸 것 같은 HTTP 통신 $.ajax({ type: "POST", // GET, POST, PATCH, PUT, DELETE 등 url: "전송URL", // www, .do 등 dataType: "json", // json, xml 등 data : { data1: jsondata , data2: xmldata }, success: function(result){ if ("OK" == jQuery(result).find("STATUS").text()){ $("#result").text("성공"); }else{ $("#result").text("실패"); } }, error: function(result){ $("#result").tex.. 2021. 11. 19.
art1 [JS] 자바스크립트 소수점 반올림 최적의 사용방법 round(num+"e+2") JavaScript에서는 올림 ceil(), 버림 floor(), 반올림 toFixed(), toPrecision(), round() 등 다양한 방법으로 올림, 버림, 반올림을 제공합니다. 이글에서는 소수점에서 반올림하는 방법에 대해 자세히 알아보겠습니다. 오류가 있는 계산식과 가장 추천하는 방법을 말씀드리겠습니다. * 스크립트 에디터가 없으신 분들은 온라인 에디터 codepen에서 테스트 해보시길 바랍니다. [Tool] 웹 에디터 (코드펜) / 스크립트 에디터 * js, css, html 등 * javascript 공부 준비, 코드펜, 변수, 상수, VAR, LET, CONST 1. 에디터 준비 - 코드펜 * 이미 환경이 갖춰진 분은 1번 패스하셔도 됨. * 크롬 개발자도구에서도 가능. 1) 코드펜 접.. 2021. 11. 10.
art1 [웹스퀘어5] 디자인 탭 깨질 때 CSS 적용 방법 웹스퀘어5를 처음 세팅할 때 Design 탭에서 깨져보이는 경우가 있습니다. 서버를 기동해서 보면 정상적으로 CSS가 먹혀서 나오는데, 로컬 환경에서는 깨지는 현상이다. 이에 대한 조치법을 찾기 너무 어려워서 직접 작성해두려한다. 아래 내용을 순서대로 적용해보면 됩니다. 그래도 해결이 안 되면 웹스퀘어 제작사인 인스웨이브의 Support 창구인 W-tech에 문의하도록 합니다. 우선 이 증상은 서버에서는 css 경로를 잘 찾아가는 반면 로컬에서 css 경로를 못 찾아서 발생합니다. 1. Context Root 설정 * Project Explorer의 Project 우클릭 > Properties > Websquare > Context Root * 위 창이 뜨면 Context Root 를 / 로 설정해줍니다.. 2021. 11. 9.
art1 [ES6] 자바스크립트 ES6 - 4. 정규표현식/정규식 (기초 및 예제) * 실무를 하다 보면 정규식을 마주하는 경우가 많다. 가독성을 포기하고, 짧은 코드와 간결하게 규칙을 정의해놓고 재사용이 용이하기 때문이다. * 해당 포스팅에서는 정규표현식이 어려운 분들을 위해 아주 쉽게 자주쓰는 표현식을 설명한다. 정규표현식/정규식이란? (Regular Expressions) * 주로 문자열의 검색과 치환을 위해 패턴을 만들고 사용한다. * 자바스크립트 뿐만 아니라 닷넷, 자바, 파이썬, C 등 대부분의 언어에서 표준 라이브러리로 제공한다. 정규식의 매개변수 구성 1. 패턴(pattern) : 필수 실행하고자하는 정규식의 표현이 들어가는 부분 2. 플래그(flags) : 선택 정규식 실행에 필요한 옵션으로 없어도 된다. 정규식의 선언 * 정규식은 /패턴/플래그 또는 new RegExp.. 2021. 10. 25.
art1 RGB 색상표 * 생각보다 자주 검색하게 되는 RGB 색상표 2021. 9. 17.

티스토리툴바