남산 아래 개발자들

안녕하세요. 명동섞어찌개입니다. SVG (Scalable Vector Graphics) 는 이름 그대로 Bitmap 이미지와 달리 확대, 축소해도 깨지지 않는 이미지 포맷이죠. 요새 아이콘을 화면에 넣을 때 많이 쓰는 방법으로 아이콘 폰트를 임베딩해서 쓰거나, svg 아이콘을 다운받아 쓰는 법 외에 SVG 아이콘을 그려서 화면에 적용하는 아주 간단한 팁을 알려드릴께요! 1. Adobe 일러스트레이터를 켭니다. 없으신 분은.. 디자이너분께 부탁드려보시거나 회사 라이센스 프로그램이 있을 경우 그걸 써보세요 (협업~) 2. 일러스트레이터에서 필요한 아이콘을 그립니다. 굳이 코딩으로 어렵게 계산해서 그리실 필요가 전혀 없습니다. 그냥 보면서 그립니다. 3. 아이콘을 선택한 후 복사합니다. (Ctrl + C) 4. 새 문서를 만든 뒤 붙여넣기 합니다. (Ctrl + V) [ icon-add-user-on.svg] 끝. 참 쉽죠?! 5. 마지막으로 CSS 에 적용합니다. 저 같은 경우는 일반적으로 이런 식으로 사용합니다. [layout.css] 1 2 3 . customIcon : before { content: '' ; position: absolute ; top: 12 px ; left: 3 px ; background - size: 20 px auto ; background - repeat: no - repeat ; width: 20 px ; height: 20 px ;} . addUser { background - image: url ( assets / icons / icon - add - user - on . svg );} [html] 1 < i class = "customIcon addUser" ></ i >

