안드로이드용 크롬39 theme-color 속성 지원

롤리팝(Lollipop) 버전의 안드로이드 크롬 39부터 지원하는 새로운 메타 태그 속성에 대하여 알아봅니다. theme-color 속성 크롬 툴바의 색상을 변경할 수 있는 속성으로 <head> 안쪽에 메타 태그를 이용해 설정한다. <meta name="theme-color" content="#333"> 웹 사이트가 좀 더 응용프로그램 및 앱처럼 보이는 효과를 부여하게 된다. 언젠가는 앱처럼 모든 부분을 재설정 할 수 ..
웹코딩/HTML 2015.10.23 11:00

Column(열)의 높이를 맞추는 방법

CSS 디자인의 경우 복수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다. CSS3를 이용하면 간단히 해결될 문제이지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 정리해 봅니다. 열의 높이를 자동으로 맞추는 속성들을 활용 CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있다. flex 속성 flex 속성을 이용하면 아주 손쉬운 작업이다. 대상 ..
웹코딩/CSS 2015.10.06 11:00

아이콘 폰트(IconFont)의 모든 것

웹폰트의 또 다른 진화형태인 아이콘 폰트에 대한 설명과 이를 제공하는 사이트에 대하여 알아보고 궁극적으로 원하는 아이콘만을 삽입하는 방법을 거론합니다. 아이콘 폰트의 등장 기존에는 특수한 글꼴이나 아이콘을 사용하기 위해서 이미지 형식으로 제작하여 웹문서에 삽입하곤 했다. 이는 HTTP 요청을 많이 발생시켜 서버에 부하를 주고 로딩 속도에 영향을 미쳤다. 이를 극복하기 위해 CSS 기법 중에 하나인 Image Sprite 방식을 사용하여 여러 이미..
웹코딩/CSS 2015.10.05 11:00

안드로이드 브라우저 테스트의 난해함

안드로이드 브라우저들의 파편화에 대한 이야기입니다. 원문은 THE ANDROID BROWSER입니다. 서문 데스크탑의 브라우저 테스트가 어렵다고 생각되는가? 안드로이드 기기의 브라우저를 테스트한다면 지옥을 경험하게 될지어다~ 모든 브라우저들은 다르게 작동하고 이는 다른 결과를 렌더링하게 된다. 안드로이드에는 많은 브라우저가 존재하며, 동일한 브라우저라도 많은 변경점이 있다. 웹뷰(WebView) 안드로이드는 웹킷(WebKit) 기반의 웹뷰도 ..
웹개발론/크로스브라우징 2015.10.02 11:00

가상머신(Virtual Machine)의 이해

가상머신에 대한 기초적인 개념을 잡고 넘어갑니다. 이후 다루게 되는 가상머신에 대한 이야기는 시스템 가상 머신중에 vmware, virtualbox에 대하여 알아보게 됩니다. 가상머신 정의 가상 머신(Virtual Machine, VM)은 컴퓨팅 환경을 소프트웨어로 구현한 것, 즉 컴퓨터를 에뮬레이션하는 소프트웨어다. 가상머신상에서 운영체제나 응용프로그램을 설치 및 실행할 수 있다. 가상 머신은 실제 컴퓨터와 어느 정도의 통신과 사용을 기반으로 ..
개발도구/가상머신 2015.09.30 12:00

티스토리 메타 태그 생성 유의점

티스토리 스킨 제작중에 메타 태그에 대한 의문점이 남아 이에 대한 조사를 해보았습니다. 스킨 제작에 관심있는 분들에게 참고가 되었으면 합니다. meta http-equiv="x-ua-compatible" IE 브라우저 사용자들을 위해 최신의 문서모드로 렌더링 되도록 아래와 같은 코드 사용을 하곤 한다. <meta http-equiv="x-ua-compatible" content="ie=edge"> 이는 X-UA-Compatibl..
티스토리/스킨가이드 2015.09.24 11:00

정규 표현식 도움말

정규표현식을 떠올리면 수학공식 외우던 학창시절 생각이 문득 떠오릅니다. 그만큼 외워도 금방 잊어버리고 몇번 이고 다시 되새기고 또 그렇게 잊어버리곤 합니다. 관련해서 도움이 될만한 정보들을 모았습니다. 정규표현식은 프로그래밍 언어마다 구현 방법이나 호환성 정도에 차이가 난다는 것에 유념해야 합니다. 정규표현식 되새김질 정규표현식을 처음 접하는 분들에겐 충분히 도움이 되지 못할 수도 있으나 한번 쯤 그 내용을 살펴본적이 있다면 아래의 내용이 ..
웹코딩/Javascript 2015.09.23 14:30

