안녕하세요, 용테크의 용사장 입니다. 요즘 세상이 좋아져서 무료로 제공되는 좋은 라이브러리들이 넘처납니다! 특히 예전 같았으면 자바스크립트로 만들기가 참 어려웠을 차트, 그래프들도 아주 쉽게 만들 수 있는데요! 오늘은 바로 차트와 그래프들을 손쉽게 만들 수 있는 구글차트를 알아볼까 합니다! 위에 것을 그려볼까합니다. 어때요? 어렵다 생각드시나요? 생각보다 아주 간단하고 단순합니다. 소스코드를 한번 쭉 훑어봅시다. 여기서 느낌이 빡 오시는분들은 똑똑이합니다. 하지만! 저를 포함해서 대부분이 느낌이 안오실테니 구분해서 봐보겠습니다. ● 구조를 파악하자! 보시면 알겠지만 크게 2가지 구조로 나뉩니다. 1. 라이브러리 Load 2. 함수정의(차트생성) - 데이터 Setting - 옵션 Setting - 차트 그..
안녕하세요. 용테크의 용사장 입니다. 예전에 만들어진 시스템들은 그때 그 당시의 IE버전의 호환성에 맞게 만들어진 경우가 대부분입니다. 따라서 요즘 IE버전에는 이상현상을 일으키기 마련인데요! 이에 따라 [호환성보기] 라는 기능이 있으나, HTML의 메타데이터 값을 통해서 강제 지정이 가능하는 사실 알고 계셨나요? 자 알아봅시다! 일단 현상은 이래요. IE 5를 사용하던 당시에 만들어진 시스템의 달력인데요 다 망가져있지요? 해당 페이지의 소스를 열어서 HTML HEAD에 아래와 같은 메타데이터를 넣어줍니다. IE의 버전을 5로 맞추라는 문구입니다. 그리고 달력 페이지를 열어보면? 잘 나오는 것을 확인하실 수 있습니다! [F12]를 눌러 개발자도구에서 어찌되어있는지 볼까요? 위에 소스에서 지정해준대로 X-..
안녕하세요, 용테크의 용사장 입니다. 웹 페이지에 PDF를 보여 줄 경우가 가끔씩 있습니다! 예를들면 지침 같은거 보여줄 때 가끔 그러더라구요? 얼마 전에 이것과 관련되서 친구한테도 질문을 받았었는데요! iframe을 이용하면 엄청 쉽습니다! iframe의 src에 pdf파일을 넣어주면 되는 것입니다! 소스로 보면 이런거겟지요? 이렇게 넣고 파일을 열어보면? 쨘! PDF파일이 웹페이지에서 열리고 심지어 위에 표시된 저장/인쇄/크게/작게 버튼도 다 눌립니다! (물론 어도비리더에 기능이며 윈도우설정에 pdf는 어도비로 열리므로 이렇게 되는 것입니다.) 어때요? 쉽지요?! 단, iframe을 사용하실 때는 아래 포스트 참고하셔서 사용하세요! > [JS] Frame, iFrame 브라우저별 호환성 엄청 간단하지..
안녕하세요, 용테크의 용사장 입니다. 페이지 안에 페이지를 넣을 일이 간혹 있는데요! 물론 요즘엔 제이쿼리와 같은 다양한 기술들이 나와서 비교적 쓸일이 적지만 프레임과 아이프레임을 통해 사용하게 됩니다! 요즘은 웹접근성이다 웹표준이다 뭐다 말이 하도 많아서 지킬 것도 많고 챙길 것도 많은데 그 중 하나가 크로스브라우징, 브라우저간 호환성 입니다! "아, 저희 홈페이지는 크롬에서는 안돌아갑니다. IE에서만 사용해주세요." 말하면서도 민망한 이런경우.. 하.. 이런 경우가 생기지 않기 위해서 적어도 프레임과 아이프레임을 쓸 때에는 아래 표를 참조하시길 바랍니다. (변수 앞에는 #을 붙혀놓았습니다.) 쉽고 간단하게 설명해볼까요? window.frames["#(아이)프레임이름"].location.href = "..
안녕하세요, 용테크의 용사장 입니다. 이번엔 HTML 태그를 없애는 자바스크립트를 포스팅 해보려 합니다! 간혹 DB에 HTML을 다 넣어놓는 경우가 있습니다. DB 불러와서 innerHTML을 입히면 바로 페이지가 만들어지므로 어찌보면 편하니까요? 하지만! 이걸 마이그레이션 할 때 또는 여러 경우에서 불편함이 있습니다! 위에는 한 가지 예일 뿐이고 여러 방면에서 HTML태그를 없앨 필요성들이 있지요. 그럴때를 위해! 이런식으로 쓰여 있다고 가정해볼까요? 이것을 자바스크립트의 replace함수와 정규식을 활용해서! text = text.replace(/]*)?(\s)*(\/)?>/ig, ""); 이렇게 하면 HTML 태그가 완전히 사라졌습니다! 하지만, 의 띄워쓰기도 사라졌습니다. 걱정말아요 그대. tex..
안녕하세요. 용테크의 용사장 입니다. 이번 포스팅은 요즘시대의 웹 개발자라면 필수로 알아야하는! 제이쿼리에 대해 간단히 알아보고 사용해보려고 합니다! 자, 시작할까요? ● 제이쿼리란? 제이쿼리는 쉽게말해서 자바스크립트를 쉽게 사용할 수 있도록 도와주는 친구, 자바스크립트 라이브러리, 자바스크립트 컴포넌트, 유용한 자바스크립트를 모아놓은 집합체 정도로 보시면 되겠습니다. 얼마나 간단하고 좋은지 객체를 불러와서 안보이게 하는 로직으로 예를 들어보겠습니다. 순수 자바스크립트만을 사용한다면 이렇게 하셔야겟지요? 근데 제이쿼리를 사용한다면 이렇게 간단해집니다. 와우, 언빌리버블! 이게 제이쿼리의 로고인데요. " writh less, do more. " 조금써서 많이 써먹는다. 딱 맞는 표현이지요? 이 친구가 생김..
- Total
- Today
- Yesterday