본문 바로가기
Noto Sans Google에서 내놓은 Noto Sans. 한글 무료폰트의 갑은 네이버의 나눔시리즈가 아닐까? 하지만 가끔 해상도에 따라 다르게 보이거나 굵기에 따라, 혹은 특정 크기에서 일부 글자가 이상하게 보이는 경우가 있었다. 그리고 난 나눔고딕보다 나눔바른고딕을 좋아하는데, 나눔바른고딕은 구글폰트에 존재하지 않아서 cdn url로 받으면 너무 느리고, 굵기는 4종류뿐이고, 중세국어는 옛한글폰트를 따로 깔아야 되고.. 등등 사소한 아쉬움들이 있다. Noto sans는 폰트하나로 중세국어도 지원하고, 굵기가 7가지고, 모든 자모 조합에서 한글이 깨지지 않는다. (일반적인 한글폰트에서 깨지는 귏곩잢... 같은 글자도 깨지지 않고 지원한다) Apache 2.0 라이센스라서, 얼마든지 상업적 이용이 가능하다. 영화 포스터..
hammer.js: 모바일처럼 스크롤/스와이프 최근 터치스크린에서 돌아갈 웹앱(kiosk-like)을 구현하는 중,웹에서도 모바일처럼 드래그하면 스크롤이 이동하고 스와이프로 슬라이드쇼를 넘기고 핀치로 확대/축소도 가능해야 하며더블클릭으로도 확대/축소가 이루어져야 하는 등웹이지만 그냥 모바일이라고 착각하게 할만한 기능들이 필요했다. 구현되어있는 라이브러리가 있었다 ㅎ_ㅎ 아래 공식페이지에서 예제와 사용법을 볼 수 있다.https://hammerjs.github.io/ 용량도 7kb밖에 안되는데 위의 기능들 전부를 구현할 수 있다. (몇몇 기능은 브라우저에 제한이 있다)Usage아래는 스와이프만 갖다쓴 예.1234567891011121314151617 var element = document.getElementById("parent"); var mc =..
슬라이드쇼 구현 (css/javascript/jquery) 슬라이드쇼 구현 (css/javascript/jquery)1. 기본흔하게 볼 수 있는 기본 슬라이드쇼. HTML의 기본 구조는이미지를 위한 태그이전, 다음으로 넘어가기 위한 태그순서와 현재 위치를 위한 태그로 이루어져 있으며, CSS로 슬라이드쇼를 위한 기본 모양이 잡혀 있다. 자바스크립트에서는 배열을 이용해 태그 혹은 태그를 클릭하는 이벤트가 발생할 때마다 반복문으로 전체 이미지를 display:none 해서 감추고, replace를 통해 모든 태그의 className에 active를 제거하는 단계가 포함된다. 그 뒤 현재 인덱스에 해당하는 에 active className을 추가하고, (CSS에 active 클래스 색지정이 되어 있다.)해당 태그에는 display:block으로 스타일을 변경해 사진이..
자주 쓰이는 SVN Commands 10 예제 자주 쓰이는 SVN Commands 10 예제SVN은 Subversion의 약자입니다. Subversion은 프리/오픈소스 VCS(Version Control System)입니다. Subversion은 시간에 따라 파일과 디렉토리를 관리합니다. 파일 트리는 중앙 리포지터리(repository, 이하 저장소)에 배치됩니다. 저장소는 파일과 디렉토리들의 변경내역을 모두 기억한다는 것을 제외하고는 일반적인 파일 서버와 굉장히 유사하며, 코드의 이전 버전들을 복구하거나 변경 내역을 검토하는 데 사용됩니다. 예제와 함께 기본 SVN 커맨드들을 봅시다. SVN 작업 복사본 (SVN Working Copy)SVN은 SVN server라고도 불리는, 모든 버전 데이터를 저장하는 저장소입니다. SVN 클라이언트 프로그램..
CSS 가운데정렬 : 완벽 가이드 Centering in CSS: A Complete Guide 목차 수평 중앙정렬 Horizontally Centering 인라인 엘리먼트 블록 엘리먼트 하나 이상의 엘리먼트 수직 중앙정렬 Vertically Centergin 인라인 엘리먼트 single line multiple lines 블록 엘리먼트 높이를 아는 경우 높이를 모르는 경우 flexbox 둘 다 Both Horizontally and Vertically Centering 너비와 높이가 고정된 경우 너비와 높이를 모르는 경우 flexbox grid 항상 검색하는게 성질나서 저장을 위한 번역글. 의미없는 사족은 뺐습니다.원글은 이곳입니다. 수평 Horizontally Inline 혹은 Inline-* 레벨의 엘리먼트인가요? (텍스트 혹은 링..
Custom Form tag Bootstrap4 적용. 아이콘을 위해 fontawesome의 css를 받아와야 하고, Fontawesome Icons 이 링크로 들어가 사용하고 싶은 아이콘을 골라 쓰면 된다.
사이드바 외부클릭시 숨기기 웹페이지에서 사이드바 바깥쪽을 클릭하면 사이드바가 사라지게 하는 기능을 구현해보자. 특히 모바일 사용자가 대다수를 차지하는 홈페이지에서는 UI 면에서 안그래도 좁은 사이드바에 X 버튼 혹은 닫기 버튼을 우겨넣을 필요가 없으니 네비게이션 본연의 기능에 집중할 수 있어 좋다. UX 면에서도 사용자가 닫기버튼을 누르기 위해 핸드폰 화면 최상단까지 손가락을 움직이는 수고를 덜어주는 장점이 있고, 모바일 앱에서 쓰이는 네비게이션(예: 안드로이드에서 쓰이는 Navigation Drawer)에서는 바깥쪽을 터치해 드로어를 닫는 기능이 기본적으로 포함되어 있으므로 경험이 있는 사용자라면 따로 설명이 필요없는 익숙한 기능이라 구현해놓으면 좋다. 뒤집어 말하면 사용자는 하던대로 사이드바 바깥쪽을 클릭했는데 닫히지 않으면 ..
Android : webview에서 HTML video 전체화면 재생 Android : webview에서 HTML video 전체화면 재생 안드로이드에서 webview로 해당 url에 접속할 때 기본적으로 setWebChromeClient() 와 setWebViewClient()를 설정해주는데,보통과 같이 진행하면 HTML video 태그 혹은 유튜브 비디오에 전체화면 버튼 자체가 보이질 않는다. 전체화면 버튼을 컨트롤바에 보이게 하려면 webChromeClient 클래스의 onShowCustomView() 메소드와 onHideCustomeView()를 오버라이드 해줘야 하는데, 오버라이드만 해도 전체화면 버튼이 생긴다. 그러나 오버라이드하고 별다른 코드를 추가하지 않으면 전체화면시 흰 화면만 나오거나 오디오만 나오는 문제가 발생한다. 구현다음과 같이 webChromeCl..

티스토리툴바