WEBDIR

웹코딩 검색 결과

해당 글 125건

정규 표현식 도움말

정규표현식을 떠올리면 수학공식 외우던 학창시절 생각이 문득 떠오릅니다. 그만큼 외워도 금방 잊어버리고 몇번 이고 다시 되새기고 또 그렇게 잊어버리곤 합니다. 관련해서 도움이 될만한 정보들을 모았습니다. 정규표현식은 프로그래밍 언어마다 구현 방법이나 호환성 정도에 차이가 난다는 것에 유념해야 합니다. 정규표현식 되새김질 정규표현식을 처음 접하는 분들에겐 충분히 도움이 되지 못할 수도 있으나 한번 쯤 그 내용을 살펴본적이 있다면 아래의 내용이 기억을 되살리는데 큰 도움이 될 것이다. 초보자를 위한 정규 표현식 가이드 (자바스크립트 기준) from 민태 김 정규표현식 도식화 타인이 만든 정규표현식을 해석하거나 원리를 살펴볼때 그것은 마치 외계어를 마주친 난해한 느낌이 들곤 한다. 그런 정규표현식을 도식화해서 ..

웹코딩/Javascript 2015. 9. 23. 14:30

유튜브 동영상 썸네일 추출

유투브는 YouTube Data API를 통해 유투브 동영상에 대한 각종 정보와 쎔네일을 제공하고 있습니다. 문서에 삽입된 동영상의 썸네일이 필요한 경우가 있어 이 내용을 정리합니다. 동영상 ID값으로 썸네일 추출 유투브 동영상을 공유할때 제공되는 코드들은 대표적으로 아래와 같은 두가지 방식이 자주 애용된다. 공유 : https://youtu.be/nVCubhQ454c 소스코드 : 공유의 URL에서 nVCubhQ454c 부분과 소스코드의 의 src 속성값으로 주어진 nVCubhQ454c 가 바로 해당 동영상의 고유 ID값이다. 유투브는 해당 ID값을 기준으로 API를 통해 썸네일을 제공하게 되는데, API를 정식으로 사용하기위해서는 복잡한 절차를 따라야한다. 다만, 앞서 말했듯이 해당 ID값을 기준으로 ..

웹코딩/App,Plugin 2015. 9. 22. 14:31

유튜브 iframe 콘솔 에러 : cast_sender.js

유투브의 동영상을 iframe 형식으로 삽입할때 간혹 콘솔 오류 메세지를 경험하게 됩니다. 이에 대한 개발자의 입장과 대처방안을 살펴봅니다. 콘솔 오류 내용 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED 위의 오류 메세지는 오페라와 크롬 브라우저에서 발생하는 오류임을 확인하였다.(윈도우용 사파리 브라우저가 없어 미확인) 발생 원인 유투브 동영상을 삽입한 문서에서 크롬캐스트(Chromecas)에서 필요한 cast_sender.js 파일을 요청하면서 이 오류가 발생한다. 크롬의 확장기능들과 연관된 어떤 조건을 만족할때 무엇을 삽입한다 등과 같은 매카니즘이 부족한 탓인지 몰라도 관련 개발자들이 마땅한 ..

웹코딩/App,Plugin 2015. 9. 21. 11:00

jQuery Migrate Plugin - Warning Messages

jQuery Migrate Plugin - Warning Messages의 번역 과거의 jQuery 코드를 마이그레이션할 때 개발자가 호환성 문제를 파악하고 문제를 해결할 수 있도록 개발(비압축)버전을 사용하여 콘솔 경고 메세지를 출력하는 환경을 마련해야한다. 메세지는 각각의 고유한 메세지를 콘솔에 한번만 나타낸다. 대부분의 경우 이 메세지는 단순히 경고를 출력하며, jQuery Migrate를 사용하는 동안 제대로 작동하겠지만, 이 플러그인을 사용하지 않아도 되도록 코드를 변경하는 것을 추천한다. production(생산-압축) 버전의 경우는 이 경고를 생성하지 않을뿐, 여전히 호환성 문제들을 내포하고 있다. 이 플러그인에 의해 생성된 모든 경고는 식별하기 쉽게 `jQMIGRATE`의 단어로 시작하며,..

웹코딩/Javascript 2015. 9. 17. 11:00

jQuery 구버전과 최신버전의 혼용 - jQuery Migrate

