코딩 공부방

모바일 사이트 작업 시 미디어 쿼리에 맞춰 계산기를 두들기는 게 비효율적이라 생각하여 간단하게 CSS 수치를 자동계산해주는 사이트를 제작하였습니다. http://iluku.net/moca/ 모카(MoCA)는 모바일 반응형 웹 구축을 도와주는 서비스입니다. 가로 폭 640px에 맞춰 CSS를 만들면 480px, 360px, 320px로 자동으로 계산하여 미디어 쿼리까지 입력되는 서비스입니다. 베타버전이라 이용하다가 문제가 발생하면 mocafeedback@gmail.com 여기에 의견을 주시면 감사하겠습니다! [이용안내] 가로 640px 모바일 페이지를 제작합니다. 첫 번째 박스에 CSS 코드를 넣습니다. Generate 버튼을 누릅니다. 두 번째 박스에 나온 코드를 복사하여 적용합니다.

NanumSquare 반듯한 직선으로 제목에 잘 어울리며 모바일에서도 잘 보이는 글꼴입니다. 꼭 필요한 2,350자만을 추려 용량을 가볍게 줄였고 웹 환경에서 보다 편리하게 사용 가능합니다. http://hangeul.naver.com/2016/nanum 나눔 스퀘어 웹폰트 Light 글씨체를 써야 할 일이 종종 있어 구글링으로 찾는 것보다 만드는 게 빠를 것 같아 Github에 웹폰트를 올리고 rawgit을 이용해 사용하고 있다. 옵션 Regular(400), Bold(700), Extra Bold(800), Light(300) 지원됩니다. 사용방법 link 방식 (권장) import 방식 @import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/..

프로젝트 중에 풀 페이지 유튜브 배경에 내비게이션에 따라 영상이 바뀌게 구현해야 하는 부분이 있어, YouTube Player API 문서를 참고하여 메뉴가 달린 YouTube 배경을 만들어 보았습니다. 이후에도 자주 사용하게 되어 뿌듯하네요^^ ytbgnav.js 기능 영상이 끝나면 다음 영상으로 자동재생(마지막 영상이 끝나면 처음으로 이동) 플레이 아이콘을 누르면 현재 재생되고 있는 배경을 레이어팝업(Modal dialog box)으로 노출 배경영상 음소거 버튼 추가 Demo 풀페이지 데모: http://iluku.net/youtube/index.html 높이지정 데모: http://iluku.net/youtube/index.html?h=600GitHub: https://github.com/moons..

블로그 첫 글! 안녕하세요.잘 부탁합니다!헤헤