Noto Sans(본고딕) 웹폰트

Noto Sans를 웹폰트로 만들어 배포되고 있는 것들을 테스트하고 이를 소개하는 내용입니다. 웹폰트 사용을 고려하시는 분들께 도움이 되길 바랍니다. Noto Sans 웹폰트 소개 Noto Sans 웹폰트는 Noto Sans CJK를 웹폰트로 사용하기 위해 한국어 버전인 Noto Sans CJK KR에서 자주 쓰이는 완성형 한글 2,350자(KS X 1001 표준) 만 추출하여 만들어지고 있다. 이 제작과정은 한글 웹 폰트 경량화해 사용하기에 ..
웹코딩/CSS 2015.08.14 11:41

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

이전에 살펴본 Who's among.us 와 마찬가지로 사이트나 블로그에 실시간으로 현재 접속자를 파악할 수 있게 도와주는 위젯입니다. RadarURL 소개 레이더 위젯은 무료로 제공되는 실시간 통계 위젯이다. 위젯 홈페이지에 접속해서 실시간 데모 및 간단 사용법을 살펴 볼 수 있다. HOME RadarURL RadarURL 사용 이유 웹사이트에 얼마나 많은 방문자가 접속해있는지 확인 ..
웹코딩/App,Plugin 2015.08.13 11:00

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

웹사이트나 블로그에 현재 접속자를 표기하고 싶을때가 있습니다. 구글 애널리틱스나 네이버 애널리틱스는 이를 비롯해 더 많은 기능을 보유하고 있지만 간단한 기능과 위젯표기를 원한다면 아래에서 설명하는 위젯을 추천합니다. who's amung.us 소개 웹 사이트 또는 블로그에 대한 무료 실시간 통계를 제공한다. 프로 버전은 유료이고 더 많은 기능을 지원한다. 블로그나 웹사이트 페이지에 위젯 코드를 추가하면 작동하기 시작한다. 위젯은 현재 웹사이..
웹코딩/App,Plugin 2015.08.12 11:00

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

이력, 연혁등 시간의 흐름을 표시하는 페이지가 필요할때 이를 좀 더 역동적으로 표현할 수 있는 도구들 중에 하나인 TimelineJS에 대해 소개합니다. 기존 버전에서 버전 3으로 업데이트 되었습니다. TimelineJS 3 소개 TimelineJS 3는 기존 버전에서 작성자와 개발자들에게 좀 더 유연함을 제공할 수 있도록 전체 재작성 되었다. 많은 부분을 비틀었는데, 유명한 도구이다보니 기존 사용자들을 위해 기존 버전을 지속적으로 제공하고 ..
웹코딩/App,Plugin 2015.08.11 12:30

Highlight.js - 코드 구문 강조

코딩을 주로 다루는 분들은 이를 표기해주는 몇몇 플러그인들이나 라이브러리들을 이미 사용하고 계시거나 온라인 하이라이팅 서비스를 이용하고 계실겁니다. Highlight.js 또한 그런 라이브러리 중에 하나로 설치 경험을 서술합니다. Highlight.js 소개 Highlight.js는 자바스크립트로 쓰여진 코드 구문 강조를 위한 라이브러리이다. 브라우저뿐만 아니라 서버에서도 잘 작동한다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 ..
웹코딩/App,Plugin 2015.08.07 11:00

matchHeight - 요소간의 높이 통일화

플로트 시킨 요소들이나 여러 항목을 가진 요소들의 높이를 일치시켜야 할 때가 있습니다. 서로 다른 높이를 가진 요소들을 일관된 높이로 통일시키는 플러그인이 있어 이를 소개합니다. matchHeight 소개 matchHeight는 선택한 모든 요소의 높이를 정확히 일치시킨다. 비슷한 종류의 플러그인들이 실수하는 예외적인 경우들을 처리했다. HOME matchHeight REP..
웹코딩/App,Plugin 2015.08.06 11:00

Holder - 클라이언트 측에서 이미지 예제 제공

이전에 다뤘던 이미지 예제(placehold) 제공 웹서비스를 클라이언트 측에서 제공할 수 있도록 도와주는 라이브러리입니다. 웹서비스에서 제공하는 것보다 많은 것들을 설정할 수 있기에 이에 대하여 알아봅니다. Holder 소개 Holder는 지정한 자리에 이미지를 대체하는 라이브러리로, Cnavas와 SVG를 사용하여 색상, 폰트, 창의 크기 변화에 대한 동작을 설정할 수 있다. 무엇보다 유동적으로 창 크기가 변경되는 환경을 지원하기 때문에 활..
웹코딩/App,Plugin 2015.08.05 11:00

이미지 예제(placehold) 제공 웹서비스