jQuery는 1.9 버전 이전에 작성된 코드와 이후에 작성된 코드간의 호환성에 문제가 발생할 수 있습니다. 구형 jQuery로 작성된 페이지에 최신버전의 jQuery를 필요로하는 플러그인이나 기타 스크립트를 삽입하다보면 발생하는 문제인데 이를 해결하는 방법중에 하나로 jQuery Migrate를 사용할 수 있습니다. jQuery Migrate 소개 이 플러그인은 jQuery 1.9 버전에서 제거된 API들을 탐지하고 복원하는데 사용한다. 플러그인이 생성하는 메시지에 대한 자세한 내용을 참조하려면 경고페이지를 보라. jQuery 1.9로 변경하는 것에 대한 더 많은 정보를 원한다면 업그레이드 가이드와 블로그를 참조하라. jQuery Migrate 설치법 웹페이지에 jQuery를 삽입하고 그 뒤에 마이그레..

웹코딩/Javascript 2015. 9. 16. 11:00

트위터의 fave 애니메이션 - 즐겨찾기 버튼

평소 SNS을 하지 않다보니 눈치채지 못했는데 트위터의 fave 버튼의 애니메이션 효과가 특이하여 이를 검색하여 알아 보았습니다. 잘 정리된 곳을 발견하여 이를 번역하였습니다. steps timing function을 steps 타이밍 기능으로 번역하고 있으나 문맥상 steps 타이밍 함수가 더 맞을지도 모르겠습니다. 트위터 fave 소개 트위터는 fave(즐겨찾기로 알려진)의 디자인을 새로운 애니메이션 효과를 적용하여 업데이트하였다. CSS 트랜지션(transition: 전환) 효과보다는 이미지의 모음을 이용한 애니메이션 효과가 중점이다. CSS 애니메이션 steps 타이밍 기능을 이용하여 애니메이션을 어떻게 재생성하는지에 대하여 아래에서 알아보자. 움직임의 착시 삽화가 마치 살아 움직이는 Zoetro..

웹코딩/CSS 2015. 9. 3. 11:00

Normalize.css - CSS 초기화

브라우저마다 다르게 보이는 스타일들을 하나로 통일시키기 위해 자주 사용되는 것 중에 하나입니다. 계속적으로 보완되고 있는 프로젝트라 기준으로 잡고 스타일링을 하는데 도움이 될 것입니다. Normalize.css 소개 Normalize.css는 HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS 파일이다. 이것은 Boilerplate(보일러플레이트) 및 Bootstrap(부트스트랩) 등과 같은 크고 작은 프로젝트에서도 두루두루 사용되고 있다. HOME Normalize.css Project Site REPO Normalize.css source on GitHub Normalize.css 특징 브라우저(모바일 브라우저를 포함하여)를 광범위하게 지원하며, HTML5 요소, 타이포그래피,..

웹코딩/CSS 2015. 8. 24. 11:00

IE 조건부 주석 (Conditional Comment)

어딘가에 적어뒀다고 생각했는데 찾질 못해 새로 작성하는 글입니다. 아직도 크로스 브라우징을 위해 많이 사용되고 있습니다. 조건부 주석 소개 조건부 주석은 IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용된다. 조건부 주석 기본 문법 아래와 같이 기본형에 알맞은 조건을 기입하고 이를 만족할 경우, HTML 코드를 렌더링하게 된다. 구문 처음의 조건부 사용되는 기호는 : ! : 아니다(not) - 예) [if !ie] ie가 아니라면 lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면 lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같..

웹코딩/HTML 2015. 8. 21. 11:00

Gravatar - 사용자의 아바타와 프로필을 불러오기

웹 애플리케이션을 만들때, 굳이 DB에 회원의 아바타나 프로필을 저장할 필요가 없다면(대부분 개인정보를 수집하기를 원할테지만...), 미리 입력되어 있는 해당 인물의 정보를 불러들여 가입시 회원정보를 입력하는 수고를 덜게 할 수 있는 애플리케이션들이 있습니다. 외국 웹 애플리케이션에서는 이를 연동하여 제작되는 것들을 종종 확인할 수 있습니다. Gravatar 소개 그라바타(Gravatar - Globally Recognized Avatar)는 이메일주소를 기반으로 사용자의 프로필과 아바타를 등록해두고 필요에 따라 불러들여 매번 각각의 애플리케이션마다 이를 작성해야 하는 노고를 줄여주는 애플리케이션이다. 매일 80억건 이상의 아바타 이미지가 그라바타에 의해 서비스되고 있으며, WordPress, githu..

웹코딩/App,Plugin 2015. 8. 17. 11:00

Noto Sans(본고딕) 웹폰트

Noto Sans를 웹폰트로 만들어 배포되고 있는 것들을 테스트하고 이를 소개하는 내용입니다. 웹폰트 사용을 고려하시는 분들께 도움이 되길 바랍니다. Noto Sans 웹폰트 소개 Noto Sans 웹폰트는 Noto Sans CJK를 웹폰트로 사용하기 위해 한국어 버전인 Noto Sans CJK KR에서 자주 쓰이는 완성형 한글 2,350자(KS X 1001 표준) 만 추출하여 만들어지고 있다. 이 제작과정은 한글 웹 폰트 경량화해 사용하기에 자세히 설명되어 있으며, 이를 이용해 NotoSansKR-Hestia라는 웹폰트가 공유 되고 있다(이하 Noto Sans Korean 이라고 칭함). 또한, 본고딕(Noto Sans) 웹폰트 사용하기에서도 비슷한 웹폰트를 배포(이하 notokr 이라 칭함)하고 있으..