HTML 으로 코딩된 테이블, 그림, 글자 등 다양한 요소가 섞여 있는 문서를 PDF 또는 A4용지로 출력했을 때 각 요소가 중간에 끊어지지 않고 보기좋게 출력할 수 있는 방법이 있는지 알아보았습니다. 방법은 생각보다 간단한데요, CSS의 @media print 속성을 이용하면 가능했습니다. @media print 는 인쇄할 때만 적용되는 것으로 다양한 기능이 있지만 바쁜 분들을 위해 핵심 CSS만 보면, 이 두 개만 알아도 충분한 것 같습니다. @media print {       .page-divide {               page-break-after: always;        } } .page-divide 라는 클래스를 준 요소 뒤에는 언제나 페이지를 분할하도록 하는 CSS 입니다. table, figure, .sector {         page-break-inside: avoid; } table, figure 또는 sector 라고 클래스를 지정해 준 요소는 페이지 때문에 끊기지 않도록 처리해주는 구문입니다. 이렇게 지정한 요소가 만약 A4 용지 단위로 프린트물이 나올 때 중간에 걸리게 되면 통째로 그 다음 장으로 넘어가게 처리해줍니다. 간단 예제 소스보기 <style> @media print {      .page-divide {             page-break-after: always;      }      .no-print-page {             display: none; //작업의 편리함을 위해 넣은 페이지 구분선. 프린트 시에는 보이지 않음       } } h1, h2, h3, h4, h5 {       page-break-after: avoid; } table, figure, .sector {        page-break-inside: avoid; } .table {        width: 100%;  

부트스트랩, Angular 등을 하다보면 부수적이지만 자주 접하게 되는 것이 있습니다. 바로 font-awesome !! ( http://fontawesome.io/ ) 각종 아이콘을 폰트로 만들어 css 만 임베딩하면 다양한 아이콘을 폰트처럼 쓸 수 있는 CSS Toolkit 입니다. font-awesome 등 아이콘 검색하기 https://glyphsearch.com/ <i class="fa fa-bandcamp"></i> 이런 식으로 아이콘을 만들어 쓰면 우선 수십개의 아이콘을 CSS에서 색상, 크기 등을 코드 한줄로 자유롭게 수정할 수 있기 때문에 사용이 굉장히 편리하구요 이미지로 할 경우 padding, margin 주면서 복잡하게 레이아웃을 맞춰야하는데 폰트 기반이다 보니 아무래도 정렬 등도 덜 신경쓰면서 웹페이지를 만들 수 있어 좋습니다. 그런데 아무리 600가지가 넘는 아이콘을 font-awesome 에서 제공한다 하더라도 모든 디자인이 다 있지는 않아서.. 딱 관리자 페이지 만드는 정도에는 유용한 것 같습니다. 특별한 브랜드 디자인이 들어가거나, 특별한 이미지 아이콘이 필요한 상황에서는 그 이상이 필요합니다. 이번 아이프렌즈펫 쇼핑몰을 만들면서 강아지/고양이 용품 관련 특화된 아이콘들이 다수 필요했는데요, 관련 아이콘들은 기존에 폰트로 만들어져 제공되는 font-awsome 이나 line icon 등에서는 찾을 수 없었습니다. 그렇다고 모든 아이콘을 기존 방식대로 일일이 이미지로 만드는 작업은 저 혼자서 디자인, 코딩 모두를 짧은 시간 내에 해내야 하는 상황에서는 어려울 것 같았구요. 그래서 이미지를 폰트로 바꾸어주는 사이트가 없을까 해서 찾아봤는데 있었습니다 ^ㅁ^ 여러 군데를 뒤져봤지만 이곳이 제일 편하더라구요 https://www.flaticon.com 1. 초간단 가입 가입을 안해도 되지만.. 찜한 아이콘을 관리하거나 다운받으려면 가

CSS (Clova Speech Synthesis) 서비스는 Naver CLoud Platform 의 AI 서비스 중의 하나로 입력한 텍스트를 자연스로운 목소리로 재생해주는 음성 합성  API 입니다. 현재 BETA Version 으로  서비스가 제공되고 있으며 하루에 10,000 글자 까지 (한시적) 무료로 사용이 가능합니다. 네이버 클라우드 플랫폼 아이디가 있다면  https://console.ncloud.com/   대시보드 화면으로 이동합니다. AI NAVER API 서비스를 선택합니다. 대시보드 화면에서 Application 등록하기를 선택합니다. Application 등록화면으로 이동합니다. 어플리케이션 이름을 등록하고 Clova Speech Synthesis 를 선택합니다. Web 서비스 URL 및 앱 패키지 이름을선택하고 등록을 선택합니다. * Web URL 입력시 Localhost 는 입력이 불가능 하므로 127.0.0.1 형식으로 입력합니다. 등록이 완료되면 Client ID 와 Client Secret 코드를 확인할 수 있습니다.  API 예제 소스는 아래 URL 에서 확인이 가능합니다. http://docs.ncloud.com/ko/naveropenapi/naveropenapi-4-2.html Node.js 소스를 가지고 테스트를 진행해 보도록 하겠습니다. 아래  client_id 와 client_secret 영역에  조금 전 발급받은 키를 입력합니다. // 네이버 음성합성 Open API 예제 var  express  =  require( 'express' ); var  app  =  express(); var  client_id  =   'YOUR_CLIENT_ID' ; var  client_secret  =   'YOUR_CLIENT_SECRET' ; var  fs  =  requir

*이 문서는 지속적으로 업데이트 될 예정입니다 *가로스크롤 UI 모바일에서 터치 + 스크롤 되는 기본적인 CSS 문법이 가장 잘 설명된 예 입니다. 자세한 설명은 여기서 보실 수 있습니다. See the Pen Flickity horizontal scrolling navigation by Steve ( @stevemckinney ) on CodePen . Angular2+ 에서 Bootstrap 과 함께 horizontal scroll 을 구현할 때 한가지 팁이라면 가로 width 를 고정값을 주면 화면 리사이징 할 때 Bootstrap Layout 이 깨집니다. height 만 주거나, 이게 불편하면 Slider 플러그인 같은 다른 대책을 구해보심이 좋을듯합니다. + Sly 라는 꽤 괜찮은 가로 스크롤 플러그인이 있는데 angular2 용으로는 아직 없어서 대단히 아쉽네요 http://darsa.in/sly/ * 이미지의 가로 세로 비율 유지하면서 잘라 보여주기 (CSS) 중앙 정렬 맞추면서 Responsive UI 에서 이미지 비율대로 Crop 해 보여주기 링크 소스 설명은  여기서  보실 수 있습니다. See the Pen 이미지의 가로세로비를 유지하면서 틀 안에 맞추기 by feeva ( @feeva ) on CodePen . * 함께 보면 좋은 문서 당신은 모를 수도 있는 CSS의 7가지 단위 vh, vw 같은 것들은 PC Web 에서는 아직 쓸 수 없겠지만 모바일만을 대상으로 한다면 꽤 매력적인 신기능입니다