유튜브 동영상 썸네일 추출

유투브는 YouTube Data API를 통해 유투브 동영상에 대한 각종 정보와 쎔네일을 제공하고 있습니다. 문서에 삽입된 동영상의 썸네일이 필요한 경우가 있어 이 내용을 정리합니다. 동영상 ID값으로 썸네일 추출 유투브 동영상을 공유할때 제공되는 코드들은 대표적으로 아래와 같은 두가지 방식이 자주 애용된다. 공유 : https://youtu.be/nVCubhQ454c 소스코드 : <iframe width="640" height="36..
웹코딩/App,Plugin 2015.09.22 14:31

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

유투브의 동영상을 iframe 형식으로 삽입할때 간혹 콘솔 오류 메세지를 경험하게 됩니다. 이에 대한 개발자의 입장과 대처방안을 살펴봅니다. 콘솔 오류 내용 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED 위의 오류 메세지는 오페라와 크롬 브라우저에서 발생하는 오류임을 확인하였다.(윈도우용 사파리 브라우저가 없어 미확인) 발생 원인 유..
웹코딩/App,Plugin 2015.09.21 11:00

jQuery Migrate Plugin - Warning Messages

jQuery Migrate Plugin - Warning Messages의 번역 과거의 jQuery 코드를 마이그레이션할 때 개발자가 호환성 문제를 파악하고 문제를 해결할 수 있도록 개발(비압축)버전을 사용하여 콘솔 경고 메세지를 출력하는 환경을 마련해야한다. 메세지는 각각의 고유한 메세지를 콘솔에 한번만 나타낸다. 대부분의 경우 이 메세지는 단순히 경고를 출력하며, jQuery Migrate를 사용하는 동안 제대로 작동하겠지만, 이 플러그인을..
웹코딩/Javascript 2015.09.17 11:00

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

jQuery는 1.9 버전 이전에 작성된 코드와 이후에 작성된 코드간의 호환성에 문제가 발생할 수 있습니다. 구형 jQuery로 작성된 페이지에 최신버전의 jQuery를 필요로하는 플러그인이나 기타 스크립트를 삽입하다보면 발생하는 문제인데 이를 해결하는 방법중에 하나로 jQuery Migrate를 사용할 수 있습니다. jQuery Migrate 소개 이 플러그인은 jQuery 1.9 버전에서 제거된 API들을 탐지하고 복원하는데 사용한다. 플러그인..
웹코딩/Javascript 2015.09.16 11:00

Loco Translate - 워드프레스 번역 플러그인

워드프레스 번역 플러그인을 찾다보니 CodeStyling Localization 이라는 플러그인을 많이들 추천하고 있었습니다. 문제는 현재의 시점에서는 해당 플러그인이 워드프레스에서 검색이 되질 않더군요. 그래서 다른 대안책으로 Loco Translate가 애용되기에 이를 소개합니다. Loco Translate 소개 Loco Translate 플러그인은 워드프레스 플러그인들과 테마들을 브라우저에서 직접 PO 파일을 수정하여 번역할 수 있게 해준다...
워드프레스/WP 플러그인 2015.09.15 11:00

워드프레스 Poedit를 이용한 번역

워드프레스의 언어 파일을 수정하기 위해서 필요한 번역 프로그램중에 하나인 Poedit에 대하여 알아봅니다. Poedit 소개 Poedit은 애플리케이션이나 사이트(gettext 를 사용하는)를 번역하는 편집기이다. 산만하지 않은 접근 방식 덕분에 빠르고 쉽게 변환을 도와준다. HOME Poedit 특징 Gettext를 사용하는 모든 소프트웨어 또는 웹사이트에 대한 번역을 작성할 수 있다...
워드프레스/WP 팁&테크 2015.09.14 11:00

워드프레스 번역 이해

워드프레스에 관심을 가져본 사람이라면 애매한 한글 번역과 한글화가 안된 플러그인들로 인해 고민이 생길때가 있습니다. 관련 자료들을 검색해보고 알게된 사항들을 정리해 봅니다. 워드프레스의 번역 시스템 이해 워드프레스는 언어파일을 이용해 다국어를 지원하는 시스템을 갖추고 있다. 이는 기본적인 워드프레스 언어파일과 플러그인 언어파일로 나눌 수 있으며, 해당 언어파일들을 번역하여 교체하면 원하는 문구로 수정이 가능하다. 워드프레스의 번역은 개인의 기여..
워드프레스/WP 팁&테크 2015.09.11 11:00