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.08.14 11:41

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

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

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

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

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

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

matchHeight - 요소간의 높이 통일화

플로트 시킨 요소들이나 여러 항목을 가진 요소들의 높이를 일치시켜야 할 때가 있습니다. 서로 다른 높이를 가진 요소들을 일관된 높이로 통일시키는 플러그인이 있어 이를 소개합니다. matchHeight 소개 matchHeight는 선택한 모든 요소의 높이를 정확히 일치시킨다. 비슷한 종류의 플러그인들이 실수하는 예외적인 경우들을 처리했다. HOME matchHeight REPO matchHeight Repository DEMO matchHeight 데모 matchHeight 특징 자동적으로 그룹의 요소들에 대한 높이를 일치시킨다. 최대 높이를 사용하거나 특정 대상 요소를 정의한다. 페이지의 어디든지, DOM 구조안의 어디든지 제약이 없다. 반응형(창 크기 조정이 될때 업데이트) 행(row) 인식(플로팅요소..
웹코딩/App,Plugin 2015.08.06 11:00

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

이전에 다뤘던 이미지 예제(placehold) 제공 웹서비스를 클라이언트 측에서 제공할 수 있도록 도와주는 라이브러리입니다. 웹서비스에서 제공하는 것보다 많은 것들을 설정할 수 있기에 이에 대하여 알아봅니다. Holder 소개 Holder는 지정한 자리에 이미지를 대체하는 라이브러리로, Cnavas와 SVG를 사용하여 색상, 폰트, 창의 크기 변화에 대한 동작을 설정할 수 있다. 무엇보다 유동적으로 창 크기가 변경되는 환경을 지원하기 때문에 활용도가 높다. HOME Holder 브라우저 지원 Chrome Firefox 3+ Safari 4+ IE9+ (일부 6~8지원) Opera 12+ Android(with fallback) Holder 사용법 HTML 문서에 holder.js 를 삽입한다. Holde..
웹코딩/App,Plugin 2015.08.05 11:00

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

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

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

:checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다. poly-checked 소개 IE8과 그 이하에서 :checked 의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다. HOME poly-checked DEMO 라이브 데모 poly-checked 사용법 jQuery 1.7 이상의 버전이 필요하며, IE 조건부 주석을 이용하여 이를 삽입한다. 스크립트가 삽입되기 이전에 모든 스타일시트(CSS) 파일이 삽입되어야 한다. poly-check..
웹개발론/크로스브라우징 2015.08.03 11:00

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

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

CSS3 외형(Appearance) 속성

조금은 생소할 수도 있는 appearance 속성에 대하여 설명합니다. 이 속성은 크로스브라우징을 할때, 알아두면 곤란함을 줄일수 있습니다. appearance 속성 소개 이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다. 즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다. div { appearance: button; -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Safari and Chrome */ } 예를 들면 iOS의 폼 요소들에 부여되어 있는 둥근 테두리값이나 그림자 효과를 제거할때 사용할 수 있다. webit 계열의 브라우저의 type="sear..
웹코딩/CSS 2015.07.28 10:00

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

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

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

체크박스와 라디오버튼의 정렬과 디자인은 예전부터 골치를 아프게 하는 작업이였습니다. 관련하여 현재 애용되는 디자인 방법과 브라우저 호환성을 확보하는 방법에 대하여 알아봅니다. 체크박스와 라디오버튼 디자인 현황 모던 브라우저들과 IE11은 체크박스와 라디오버튼의 크기정도는 조정할 수 있다. 모바일 브라우저에서는 기본으로 제공되는 체크박스와 라디오버튼의 선택영역이 매우 작게 표시되어 선택의 불편함이 가중되기에 이 크기를 변경하는 것이 추천된다. webkit 브라우저들에서는 -webkit-appearance: none 과 같이 네이티브 속성값을 제거하여 좀 더 다른 디자인을 구현할 수 있지만, 브라우저 호환이 되지 않는 단점이 있다. 이를 극복하기 위해 checked 속성을 이용하여 체크박스와 라디오를 꾸미는..
웹개발론/크로스브라우징 2015.07.27 11:00

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

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

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

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