웹코딩/CSS 2015. 8. 14. 11:41

RadarURL - 실시간 접속자 방문통계 #2

이전에 살펴본 Who's among.us 와 마찬가지로 사이트나 블로그에 실시간으로 현재 접속자를 파악할 수 있게 도와주는 위젯입니다. RadarURL 소개 레이더 위젯은 무료로 제공되는 실시간 통계 위젯이다. 위젯 홈페이지에 접속해서 실시간 데모 및 간단 사용법을 살펴 볼 수 있다. HOME RadarURL RadarURL 사용 이유 웹사이트에 얼마나 많은 방문자가 접속해있는지 확인 가능하다. 방문자들이 어떤 경로로 접속했는지, 어떤 페이지를 보고 있는지 확인 가능하다. 웹사이트 분석을 향상시키기 위해 고급진 장기간의 통계를 제공한다. 부하량과 트래픽 동향을 이해한다. 그냥 재미로 설치해보는 건 어때? RadarURL 사용법 RadarURL에 접속해서 단계별로 진행하면 된다. 1. 위젯이 표시될 위치 ..

웹코딩/App,Plugin 2015. 8. 13. 11:00

Who's among.us - 실시간 접속자 방문통계

웹사이트나 블로그에 현재 접속자를 표기하고 싶을때가 있습니다. 구글 애널리틱스나 네이버 애널리틱스는 이를 비롯해 더 많은 기능을 보유하고 있지만 간단한 기능과 위젯표기를 원한다면 아래에서 설명하는 위젯을 추천합니다. who's amung.us 소개 웹 사이트 또는 블로그에 대한 무료 실시간 통계를 제공한다. 프로 버전은 유료이고 더 많은 기능을 지원한다. 블로그나 웹사이트 페이지에 위젯 코드를 추가하면 작동하기 시작한다. 위젯은 현재 웹사이트를 탐색하는 사람의 수(현재 접속자)를 표시한다. 또한 크롬이나 파이어폭스를 위한 플러그인을 제공한다. HOME Who's among.us 위젯 기능 위젯을 클릭하면 상세한 실시간 통계 페이지를 보여준다. 방문자가 사이트에 동시에 접속한 수량을 시간 별로 확인할 수 ..

웹코딩/App,Plugin 2015. 8. 12. 11:00

TimelineJS - 시간의 흐름을 네비게이션화

이력, 연혁등 시간의 흐름을 표시하는 페이지가 필요할때 이를 좀 더 역동적으로 표현할 수 있는 도구들 중에 하나인 TimelineJS에 대해 소개합니다. 기존 버전에서 버전 3으로 업데이트 되었습니다. TimelineJS 3 소개 TimelineJS 3는 기존 버전에서 작성자와 개발자들에게 좀 더 유연함을 제공할 수 있도록 전체 재작성 되었다. 많은 부분을 비틀었는데, 유명한 도구이다보니 기존 사용자들을 위해 기존 버전을 지속적으로 제공하고 있다. HOME TimelineJS DEMO 휘트니 휘스턴 연대기 TimelineJS 3 새로운 점 유연한 행(row) 레이아웃 : 더 이상 3/6 행의 제한이 없다. 캡슐화 : 페이지당 하나 이상의 타임라인이 가능하다. 매우 거대한 시간간격을 지원 : 공룡! 빅뱅!..

웹코딩/App,Plugin 2015. 8. 11. 12:30

Highlight.js - 코드 구문 강조

코딩을 주로 다루는 분들은 이를 표기해주는 몇몇 플러그인들이나 라이브러리들을 이미 사용하고 계시거나 온라인 하이라이팅 서비스를 이용하고 계실겁니다. Highlight.js 또한 그런 라이브러리 중에 하나로 설치 경험을 서술합니다. Highlight.js 소개 Highlight.js는 자바스크립트로 쓰여진 코드 구문 강조를 위한 라이브러리이다. 브라우저뿐만 아니라 서버에서도 잘 작동한다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 자동 언어 감지 기능을 가지고 있다. HOME highlight.js REPO isagalaev/highlight.js DOC documentation 130개의 언어와 65가지의 스타일을 제공한다. Live Demo 자동으로 사용된 코드 구문을 찾아 알..

웹코딩/App,Plugin 2015. 8. 7. 11:00