웹 개발시에 초안으로 작성하는 목업에 사용될 이미지나 예제로 사용되는 이미지를 제공하는 웹서비스들이 있습니다. 이에 관하여 간단히 살펴봅니다. PLACEHOLD.IT PLACEHOLD.IT은 디자인 혹은 코드 작성시에 사용될 이미지를 빠르고 간단하게 삽입하는 서비스이다. 제공되는 URL과 지정할 이미지의 너비 및 높이를 입력하는 것으로 모든 것이 완료된다. HOME PLACEHOLD.IT ..
웹코딩/App,Plugin 2015.08.04 11:00

poly-checked - :checked 의사 클래스 크로스브라우징

:checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다. poly-checked 소개 IE8과 그 이하에서 :checked 의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다. ..
웹개발론/크로스브라우징 2015.08.03 11:00

CSS3 이면가시성(backface-visibility) 속성

괜스레 우리말로 번역한다고 더 어려워진 단어 같군요. backface-visibility 속성을 이용하면 어색한 CSS 효과를 수정할 수 있습니다. backface-visibility 속성 소개 이 속성은 3D transform(변형)과 연관되어 있으며, 입체적인 모습의 뒷면의 가시성을 결정하는 속성이다. 즉, 변형이 가해져 요소의 뒷면이 보여지게 될때, 이 속성으로 숨기거나 보여지게 할 수 있다. 대부분 어색한 번쩍이는 효과로 인해 이를 숨기..
웹코딩/CSS 2015.07.29 11:00

CSS3 외형(Appearance) 속성

조금은 생소할 수도 있는 appearance 속성에 대하여 설명합니다. 이 속성은 크로스브라우징을 할때, 알아두면 곤란함을 줄일수 있습니다. appearance 속성 소개 이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다. 즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다. div { appearance: button; -moz-appearance: button; /..
웹코딩/CSS 2015.07.28 10:00

폼 필드(input type="file") 디자인 #4

폼 필드 디자인중 마지막을 장식할 파일 필드에 대한 내용입니다. 이 또한 브라우저 호환에 어려움을 겪곤 하는데, 관련해서 대안책들을 알아봅니다. 파일 필드 디자인 현황 파일 필드의 디자인은 브라우저마다 제 각각이며, 선택한 파일의 이름을 표시하는 부분과 업로드 버튼이 한데 묶여 있어 이를 각자 컨트롤할 수 있는 방법이 없다. 또한 스타일링을 위해 CSS를 적용해보면 어떤 것은 내부 박스에 영향을 주고 어떤것은 외부를 감싼 박스에만 영향을 미친다. ..
웹개발론/크로스브라우징 2015.07.27 16:00

폼필드(체크박스, 라디오) 디자인 #3

체크박스와 라디오버튼의 정렬과 디자인은 예전부터 골치를 아프게 하는 작업이였습니다. 관련하여 현재 애용되는 디자인 방법과 브라우저 호환성을 확보하는 방법에 대하여 알아봅니다. 체크박스와 라디오버튼 디자인 현황 모던 브라우저들과 IE11은 체크박스와 라디오버튼의 크기정도는 조정할 수 있다. 모바일 브라우저에서는 기본으로 제공되는 체크박스와 라디오버튼의 선택영역이 매우 작게 표시되어 선택의 불편함이 가중되기에 이 크기를 변경하는 것이 추천된다. we..
웹개발론/크로스브라우징 2015.07.27 11:00

폼 필드(select 박스) 디자인 #2

폼 필드들 중에 가장 디자인하기 까다로운 것이 select 박스입니다. 이에 대한 현실을 파악하고 대체방안들을 모색해 봅니다. Select 디자인의 현황 네이티브 select 박스의 디자인상의 한계로 인해 많은 플러그인들에서 select 박스의 구조를 div 와 ul 요소등으로 치환하여 사용한다. 물론 근래의 대부분의 플러그인이 그렇듯이 구버전의 IE에 대한 지원이 부족하다. 그나마 오래전에 개발된 jQuery Selectbox plugin 정도가..
웹개발론/크로스브라우징 2015.07.24 06:00

폼 필드(input type="text") 디자인 #1

계속해서 이어지는 폼관련 요소들에 대한 이야기입니다. 폼의 각 필드들을 디자인하면서 고민했던 점들과 대안책들을 순차적으로 다루어 봅니다. label 요소와 placeholder 속성 구분 label 요소는 for 속성과 연결된 필드들(input, select, textarea, checkbox, radio)를 가르키는 요소이다. 즉 입력필드들의 제목과 같은 역할을 하며, 때로는 이 요소를 이용해서 상호작용을 대신할 수 있다. placehold..
웹개발론/크로스브라우징 2015.07.21 10:00